Open exophunk opened 2 months ago
Reckonyd
commented
1 month ago I solved it using the solution provided in the comment below.
https://github.com/nuxt/icon/issues/77#issuecomment-2292018569
Another possible solution may be by using Storybook decorators but I haven't tried it yet.
luca-smartpricing
commented
1 month ago I solved it using the solution provided in the comment below.
Another possible solution may be by using Storybook decorators but I haven't tried it yet.
Seriously did you manage to fix the problem with that work arround? If I add this code as https://github.com/nuxt/icon/issues/77#issuecomment-2292018569 suggest:
render(args) {
return {
setup() {
return () =>
h(
Suspense,
h(Button, {
...args,
}),
)
},
}
},Absolutely nothing is rendered and the following message is displayed:
Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
Reckonyd
commented
1 month ago Seriously did you manage to fix the problem with that work arround? If I add this code as nuxt/icon#77 (comment) suggest:
render(args) { return { setup() { return () => h( Suspense, h(Button, { ...args, }), ) }, } },
Absolutely nothing is rendered and the following message is displayed:
Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
Firstly, I want to apologize not being so clear about the "solution" I offered.
The referenced issue and others (@nuxt/image, @nuxt/fonts etc) stem from the fact that both Storybook and Nuxt server run on different ports ( and in my case on different protocols - Storybook on HTTP and Nuxt on HTTPS ). This unavoidable discrepancy causes some of Nuxt build files to not get served on Storybook page.
The solution is to change the Vite proxy configuration (on viteFinal config property) to match the ports (and protocols!) of our desired configuration (in my case Nuxt port 5173 and HTTPS protocol). Or use the referenced solution on every Story.
IMHO this Storybook module should expose configuration options or automatically configure the Storybook Vite proxy from the current Nuxt Dev server configuration.
As for the Vue error, a simple alias on Vite configuration has solve that problem for me.
Below is my Storybook configuration to solve those issues:
import type { StorybookConfig } from '@nuxtjs/storybook';
const config: StorybookConfig = {
stories: [
'../@(components|layouts|pages|stories)/**/*.mdx',
'../@(components|layouts|pages|stories)/**/*.story.@(js|jsx|mjs|ts|tsx)',
],
addons: [
'@storybook/addon-a11y',
'@storybook/addon-essentials',
'@storybook/addon-links',
'@storybook/addon-themes',
],
framework: {
name: '@storybook-vue/nuxt',
options: { docgen: 'vue-component-meta' },
},
async viteFinal(config) {
const { mergeConfig } = await import('vite');
return mergeConfig(config, {
optimizeDeps: {
include: ['jsdoc-type-pratt-parser'],
},
resolve: {
alias: {
// Resolve Vue bundler to support runtime compilation
vue: 'vue/dist/vue.esm-bundler.js',
},
},
server: {
proxy: {
// Change Vite proxy configuration to enable Storybook server to serve fonts from Nuxt Dev server
'^/(_nuxt|_ipx|_icon|__nuxt_devtools__|_fonts)': {
target: 'https://localhost:5173',
changeOrigin: true,
secure: false,
ws: true,
},
},
},
});
},
};
export default config;
Environment
Build Modules: -
Reproduction
https://github.com/exophunk/nuxt-storybook-showcase
Describe the bug
Using the official Nuxt Icon module does not work with storybook. Icons do not show in storybook stories. As far as I tested, both remote Icons from iconify, but also local icons do not work.
is there anyway to configure nuxt + storybook + icons to work? Storybook for visual components is pretty pointless if they don't show correctly.
Reproduction Repo: https://github.com/exophunk/nuxt-storybook-showcase Stackblitz: https://stackblitz.com/~/github.com/exophunk/nuxt-storybook-showcase although on stackblitz, i'm never able to get this things run properly See the NuxtIcon story.
Problem: No output at all (empty template)
Additional context
The reproduction uses a baseURL to showcase another issue but Icons should not be touched by that. Open the app at localhost:3000/my-base or remove baseurl for this example. but should not matter.