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?

Answer 1

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'],
  ...
}

Answer 2

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']
   }