'Vuetify3 components in Storybook decorators with vue3 and vite
I' have an app with storybook, vue3, vite and vuetify3 and typescript in which I'm unable to use any of the vuetify components inside of decorators. I'm getting [Vue warn]: Failed to resolve component: v-app
The components in my stories, which internally use vuetify3 components load and render without any issues.
Does anyone have any idea as to why this is happening, or an URL to a repo with a working cofinguration?
This is my setup
//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"
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
