Please consider using another module: vuetify-nuxt-module
An alternative module for setting up Vueitfy 3 with nuxt.
- Add
@nuxt-alt/vuetify
andsass
dependency to your project
yarn add @nuxt-alt/vuetify sass
- Add
@nuxt-alt/vuetify
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt-alt/vuetify'
],
vuetify: {
/* module options */
}
});
You can view a Stackblitz setup here
- Type:
Object
- Default:
{}
This property sets the configuration for vuetify via the createVuetify
function. All the properites here are for the vuetify vonfiguration, so consider looking at their documentation for that.
- Type:
Object
- Default:
{}
These options pertain to the vuetify-loader options
Option | Type |
---|---|
autoImport | Boolean |
styles | true / 'none' / 'expose' / 'sass' / { configFile: string } |
Vuetify comes with their own compasables, I've just added it to nuxt for auto-importing.
Available Composables |
---|
useTheme |
UseDisplay |
useRtl |
useLocale |
useLayout |
1. Custom Scss issue (Source: https://github.com/nuxt/framework/issues/8825)
There is a bug with vuetify where custom scss files might not function correctly. Depending on how severe this issue i, I might try to implement an alternative solution to this.
2. Theme values not applying & memory leak (Source: vuetifyjs/vuetify#16156)
There's currently a bug with vueuse/head where it's potentially causing a memory leak and also not adapting changes when using the useTheme
composable. For now, I have made a workaround where the module will be running its own createVuetify
instance inheriting from vueitfy and making the necissary changes to make it function. Until this is fixed thta will be used instead.
This should have been fixed in vueitfy's 3.1.6
version.