By adding the vue plugin to nuxt here:

https://github.com/hirotaka/storybook-addon-nuxt/blob/main/src/preset.ts#L109

you end up compiling the vue files twice because nuxt adds these plugins after the hook is called.

https://github.com/nuxt/nuxt/blob/d2aee40b9d19bc59ce0dfb8ff43c8645711fcefd/packages/vite/src/client.ts#L133

This means that the second compilation attempt fails with

ERROR  At least one <template> or <script> is required in a single file component.

You can simply wait for nuxt to finish building instead.

main...unshame:storybook-addon-nuxt:fix/wait-for-nuxt

Is it possible to add support for nuxt modules?
For example: https://nuxt.com/modules/icon

Error:

Description:

Error appears only when using storybook-addon-nuxt with setup from '@storybook/vue3' inside preview.ts. Error doesn't appear, when using storybook-addon-nuxt and setup separately.

preview.ts:

main.ts:

Temporary solution

(for pnpm users: do not install patch-package, just use pnpm patch)

When using this addon with i18n config together it breaks and show the next issue _a.decline is not a function TypeError: _a.decline is not a function at http://localhost:6006/node_modules/.cache/.vite-storybook/deps/@storybook_vue3.js?v=b30944e5:33:91

example of how i18n config is configured below:

import '../assets/styles/main.scss';
import { type Preview,  setup } from '@storybook/vue3';
import en from '@/locales/en.json';
import es from '@/locales/es.json';
import de from '@/locales/de.json';
import fr from '@/locales/fr.json';
import pl from '@/locales/pl.json';
import pt from '@/locales/pt.json';
import sv from '@/locales/sv.json';
import tr from '@/locales/tr.json';
import { createI18n } from 'vue-i18n';

const preview: Preview = {
  parameters: {
    layout: 'centered',
  },
};

const i18n = createI18n({
  langDir: "locales",
  messages: {
    en,
    es,
    de,
    fr,
    pl,
    pt,
    sv,
    tr
  },
  defaultLocale: "en",
  legacy: false,
  locale: "en",
});

setup((app) => {
  app.use(i18n);
});

export default preview;

P.S Without this addon it works correctly. I would be very thankful for some help, thanks in advance

Currently getting this error when I'm using a component in a story that requires Nuxt context/imports:

Failed to resolve import "#tailwind-config" from "../components/global/ItemList.vue". Does the file exist?
8:48:42 PM [vite] Internal server error: Failed to resolve import "#tailwind-config" from "../components/global/ItemList.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/home/projects/project/components/global/ItemList.vue:46:0
  5  |  import { useLanguageApiPrefix } from '/Users/home/projects/project/compsables/mixins.ts';
  6  |  import { theme } from '#tailwind-config'

This is not specific only to #tailwind-config, here is an example with using Nuxt $config:

runtime.js:4 TypeError: Cannot read properties of undefined (reading '$config')
    at useRuntimeConfig (nuxt.js:227:22)'

Component:

<script>
  import { theme } from '#tailwind-config'
  ...
</script>

This is happening with the default configuration from the example(apart from components), please check, thank you!

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

I notice that there are no commits since June 9th, and there are four PRs dealing with very real problems. Is there a problem with lack of time for the maintainer? @hirotaka

This addon does not solve this problem? I reproduced it

storybookjs/storybook#21196

I got the Error:

import { fileURLToPath } from 'node:url';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at internalCompileFunction (node:internal/vm:73:18) 

Solution:

add "type": "module", to the package.json file inside the storybook-addon-nuxt folder.

Hi @hirotaka
Thank you for creating this addon for nuxt users.

I came across some issue when trying to render the page in storybook with some 3rd-part Nuxt module like .
Also, it failed to load useAppConfig(), to get the links I configured in the app.config.ts file in the Nuxt 3 project.
Sorry, I am very new to Storybook, might miss some configuration, if that is the case, please let me know.

Here are some modules and their versions I am using in my project, which are related to the issue:

"nuxt": "^3.5.2",
"@nuxt/image": "^1.0.0-rc.1",
"storybook": "^7.0.25",
"storybook-addon-nuxt": "^1.3.3",
"@storybook/addon-actions": "^7.0.25",
"@storybook/addon-essentials": "^7.0.25",
"@storybook/addon-interactions": "^7.0.25",
"@storybook/addon-links": "^7.0.25",
"@storybook/addon-styling": "^1.3.2",
"@storybook/blocks": "^7.0.25",
"@storybook/testing-library": "^0.0.14-next.2",
"@storybook/vue3": "^7.0.25",
"@storybook/vue3-vite": "^7.0.25",

Here is the error I got:

So my question are:

• Is there a way to use 3rd-party lib like
• How do I need to configure to enable useAppConfig() loaded in storybook?

Thank you.
Feng

I have this error when i starting storybook

Failed to load preset: {"type":"presets","name":"/Users/a1/work-projects/nuxt-3-template/node_modules/storybook-addon-nuxt/dist/preset.js"} on level 1
ERR! SyntaxError: Cannot use import statement outside a module
ERR! at Object.compileFunction (node:vm:352:18)
ERR! at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR! at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR! at Object.newLoader (/Users/a1/work-projects/nuxt-3-template/node_modules/esbuild-register/dist/node.js:2262:9)
ERR! at Object.extensions..js (/Users/a1/work-projects/nuxt-3-template/node_modules/esbuild-register/dist/node.js:4807:24)
ERR! at Module.load (node:internal/modules/cjs/loader:981:32)
ERR! at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR! at require (node:internal/modules/cjs/helpers:102:18)
ERR! SyntaxError: Cannot use import statement outside a module
ERR! at Object.compileFunction (node:vm:352:18)
ERR! at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR! at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR! at Object.newLoader (/Users/a1/work-projects/nuxt-3-template/node_modules/esbuild-register/dist/node.js:2262:9)
ERR! at Object.extensions..js (/Users/a1/work-projects/nuxt-3-template/node_modules/esbuild-register/dist/node.js:4807:24)
ERR! at Module.load (node:internal/modules/cjs/loader:981:32)
ERR! at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR! at require (node:internal/modules/cjs/helpers:102:18)
WARN Failed to load preset: {"type":"presets","name":"/Users/a1/work-projects/nuxt-3-template/node_modules/storybook-addon-nuxt/dist/preset.js"} on level 1
ERR! SyntaxError: Cannot use import statement outside a module
ERR! at Object.compileFunction (node:vm:352:18)
ERR! at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR! at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR! at Object.newLoader (/Users/a1/work-projects/nuxt-3-template/node_modules/esbuild-register/dist/node.js:2262:9)
ERR! at Object.extensions..js (/Users/a1/work-projects/nuxt-3-template/node_modules/esbuild-register/dist/node.js:4807:24)
ERR! at Module.load (node:internal/modules/cjs/loader:981:32)
ERR! at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR! at require (node:internal/modules/cjs/helpers:102:18)
ERR! SyntaxError: Cannot use import statement outside a module
ERR! at Object.compileFunction (node:vm:352:18)
ERR! at wrapSafe (node:internal/modules/cjs/loader:1031:15)
ERR! at Module._compile (node:internal/modules/cjs/loader:1065:27)
ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
ERR! at Object.newLoader (/Users/a1/work-projects/nuxt-3-template/node_modules/esbuild-register/dist/node.js:2262:9)
ERR! at Object.extensions..js (/Users/a1/work-projects/nuxt-3-template/node_modules/esbuild-register/dist/node.js:4807:24)
ERR! at Module.load (node:internal/modules/cjs/loader:981:32)
ERR! at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR! at require (node:internal/modules/cjs/helpers:102:18)

And i think nuxt plugin dosent work... On docs for my component i see error on console:

ferenceError: useAttrs is not defined

ReferenceError: useAttrs is not defined
at setup (v-button.vue:53:15)
at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
at setupStatefulComponent (runtime-core.esm-bundler.js:7236:25)
at setupComponent (runtime-core.esm-bundler.js:7197:36)
at mountComponent (runtime-core.esm-bundler.js:5599:7)
at processComponent (runtime-core.esm-bundler.js:5565:9)
at patch (runtime-core.esm-bundler.js:5040:11)
at mountChildren (runtime-core.esm-bundler.js:5284:7)
at mountElement (runtime-core.esm-bundler.js:5191:7)
at processElement (runtime-core.esm-bundler.js:5156:7)
e

If need more infomation i can give it for nessesary.

nuxt.config.ts

export default defineNuxtConfig({
  css: ["vuetify/styles", "@mdi/font/css/materialdesignicons.css"],
  build: {
    transpile: ["vuetify"],
  },
  modules: [
    async (_options, nuxt) => {
      nuxt.hooks.hook("vite:extendConfig", (config) => {
        config.plugins?.push(vuetify());
      });
    },
  ],
});

if i takeout this code its working, but i want this code

modules: [
    async (_options, nuxt) => {
      nuxt.hooks.hook("vite:extendConfig", (config) => {
        config.plugins?.push(vuetify());
      });
    },
  ],

Hi and thanks for your work so far on this plug-in.

Problem

I keep my core nuxt directories in a src folder in the root of my projects, using the srcDir option in NuxtConfig.

To get storybook-addon-nuxt to work with my setup, I need to include a components folder in the root, with a dummy component. I can get by with this work-around, but it would be great if auto-imports worked with this configuration.

Docs

https://nuxt.com/docs/api/configuration/nuxt-config#srcdir

Screenshot

Workaround

<!-- ./components/StorybookAddonNuxtFix.vue -->
<template>
  <h1>:)</h1>
  <!--
    This component is a workaround for a bug in the Nuxt Storybook addon.
    @link: https://github.com/hirotaka/storybook-addon-nuxt/issues/15
  -->
</template>

Hi there,

Great job with this addon! Wondering if this has been tested with Tailwind? I've followed whatever documentation I could find on Storybook 7 + Tailwind 3, but I can't get my Tailwind css to actually load in my stories. Any ideas?