webdevqa.jp.net

プラグインとしてnuxt jsでvuetifyを使用するにはどうすればよいですか?

Nuxt jsプロジェクトでプラグインとしてvuetifyを使用する必要があります。私はパッケージを試しました @ nuxtjs/vuetify ですがエラーが発生します

オブジェクト '#'の読み取り専用プロパティ 'base'に割り当てることはできません

enter image description here

ローカルサーバーと共有ホスティングに公式の codesandbox オンラインプレイグラウンドからnuxtプロジェクトをインストールしました。いつも同じエラーが出ました。 npmyarnを使用してノードモジュールをインストールしてみました。 npmパッケージ vuetify を使用して、nuxt jsの最新バージョンにプラグインとして新しいvuetifyバージョンを追加するにはどうすればよいですか?

3
Andreas Hunter

Vuetifyと@ mdi/fontをインストールします

次のコードを使用して、プラグインフォルダーにファイルvuetify.jsを作成します。

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
}

このようなプラグインにvuetifyを追加してnuxt.config.jsファイルを編集します

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

この問題の議論はここにあります: https://github.com/nuxt-community/vuetify-module/issues/268

カスタム色を修正し、外部ファイルでオプションを指定すると、これに影響するようです。オプションで色を指定している場合は、primary: colors.blueprimary: colors.blue.base

0
Ben

私はこれを次のようにして達成しました:

npm install --save vuetify

次のコードを使用して、プラグインフォルダーにファイルvuetify.jsを作成します。

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

Vue.use(Vuetify)

あなたの修正nuxt.config.js

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

同じ問題があります。私は単にpackage.jsonで明示的に定義されたバージョン1.10.3以下を使用することを確認しました

"@ nuxtjs/vuetify": "1.10.3"、(^ 1.10.3ではありません)

また、このバージョンでは、すべてのURLリクエストの最後に「未定義」の404が追加されることにも気付きました。私はNuxt/CMTYに投稿しましたが、彼らは質問に答えるゼロのユーザーベースを持っています。

0
Dave M