web-dev-qa-db-fra.com

Vue, Vuetify n'est pas correctement initialisé

J'ai installé Vuetify sur mon Vue application webpack.

Mon projet est configuré avec vue init webpack my-project fonctionnement Vue 2.5.2 et en utilisant Vuetify 2.0.2.

J'ai installé Vuetify dans mon App.js

import Vue from 'vue'
import '../node_modules/vuetify/dist/vuetify.min.css';
import App from './App'
import router from './router'
import store from './store'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

Tout semble bien fonctionner. Je peux appeler Vuetifycomponents dans l'un de mes composants.

<template>
  <v-container>
        <v-card width="400" height="150" raised>
          <h4>Hello</h4>
        </v-card>
  </v-container>
</template>

Je lis ensuite que je dois envelopper mon App.js avec le composant v-app, mais quand je le fais, j'obtiens une erreur disant: Error: Vuetify is not properly initialized.

<template>
  <div id="app">
    <v-app>
      <NavigationBar />
      <v-content>
        <router-view />
      </v-content>
    </v-app>
  </div>
</template>

Peut-être que Vuetify n'est pas installé correctement, j'espère que certains d'entre vous pourront éclairer mon problème.

javascriptvue.jsvuetify.js
8
dumbprogrammer

Je le fais de cette façon (vue 3.9, vuetify 2.0)

Dans main.js (ou App.js)

import vuetify from './plugins/vuetify'
...
new Vue({
  ...
  vuetify,
  render: h => h(App)
}).$mount('#app')

Dans les plugins/vuetify.js

import Vue from "vue"
import Vuetify from "vuetify/lib"

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'md',  // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
  },
  theme: {
    dark: false,
  },
  themes: {
    light: {
      primary: "#4682b4",
      secondary: "#b0bec5",
      accent: "#8c9eff",
      error: "#b71c1c",
    },
  },
})

dans App.vue

<template>
  <v-app>
    ...
  </v-app>
</template>
10
Patrice Flao

Si vous utilisez vue-cli, ajoutez ces lignes au fichier index.html après les balises META:

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

Et votre main.js devrait ressembler à ceci:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'

Vue.config.productionTip = false
Vue.use(Vuetify)
export default new Vuetify({ })

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  vuetify: new Vuetify(),
  components: { App },
  template: '<App/>'
})
8
Vishal Ghadge

Il y a beaucoup de changements avec la nouvelle version.

essaye ça

import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);

new Vue({
vuetify : new Vuetify(),
...
});

bonne chance

7
Ruhith Udakara

Essayez d'ajouter:

const opts = {
  theme: {
    dark: true,
    themes: {
      light: {
        primary: '...',
        ...
      },
      dark: {
        primary: '...',
        ...
      }
    }
  }
}

et

new Vue({
  el: '#app',
  router,
  store,
  vuetify: new Vuetify(opts),
  render: h => h(App)
})

à ton main.js.

1
DjSh

Patrice a une de mes réponses préférées finement adaptées, selon la configuration, cela peut être ce dont vous avez besoin:

webpack | vue 2.5+ | vuetify 2.1+

Dans votre main.js/App.js

import Vue from 'vue'
import router from './router'
import vuetify from './plugins/vuetify' // path to vuetify export

//Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
el: '#app',
router,
vuetify,
});

Dans vos plugins/vuetify.js

// resources/js/plugins/vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify({
  icons: {
    iconfont: 'md', // default - only for display purposes
  },
})

Dans votre EaxmpleComponent.vue et tous les autres fichiers vue: enveloppez tous les composants vue dans la v-app et la balise de modèle comme:

<template>
  <v-app>
    ...
  </v-app>
</template>
0
DAVID AJAYI

Lors de l'ajout de vuetify (2.x) à Gridsome, j'ai eu le même problème et j'ai dû ajouter l'objet d'importation vuetify à appOptions dans main.js:

appOptions.vuetify = new Vuetify({})

comme décrit dans:

https://github.com/gridsome/gridsome.org/blob/master/docs/assets-css.md

et

https://github.com/gridsome/gridsome/issues/603#issuecomment-567056678

0
Reed Sandberg