Quick Start

Good to know: WebUi uses tailwindcss! so make sure to setup tailwind on your vue 3 project

The current version of WebUi only supports Vue 3. Support for other vueJs version will come with the next release of WebUi. When creating a new project, please ensure you selected Vue 3 from the Vue CLI prompts, or that you are installing to an existing Vue 3 project.

The current version of WebUi uses Typescript by default

Install the library

The best way to interact with our API is to use one of our official libraries:

npm

# Install via NPM
npm install addweb-ui

yarn

Once installed, locate your main.ts file and add the snippet below to your application.

// ./src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import WebPlugin from './WebPlugin'

const app = createApp(App)

app.use(WebPlugin)
app.mount('#app')

Then add the snippet below to your tailwind.config.js file

// ./tailwind.confg.js
module.exports = {
    content: {
        "./node_modules/addweb-ui/**/*.{vue,js,ts,jsx,tsx}",
    }
}

Use your first Compoent

Now you have finished settingup the WebUi library it is time to start using the components provided to you!

Open your app.vue component and replace the code with the snippet below

// ./src/App.vue
<template>
  <web-app-bar title="Add-web" :items="menu_items">
    <template #right-side>
      <div>
        <web-button class="bg-teal-400">Downloads</web-button>
      </div>
    </template>
  </web-app-bar>
</template>

Cheers you have created your first component run your app to view it

npm

npm run dev

yarn

If everything is configured correctly you will see the app-bar below on your browser

navication component screenshot

Take a look at how you might call this method using our official libraries, or via curl: