Vite integration
#

Vuestic UI is fully compatible with Vite. You can easily use Vuestic UI in your Vite-powered Vue 3 project.

Scaffold new Vite app with Vuestic
#

The easiest way to create a new Vite project with integrated Vuestic UI is to use the create-vuestic CLI tool. Create a new project and select the Vite template.

See detailed guide here.

Installation
#

If you need to integrate Vuestic UI into your existing Vite project, first install the library:

npm

yarn

pnpm

bun

npm install @vuestic/compiler vuestic-ui

Then, you need to configure Vite to use the Vuestic compiler. Import vuestic from @vuestic/compiler/vite in your vite.config.ts file and add it to the plugins array. Here's an example of a basic Vite configuration with Vuestic compiler:

import { vuestic } from '@vuestic/compiler/vite'
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vuestic(),
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', globalThis._importMeta_.url))
    },
  },
})

Compiler options
#

Vuestic compiler provides several options to customize its behavior. You can configure these options in your vite.config.ts file. Here are the available options:

Config - use vuestic.config.ts for better type support and configuration. Set to true by default.
Auto import - Vuestic UI components are automatically imported when used in templates. Set to false by default.
Css layers - adds Vuestic UI CSS layers to control the order of styles in the final bundle. Set to false by default. Turns on by if tailwindcss package detected.
Devtools - enables Vuestic UI devtools for better debugging and development experience. Set to false by default.

vuestic.config.ts
#

You can configure Vuestic UI globally by creating a vuestic.config.ts file and using defineVuesticConfig function. This allows you to customize component defaults, icons, colors, and more.

import { defineVuesticConfig, createIconsConfig } from 'vuestic-ui'

export default defineVuesticConfig({
  icons: createIconsConfig({
    fonts: [
      {
        name: 'fa-{name}',
        resolve: ({ name }) => ({
          class: `fas fa-${name}`,
        })
      }
    ]
  })
})

Typescript
#

Vuestic UI is written in TypeScript, providing type definitions for all components and utilities. This allows you to take full advantage of TypeScript's features, such as autocompletion and type checking.

To ensure TypeScript recognizes Vuestic UI components, you may need to add the following to your env.d.ts file:

/// <reference types=".vuestic" />

Vite integration #

Scaffold new Vite app with Vuestic #

Installation #

Compiler options #