Nuxt 3 compatibility

[Aperrix]

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 !

[Dreaming-Codes]

Duplicate of #471

[GreyXor]

Meanwhile, this can help.

[imfsilva]

Any news on this? Nuxt 3 RC was announced yesterday and Vuetify 3 will be available on May 2022.

[lerayj]

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.

[P4sca1]

Here is how you can use Vuetify 3 with Nuxt 3 with automatic tree-shaking and imports using vite:

1. Install required dependencies yarn add -DE vuetify@^3.0.0-beta vite-plugin-vuetify
2. Add plugins/vuetify.ts

import { createVuetify } from 'vuetify'

export default defineNuxtPlugin((nuxtApp) => {
	const vuetify = createVuetify({ ssr: process.server })
	nuxtApp.vueApp.use(vuetify)
})

3. 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

4. Add ./modules/vuetify to your list of modules in nuxt.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>

[harlan-zw]

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 :)