Nuxt integration
#

Vuestic UI is fully compatible with Nuxt3. You can use Vuestic UI in your Nuxt3 project.

Scaffold new Nuxt app with Vuestic
#

The easiest way to create new Nuxt project with integrated Vuestic is to use create-vuestic tool. Create new project and select Nuxt template.

See detailed guide here.

Manual Installation
#

Install integration module:

npm

yarn

npm install @vuestic/nuxt

Then you need to update nuxt-config.ts file:

export default defineNuxtConfig({
  modules: ["@vuestic/nuxt"],

  vuestic: {
    config: {
      // Config here
    },
  },
});

More about configuration

Tree shaking
#

Vuestic UI is tree-shaking friendly in Nuxt as well. You can choose which css modules will be used. This can be configured in nuxt.config.ts. Components must be tree-shakable automatically.

In css options you can pass array of css modules that will be used in the project or false to remove all css from Vuestic expect components css. Available modules: typography, grid, reset. In example below grid will not be used in project. This is helpful in case you already using some other library.

export default defineNuxtConfig({
  modules: ["@vuestic/nuxt"],

  vuestic: {
    config: {
      // Config here
    },

    css: ["typography", "reset"],
  },
});

Options
#

options	description	type	default
config	Vuestic Global Config	`Object`	`{}`
css	Choose which CSS modules will be added to nuxt. If `true` all CSS modules will be added	`Array<'typography' \| 'grid' \| 'reset'> \| boolean`	`true`
fonts	Adds Vuestic default fonts to head	`boolean`	`true`

vuestic.config.ts
#

Because of nuxt config limitation, it is impossible to pass functions trough nuxt.config.ts. But you can create vuestic.config.ts which will be passed to { '@vuestic/nuxt' }. Use defineVuesticConfig to define type safe configuration for Vuestic UI.

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

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

Nuxt integration #

Scaffold new Nuxt app with Vuestic #

Manual Installation #

Tree shaking #