unplugin-vue-components
unplugin-vue-components copied to clipboard
nuxt 3 component witdh storybook no components found
[unplugin-vue-components] no components found
const path = require('path')
const Components = require('unplugin-vue-components/vite')
const AutoImport = require('unplugin-auto-import/vite')
const { loadConfigFromFile, mergeConfig } = require('vite')
module.exports = {
stories: [
'../stories/**/*.stories.mdx',
'../stories/**/*.stories.ts',
'../components/**/*.stories.ts',
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'storybook-dark-mode',
{
name: '@storybook/addon-postcss',
options: {
cssLoaderOptions: {
importLoaders: 1,
},
postcssLoaderOptions: {
implementation: require('postcss'),
}
}
}
],
core: {
builder: 'storybook-builder-vite'
},
async viteFinal(config, { configType }) {
config.plugins = config.plugins ?? []
config.plugins.push(AutoImport({
imports: [
'vue',
'vue-router',
],
dts: '.nuxt/auto-imports.d.ts',
}))
config.plugins.push(Components({
extensions: ['vue'],
include: [/\.vue$/, /\.vue\?vue/],
dts: '.nuxt/components.d.ts',
}))
return {
...config,
resolve: {
alias: {
'@': `${path.resolve(__dirname, '..')}/`,
'@/': `${path.resolve(__dirname, '..')}/`,
'vue': 'vue/dist/vue.esm-bundler.js',
},
}
}
}
}
You'd better specify the dirs
explicitly with absolute paths. Probably something relates to storybook's root integration
dirs is problem fixed. Thank you. If nuxt reads the output components.d.ts file, it always creates itself. How do I do this?
![CleanShot 2021-11-14 at 21 18 01@2x](https://user-images.githubusercontent.com/38668796/141693368-8780d02b-8da9-4f16-9e73-e0ca9cc2fde1.png)
const path = require('path')
const Components = require('unplugin-vue-components/vite')
const AutoImport = require('unplugin-auto-import/vite')
const { loadConfigFromFile, mergeConfig } = require('vite')
module.exports = {
stories: [
'../stories/**/*.stories.mdx',
'../stories/**/*.stories.ts',
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'storybook-dark-mode',
'@storybook/addon-a11y',
{
name: '@storybook/addon-postcss',
options: {
cssLoaderOptions: {
importLoaders: 1,
},
postcssLoaderOptions: {
implementation: require('postcss'),
}
}
}
],
framework: "@storybook/vue3",
core: {
builder: 'storybook-builder-vite'
},
async viteFinal(config, { configType }) {
config.plugins = config.plugins ?? []
config.plugins.push(AutoImport({
imports: [
'vue',
'vue-router',
],
dts: '.storybook/auto-imports.d.ts',
}))
config.plugins.push(Components({
dirs: ['components'],
directoryAsNamespace: true,
dts: '.storybook/components.d.ts',
}))
return {
...config,
resolve: {
alias: {
...config.resolve.alias,
'@': `${path.resolve(__dirname, '..')}/`,
'vue': 'vue/dist/vue.esm-bundler.js',
},
}
}
}
}
@productdevbook did you find a workaround for this?
@productdevbook did you find a workaround for this?
No