Vuetify not working properly on deployment (nuxt3)

Support
, , , ,
1

Site name:
https://cadian.netlify.app/

Issue:
While building some personal site, I found that vuetify, that works perfectly on local, stops working properly on the extension panels it provides. Maybe some dependency conflict while uploading to netlify.

Any help would be appreciated

Node version: 18.19.0

Package.json:
{
“name”: “nuxt-app”,
“private”: true,
“scripts”: {
“build”: “nuxt build”,
“dev”: “nuxt dev”,
“generate”: “nuxt generate”,
“preview”: “nuxt preview”,
“postinstall”: “nuxt prepare”
},
“devDependencies”: {
“[at]nuxt/devtools”: “latest”,
“[at]nuxtjs/tailwindcss”: “^6.8.0”,
“[at]pinia-plugin-persistedstate/nuxt”: “^1.2.0”,
“[at]types/node”: “^18.17.1”,
“nuxt”: “^3.6.5”,
“nuxt-electron”: “^0.6.0”
},
“dependencies”: {
“[at]mdi/font”: “^7.2.96”,
“[at]nuxtjs/composition-api”: “^0.33.1”,
“[at]pinia/nuxt”: “^0.5.1”,
“pinia”: “^2.1.7”,
“sass”: “^1.64.2”,
“vite-plugin-vuetify”: “^1.0.2”,
“vue-meta”: “^3.0.0-alpha.10”,
“vuetify”: “^3.3.11”
}
}

Logs:

Initializing:

image
image1280×922 29.6 KB

2

I’m not sure what that means. Could you provide more details and a way to reproduce the issue please?

3

sure!

I would love to attach several images but it won’t let me

image
image891×174 6.88 KB

This is the “component” that doesn’t work when deployed, meaning even if you click it won’t expand. While working on local, every is perfect

If I can provide more information, I would be more than happy

4

All I’m seeing is a page with password. Where’s this problem happening?

6

During the Netlify build logs, I noticed multiple warnings about unmet peer dependencies such as:

warning “@nuxtjs/composition-api@0.33.1” has unmet peer dependency “@nuxt/vue-app@^2.15”
warning “vuetify@3.3.11” has unmet peer dependency “vue@^3.0.0”

Even though everything looked fine locally, the deployed site had broken Vuetify behavior.

After some digging, I realized the issue was caused by using packages that belong to Nuxt 2 in a Nuxt 3 project.
In particular:

  • @nuxtjs/composition-api is for Nuxt 2, not Nuxt 3.

  • vue-meta is also for Vue 2/Nuxt 2, while Nuxt 3 now uses @vueuse/head internally.

These legacy dependencies cause version conflicts in the build process, especially in clean installs (like Netlify CI), even if it appears fine on local.

Here’s what worked for me:

  1. Remove old dependencies from package.json:

    "@nuxtjs/composition-api": "^0.33.1",
"vue-meta": "^3.0.0-alpha.10"

  2. Make sure Vuetify is initialized as a Nuxt plugin
    Create plugins/vuetify.js:

    import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'vuetify/styles'

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    theme: { defaultTheme: 'light' },
  })
  nuxtApp.vueApp.use(vuetify)
})

  3. Enable Vuetify plugin in your nuxt.config.ts:

    import { defineNuxtConfig } from 'nuxt/config'
import vuetify from 'vite-plugin-vuetify'

export default defineNuxtConfig({
  build: { transpile: ['vuetify'] },
  vite: {
    ssr: { noExternal: ['vuetify'] },
    plugins: [vuetify()],
  },
})

  4. Ensure consistent Node version on Netlify
    Add an environment variable in your site settings:

    NODE_VERSION = 18.19.0

    or include an .nvmrc file with:

    18.19.0

  5. Use one package manager only (preferably Yarn)
    Delete any package-lock.json and rely only on yarn.lock.

  6. Rebuild and redeploy

    rm -rf node_modules .nuxt yarn.lock package-lock.json
yarn install
yarn build

After cleaning up the old dependencies and properly configuring Vuetify as a plugin, everything started working on both local and Netlify builds.

Vuetify panels, components, and theming now behave exactly the same as in my local environment.