Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.

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.

Manual Installation
#

Install integration module:

npm install @vuestic/nuxt

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

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

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

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
#

optionsdescriptiontypedefault
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}`,
        })
      }
    ]
  })
})