How to use vuetify in nuxt js as plugin?

Question

I need to use vuetify in my nuxt js project as plugin. I've tried package @nuxtjs/vuetify but get error

Cannot assign to read only property 'base' of object '#'

I've install my nuxt project from official codesandbox online playground in local server and on shared hosting. All the time I got the same error. I tried install node modules using npm and yarn. How I can add fresh vuetify version to last version of nuxt js as plugin with npm package vuetify?

Were you able tor resolve this issue? I have tun into the same `Cannot assign to read only property 'base' of object '#'` issue with a project that uses nuxt and vuetify. — Manas, Jan 19 '20 at 03:09
No, not yet succeeded. I also have such a problem with the project on `nuxtjs` + `vuetifyjs`. NPM package [@nuxtjs/vuetify](https://www.npmjs.com/package/@nuxtjs/vuetify) still not updated on nuxt cli — Andreas Hunter, Jan 20 '20 at 06:27

score 6 · Answer 1 · answered Jan 09 '20 at 03:40

Install vuetify and @mdi/font

Create a file vuetify.js in your plugins folder with the following code:

import Vue from 'vue'
import Vuetify from 'vuetify'

import colors from './../config/colors'

import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css'
Vue.use(Vuetify)

export default ctx => {
  const vuetify = new Vuetify({
    theme: {
      themes: {
        light: {
          ...colors
        },
        dark: {
          // colors
        }
      }
    }
  })
  ctx.app.vuetify = vuetify
  ctx.$vuetify = vuetify.framework
}

Edit nuxt.config.js file by adding vuetify to plugins like this

{
  ...
  plugins: ['~plugins/vuetify.js'],
  ...
}

score 3 · Answer 2 · answered Jan 08 '20 at 10:41

3

I achieved this with the following:

npm install --save vuetify

create a file vuetify.js in your plugins folder with the following code:

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

Amend your nuxt.config.js:

   plugins: ['~plugins/vuetify.js'],
   build: {
     vendor: ['vuetify']
   }

answered Jan 08 '20 at 10:41

Nate

605
4
12

How do you edit Vuetify specific settings such as your primary color? – Bonteq Jul 13 '20 at 03:52

Ben · Answer 3 · 2020-04-09T11:47:04.777

1

There is a discussion of this issue here: https://github.com/nuxt-community/vuetify-module/issues/268

Fixing custom colours and specifying options in external files seem to affect this. If you have colours specified in the options, replace primary: colors.blue with primary: colors.blue.base.

edited Apr 09 '20 at 11:47

answered Apr 09 '20 at 11:38

Ben

968
1
6
9

score 0 · Answer 4 · answered Mar 26 '20 at 21:12

I have / had same issue. I simply made sure to use version 1.10.3 or below defined explicitly in package.json

"@nuxtjs/vuetify": "1.10.3", (not with the ^1.10.3)

I also noticed any version over this also adds an "undefined" 404 to the end of every url request. I posted on Nuxt / CMTY but they have a user base of zero people who answer any questions.

score 0 · Answer 5 · answered Jul 23 '21 at 10:45

Choose Vuetify as ur UI Framework when initial a Nuxt project

Create a new file in plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify)

export default new Vuetify({
    theme: {
        light: true,
        themes: {
            light: {
                primary: colors.blue.darken2,
                accent: colors.grey.darken3,
                secondary: colors.amber.darken3,
                info: colors.teal.lighten1,
                warning: colors.amber.base,
                error: colors.deepOrange.accent4,
                success: colors.green.accent3
            }
        }
    }
})

Add the plugin config inside nuxt.config.js

export default {
  plugins: ['~/plugins/vuetify.js'],
}

Restart server, npm run dev

An image example: vuetify.js

Done!

score 0 · Answer 6 · answered Dec 20 '22 at 11:49

you can do the following steps in order and finally use Vuetify components:

1- Setup vuetify

yarn add vuetify@next sass

2- Your package.json should now look similar to the following:

// package.json
   "devDependencies": {
      "nuxt": "3.0.0-rc.1"
    },
   "dependencies": {
      "sass": "^1.51.0",
      "vuetify": "^3.0.0-beta.1"
    }

3- Creating your Vuetify plugin

You must create this file in the plugin folder and put these codes inside it.

// plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives,
  })

  nuxtApp.vueApp.use(vuetify)
})

4- Configure Nuxt 2 or 3 to use our new plugin

In this section, you should put these codes in the nuxt.config.ts file like this

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass'],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

5- Finally, in order to test that you have done the steps correctly, you can use this component in your code to see if Vuetify is installed correctly or not.

<v-btn>Button</v-btn>

Tip: If you have done these steps or you want to use a new component, in many cases it is better to stop and restart your project once.

How to use vuetify in nuxt js as plugin?

6 Answers6

Linked