vuetify-module
vuetify-module copied to clipboard
Nuxt 3 compatibility
Is your feature request related to a problem? Please describe. Hi ! I have not currently found a solution to use vuetify 2 or 3 (alpha) with nuxt 3, do you have a roadmap so that we can follow the progress?
Describe the solution you'd like .
Describe alternatives you've considered .
Additional context .
Thanks for your help !
Duplicate of #471
Meanwhile, this can help.
Any news on this? Nuxt 3 RC was announced yesterday and Vuetify 3 will be available on May 2022.
Yep would love to have some update on this! Is it something that it's working on ? Not a focus at all ? wip? Almost done ? Just to know what we can expect and in which timeline.
Here is how you can use Vuetify 3 with Nuxt 3 with automatic tree-shaking and imports using vite:
- Install required dependencies
yarn add -DE vuetify@^3.0.0-beta vite-plugin-vuetify
- Add
plugins/vuetify.ts
import { createVuetify } from 'vuetify'
export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({ ssr: process.server })
nuxtApp.vueApp.use(vuetify)
})
- Add
modules/vuetify.ts
import type { NuxtModule } from '@nuxt/schema'
import vuetifyLoader from 'vite-plugin-vuetify'
// eslint-disable-next-line @typescript-eslint/require-await
const vuetifyModule: NuxtModule = async (_inlineOptions, nuxt) => {
nuxt.options.build.transpile.push('vuetify')
nuxt.options.css.push('vuetify/lib/styles/main.css')
nuxt.options.vite.ssr ??= {}
nuxt.options.vite.ssr.noExternal ??= []
if (!Array.isArray(nuxt.options.vite.ssr.noExternal)) {
throw new Error('Expected nuxt.options.vite.ssr.noExternal to be an array.')
}
nuxt.options.vite.ssr.noExternal.push('vuetify')
nuxt.hooks.hook('vite:extendConfig', (config) => {
config.plugins?.push(vuetifyLoader())
})
}
export default vuetifyModule
- Add
./modules/vuetify
to your list of modules innuxt.config.ts
export default defineNuxtConfig({
// The rest of your config
modules: [
// Your other modules
'./modules/vuetify',
],
})
Now you can start using vuetify in your app, e.g.: layouts/default.vue
<template>
<v-app>
<v-main>
<slot />
</v-main>
</v-app>
</template>
pages/index.vue
<template>
<v-container>
<v-card>
<v-card-title>Title</v-card-title>
<v-card-text>Text</v-card-text>
</v-card>
</v-container>
</template>
Going to track here https://github.com/nuxt-community/vuetify-module/issues/522, thanks for the workarounds.
If anyone is interested in helping migrate the module let us know :)