web-dev-qa-db-ja.com

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

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

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

enter image description here

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

node.jsvue.jsvuejs2vuetify.jsnuxt.js
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
Mamadou Hady Barry

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

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