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/nuxtThen 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 #
| options | description | type | default |
|---|---|---|---|
| config | Vuestic Global Config |
|
|
| css | Choose which CSS modules will be added to nuxt. If |
|
|
| fonts | Adds Vuestic default fonts to head |
|
|
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}`,
})
}
]
})
})