nuxt js의 vuetify를 플러그인으로 사용하는 방법?

nuxt js의 vuetify를 플러그인으로 사용하는 방법?

내 nuxt js 프로젝트에서 plugin으로 vuetify를 사용해야 한다.@nuxtjs/vuetify 패키지를 시도했지만 오류가 발생함

개체 '#'의 'base' 속성에만 할당할 수 없음

공식 코드와 박스 온라인 플레이그라운드의 nuxt 프로젝트를 로컬 서버와 공유 호스팅에 설치했다.항상 같은 실수를 했다.다음을 사용하여 노드 모듈을 설치하려고 시도했다.npm그리고yarn. npm 패키지 vuetify가 포함된 플러그인으로 nnxt js의 마지막 버전에 새로운 vuetify 버전을 추가하는 방법

설치 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'],
  ...
}

나는 다음과 같은 방법으로 이것을 성취했다.

npm install --save vuetify

다음 코드를 사용하여 플러그인 폴더에 파일 vuetify.js를 생성하십시오.

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

Vue.use(Vuetify)

nnxt.config.js 수정:

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

나도 같은 문제를 가지고 있다.나는 단지 패키지에 명시적으로 정의된 1.10.3 이하 버전을 사용하도록 확실히 했다.json

"@nuxtjs/svetify": "1.10.3", (^1.10.3이 아닌)

나는 또한 이것에 대한 어떤 버전도 모든 URL 요청의 끝에 "정의되지 않은" 404를 추가한다는 것을 알게 되었다.나는 Nuxt / CMTY에 글을 올렸지만 그들은 어떤 질문에도 대답하는 0명의 사용자 기반을 가지고 있다.

여기서 이 문제에 대한 논의가 있다: https://github.com/nuxt-community/vuetify-module/issues/268

사용자 지정 색상을 고치고 외부 파일에 옵션을 지정하는 것이 영향을 미치는 것으로 보인다.옵션에 색상이 지정된 경우 교체primary: colors.blue와 함께primary: colors.blue.base.

Nuxt 프로젝트를 초기화할 때 UI 프레임워크로 Vuetify 선택

다음 위치에 새 파일 만들기plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify)

export default new Vuetify({
    theme: {
        light: true,
        themes: {
            light: {
                primary: colors.blue.darken2,
                accent: colors.grey.darken3,
                secondary: colors.amber.darken3,
                info: colors.teal.lighten1,
                warning: colors.amber.base,
                error: colors.deepOrange.accent4,
                success: colors.green.accent3
            }
        }
    }
})

내부에 플러그인 구성 추가nuxt.config.js

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

서버 재시작,npm run dev

이미지 예: vuetify.js

알았어!

참조URL: https://stackoverflow.com/questions/59610554/how-to-use-vuetify-in-nuxt-js-as-plugin