web-dev-qa-db-ja.com

Vue、Vuetifyが正しく初期化されていません

Vuetify webpackアプリケーションにVueをセットアップしました。

私のプロジェクトはvue init webpack my-projectを実行してVue 2.5.2を実行し、Vuetify 2.0.2を使用してセットアップされています。

App.jsにVuetifyをインストールしました

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)
})

すべてが正常に動作しているようです。コンポーネントの1つでVuetifycomponentsを呼び出すことができます。

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

次に、App.jsをv-appコンポーネントでラップする必要があることを読みましたが、その場合、Error: Vuetify is not properly initializedというエラーが表示されます。

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

Vuetifyが正しくインストールされていない可能性があります。私の問題に少しでもご理解いただければ幸いです。

javascriptvue.jsvuetify.js
8
dumbprogrammer

私はこのようにしています（vue 3.9、vuetify 2.0）。

Main.js（またはApp.js）

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

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",
    },
  },
})

app.vue

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

Vue-cliを使用している場合は、メタタグの後にファイルindex.htmlに次の行を追加します。

<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">

そして、main.jsは次のようになります。

// 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

新しいバージョンでは多くの変更があります。

これを試して

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

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

幸運を

7
Ruhith Udakara

追加してみてください：

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

そして

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

あなたのmain.js。

1
DjSh

パトリスは私の好みの細かく調整された答えの1つを持っています。これは構成によって異なりますが、これが必要なものかもしれません。

webpack | vue 2.5+ | vuetify 2.1+

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,
});

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
  },
})

あなたのEaxmpleComponent.vueおよびその他すべてのvueファイル：すべてをラップvue v-appおよびテンプレートタグ内のコンポーネント：

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

Gridsomeにvuetify（2.x）を追加すると、同じ問題が発生し、main.jsのappOptionsにvuetifyインポートオブジェクトを追加する必要がありました。

appOptions.vuetify = new Vuetify({})

で説明されているように：

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

そして

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

0
Reed Sandberg