vue 組件庫在 nuxt.js 中不與 vuetify 一起工作

Question

我創建了一個單按鈕 vue 庫並通過 vue-cli-service build --target lib 構建它。 這個選項在 nuxtjs 中工作正常，但是當我在我的 package 中包含 vuetify 並嘗試在 nuxtjs 中使用它時，應用程序拋出錯誤在 nuxtjs 中我通過@nuxtjs/vuetify 包含 vuetify 請幫忙，因為我不明白什么是問題。

我在圖書館的 package.json

{
  "name": "uikit",
  "version": "0.1.0",
  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name uikit src/index.js",
    "lint": "vue-cli-service lint"
  },
  "module": "./dist/uikit.common.js",
  "main": "./dist/uikit.umd.js",
  "files": [
    "./dist"
  ],
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vuetify": "^2.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-vuetify": "~2.5.8",
    "vue-template-compiler": "^2.6.14",
    "vuetify-loader": "^1.7.0"
  },
  "peerDependencies": {
    "vue": "^2.7.10",
    "vuetify": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

使用庫中的 <button> 它可以正常工作，甚至 @click 也可以在此處輸入圖像描述

當我在我的庫中使用 v-btn 時我看到了什么enter image description here

如您所見，在我的應用程序中使用 v-btn 時，除了控制台中的錯誤外，vuetify 無法完全工作，除了 styles

在 nuxt.config.js 中設置構建transpile: \['@nuxtjs/vuetify'\] or transpile: \['vuetify'\]還有plugins: \[new VuetifyLoaderPlugin()\]沒有幫助

Answer 1

您是否按照Vuetify 文檔和nuxtjs/vuetify 插件頁面中所說的方式更新了nuxt.config.js ？

// nuxt.config.js
{
  buildModules: [
    // Simple usage
    '@nuxtjs/vuetify',

    // With options
    ['@nuxtjs/vuetify', { /* module options */ }]
  ]
}