web-dev-qa-db-fra.com

Comment utiliser vuetify dans nuxt js comme plugin?

J'ai besoin d'utiliser vuetify dans mon projet nuxt js comme plugin. J'ai essayé le package @ nuxtjs/vuetify mais obtenir une erreur

Impossible d'affecter à la propriété en lecture seule 'base' de l'objet '#'

enter image description here

J'ai installé mon projet nuxt depuis le terrain de jeu officiel codesandbox en ligne sur le serveur local et sur l'hébergement partagé. J'ai toujours eu la même erreur. J'ai essayé d'installer des modules de nœuds en utilisant npm et yarn. Comment puis-je ajouter une nouvelle version de vuetify à la dernière version de nuxt js en tant que plugin avec le package npm vuetify ?

node.jsvue.jsvuejs2vuetify.jsnuxt.js
3
Andreas Hunter

Installez vuetify et @ mdi/font

Créez un fichier vuetify.js dans votre dossier plugins avec le code suivant:

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
}

Modifiez le fichier nuxt.config.js en ajoutant vuetify à des plugins comme celui-ci

{
  ...
  plugins: ['~plugins/vuetify.js'],
  ...
}
1
Mamadou Hady Barry

Il y a une discussion sur ce problème ici: https://github.com/nuxt-community/vuetify-module/issues/268

La correction des couleurs personnalisées et la spécification des options dans les fichiers externes semblent affecter cela. Si vous avez des couleurs spécifiées dans les options, remplacez primary: colors.blue avec primary: colors.blue.base.

0
Ben

J'ai réalisé ceci avec ce qui suit:

npm install --save vuetify

créez un fichier vuetify.js dans votre dossier plugins avec le code suivant:

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

Vue.use(Vuetify)

Modifiez votre nuxt.config.js:

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

J'ai/ai eu le même problème. Je me suis simplement assuré d'utiliser la version 1.10.3 ou inférieure définie explicitement dans package.json

"@ nuxtjs/vuetify": "1.10.3", (pas avec le ^ 1.10.3)

J'ai également remarqué que toute version sur ceci ajoute également un 404 "indéfini" à la fin de chaque demande d'URL. J'ai posté sur Nuxt/CMTY mais ils ont une base d'utilisateurs de zéro personne qui répond aux questions.

0
Dave M