带有 vue3 和 vite 的 Storybook 装饰器中的 Vuetify3 组件答案

【问题标题】：Vuetify3 components in Storybook decorators with vue3 and vite带有 vue3 和 vite 的 Storybook 装饰器中的 Vuetify3 组件
【发布时间】：2022-11-08 10:38:29
【问题描述】：

我有一个带有故事书、vue3、vite 和 vuetify3 以及 typescript 的应用程序，我无法在装饰器中使用任何 vuetify 组件。我收到[Vue warn]: Failed to resolve component: v-app

我的故事中的组件在内部使用 vuetify3 组件加载和渲染没有任何问题。

有没有人知道为什么会发生这种情况，或者有一个具有有效协同作用的仓库的 URL？

这是我的设置

//main.js
const path = require('path')
const vuetify = require('@vuetify/vite-plugin')

module.exports = {
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  core: { builder: "@storybook/builder-vite" },
  viteFinal: (config) => {
    config.resolve.alias['~storybook'] = path.resolve(__dirname)
    config.resolve.alias['@'] = path.resolve(__dirname, '..', 'src')
    config.plugins = [
        ...config.plugins,
      vuetify({
        autoImport: true,
      })
    ]
    return config
  },
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
  ]
}

//preview.js
import { app } from '@storybook/vue3'
import vuetify from '../src/plugins/vuetify'

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

export const decorators = [story => ({
  components: { story },
  template: '<v-app><story /></v-app>',
})]

app.use(vuetify)

//package.json
{
  ...
  "dependencies": {
    "@auth0/auth0-vue": "^1.0.1",
    "vue": "^3.2.25",
    "vue-router": "^4.0.15",
    "vuetify": "^3.0.0-beta.0"
  },
  "devDependencies": {
    "@babel/core": "^7.17.10",
    "@storybook/addon-actions": "^6.4.22",
    "@storybook/addon-essentials": "^6.4.22",
    "@storybook/addon-links": "^6.4.22",
    "@storybook/builder-vite": "^0.1.33",
    "@storybook/vue3": "^6.4.22",
    "@vitejs/plugin-vue": "^2.3.1",
    "@vuetify/vite-plugin": "^1.0.0-alpha.0",
    "babel-loader": "^8.2.5",
    "sass": "^1.38.0",
    "sass-loader": "^10.0.0",
    "typescript": "^4.5.4",
    "vite": "^2.9.7",
    "vue-cli-plugin-vuetify": "~2.4.8",
    "vue-loader": "^16.8.3",
    "vue-tsc": "^0.34.7",
    "vuetify-loader": "^2.0.0-alpha.0"
  }
}

【问题讨论】：

Storybook 的一个问题是主引擎通过一个构建器（webpack）加载，而您的库通过另一个构建器（此处为 Vite）加载到 iframe。我怀疑这个问题是由 webpack 编译的全局装饰器引起的，它没有附加 vuetify-loader。如果您将装饰器移动到您的component.stories.js 文件中，它会起作用吗？

标签： vue.js vuetify.js vite

【解决方案1】：

同样的问题。我也尝试使用 Storybook 7.0 alpha。你有没有让这个工作？我什至尝试在 preview.js 中导入 VApp。

【讨论】：