Getting Started #

Installation #

1. Add excited-ui and its supporting libraries

   bash

   # pnpm
   pnpm add excited-ui && pnpm add unocss
   

   1
   2
   
   bash

   # yarn
   yarn add excited-ui && yarn add unocss
   

   1
   2
   
   bash

   # npm
   npm install excited-ui && npm install unocss
   

   1
   2
   

ExcitedUI is based on UnoCSS, it means that it works properly with uno, so you should install it.

Usage #

1. Add UnoCSS to vite.config.js

import Unocss from 'unocss/vite'
export default {
    plugins: [
    Unocss(),
    ],
}

2. Create UnoCSS Config file uno.config.js in root of the project with below content:

   ts

   import { presetThemeDefault } from "excited-ui";
   import {
     defineConfig,
     presetIcons,
     presetUno,
   } from 'unocss'
   export default defineConfig({
     presets: [
       presetUno(),
       presetIcons({
         scale: 1.2,
         extraProperties: {
           height: '1.5em',
           'flex-shrink': '0',
         },
       }),
       presetThemeDefault(),
     ],
     include: [/.*\/excited-ui\.js(.*)?$/, './**/*.vue', './**/*.md'],
   })
   

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   

3. Update your main.js file like below:

   js

   import { createApp } from 'vue'
   import App from './App.vue'
   import { ExcitedUI } from "excited-ui";
   // UnoCSS import
   import 'uno.css'
   // import styles
   import "excited-ui/dist/assets/index.css";
   // Using `app.use(ExcitedUI)` will register all the components globally
   createApp(App)
     .use(ExcitedUI)
     .mount('#app')
   

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   

It's done! 🥳

On-demand Import #

First you need to install unplugin-vue-components lets you auto import components on demand. With this you can omit import statement and still get benefits of tree shaking.

1. install unplugin-vue-components

pnpm add -D unplugin-vue-components

2. Add following in vite.config.js:

   js

   // other imports
   import Components from 'unplugin-vue-components/vite'
   import { ExComponentResolver } from 'excited-ui'
   export default defineConfig({
     plugins: [
       // other plugins
       Components({
         resolvers: [
           ExComponentResolver()
         ]
       }),
     ],
   
     // other config
   })
   

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   

3. Now, just use components without import manually because it will be auto imported on demand ✨

   vue

   <template>
     <ExButton>Primary</ExButton>
   </template>
   

   1
   2
   3