[Feature Request] Nuxt 3 support for Vuetify 3

[davidzech27]

Problem to solve

As it is now with v3.0.0.alpha.12, Vuetify 3 can't be used with Nuxt 3. My attempt at getting them to work together was a normally configured Nuxt 3 project and had the following code in vuetify.js within the plugins directory:

//plugins/vuetify.js
import { defineNuxtPlugin } from "#app"
import { createVuetify } from "vuetify"
import * as components from "vuetify/components"

export default defineNuxtPlugin((nuxtApp) => {
    const vuetify = createVuetify({
       components
    })
    
    nuxtApp.vueApp.use(vuetify)
})

My nuxt.config.js file looked like:

import { defineNuxtConfig } from "nuxt3"

export default defineNuxtConfig({
    serverMiddleware: [
        { path: "/api", handler: "~/api" }
    ],
    css: ["vuetify/lib/styles/main.css"],
    build: {
        transpile: ["vuetify"]
    }
})

But after running the application with npx nuxi dev and opening it up in my browser, I got the following error message in the console:

globals.ts:3 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'DEBUG')
    at globals.ts:3:48
(anonymous) @ globals.ts:3
Promise.then (async)
entry @ entry.mjs:1
(anonymous) @ entry.mjs:3

The file that caused the error:

//util/globals.ts
export const IS_NODE = typeof process !== 'undefined';
export const IN_BROWSER = typeof window !== 'undefined';
export const IS_DEBUG = IS_NODE && process.env.DEBUG === 'true';
export const IS_PROD = IS_NODE && process.env.NODE_ENV === 'production';
export const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
export const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
export const SUPPORTS_FOCUS_VISIBLE = IN_BROWSER && CSS.supports('selector(:focus-visible)');

So the problem is definitely a result of Vuetify not having access to process.env. However, defining DEBUG and NODE_ENV within the env field of defineNuxtConfig did not work, which is normally how process.env is accessed from within your application. Directly editing the Vuetify file that caused the errors from within node_modules didn't work either.

The only solution that worked was removing the nuxt3 devdependency and reinstalling it as a normal dependency, which made the error go away temporarily. But after uploading my code to a GitHub repository and cloning it into a different directory, the same error would show up after running the application and opening it up in my browser.

Proposed solution

Probably due to webpack or possibly Babel, Vuetify does not have access to process.env, even when you use the env field within defineNuxtConfig. I am not sure what the best solution to this would be. You could add an environment variables field to VuetifyOptions within framework.ts, and then using this set process.env.DEBUG and process.env.NODE_ENV. You could also check to see if process.env exists within util/globals.ts before setting IS_DEBUG and IS_PROD, but then these values would not always be correct; this would just make the errors go away. The first solution is probably better, but I don't know if the Vuetify contributors would want to add another field to Vuetify options just for Nuxt users.

[KaelWD]

Duplicate of nuxt-community/vuetify-module#475

Related: nuxt/nuxt#13257, https://github.com/nuxt/framework/discussions/1183#discussioncomment-1997354

We don't explicitly support nuxt, that's maintained by nuxt themselves.

[steklopod]

Vuetify 3 is a highly expected feature 👍🏻 for nuxt app. Community only have @nuxtjs/vuetify wich doesn't have perfect support nuxt bridge at the moment