Nuxt 3 integration - Auto import of components and functions not working

[ghost]

It is currently not possible to use histoire with Nuxt 3 when relying on auto imports. I also tried to manually add unplugin-auto-import and unplugin-vue-components but without success.

Auto imports are working when using Vue 3 instead.

Is it planned to support Nuxt 3 auto imports or is it even possible to already use it with the correct imports / config maybe?

Following errors occur:

[Vue warn]: Failed to resolve component: BaseIcon
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <BaseButton disabled=false > 
  at <SandboxVue3>

BaseButton.vue:9 Uncaught (in promise) ReferenceError: computed is not defined
    at setup (BaseButton.vue:9:23)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7109:29)
    at setupComponent (runtime-core.esm-bundler.js:7064:11)
    at mountComponent (runtime-core.esm-bundler.js:4951:13)
    at processComponent (runtime-core.esm-bundler.js:4926:17)
    at patch (runtime-core.esm-bundler.js:4518:21)
    at patchKeyedChildren (runtime-core.esm-bundler.js:5432:21)
    at patchChildren (runtime-core.esm-bundler.js:5234:21)
    at processFragment (runtime-core.esm-bundler.js:4915:17)

[hugoattal]

Can you try something like this in your vite.config.ts file?

/// <reference types="histoire" />
import { defineConfig, UserConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";

export default defineConfig(({ command }) => {
    return {
        histoire: {
            vite: {
                plugins: [
                    AutoImport({/* options */})
                ]
            }
        },
    };
});

[ghost]

Thanks for your suggestion, your approach didn't work for me. It kinda works with following setup:

Install unplugin-auto-import and unplugin-vue-components

Create extra vite.config.ts

/// <reference types="histoire" />
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
    server: {
        port: 8081,
        host: '0.0.0.0',
    },
    plugins: [
        AutoImport({
            imports: ['vue', 'vue-router'],
        }),
        Components({
            dirs: './components/',
        }),
    ],
    histoire: {
        setupFile: '/histoire-setup.ts',
    },
})

If you want to use tailwind you need to create postcss.config.js file and inside the setupFile import the stylesheet

There are currently still 2 issues, I am not sure if / how to resolve Nuxt specific components like <NuxtLink> and I get this warning:

runtime-core.esm-bundler.js:38 [Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance. 
  at <Anonymous index=0 > 
  at <ChildrenRender> 
  at <BaseOverflowMenu class="htw-h-10 htw-flex-none htw-border-b htw-border-gray-100 dark:htw-border-gray-750" > 
  at <PaneTabs> 
  at <BaseSplitPane key=2 save-id="story-sidepane" orientation="portrait"  ... > 
  at <StorySidePanel> 
  at <BaseSplitPane key=2 save-id="story-main" min=30  ... > 
  at <StoryView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > > 
  at <RouterView> 
  at <BaseSplitPane key=1 save-id="main-horiz" min=5  ... > 
  at <HistoireApp>

It is not optimal but it works for now. Are there any plans to support Nuxt 3 out of the box? Since all I have done is to copy / duplicate the config which Nuxt provides automatically.

[ghost]

I do not know if it is relevant but for the sake of completeness: after updating from v0.3.2 to v0.4.5, I got an error

Error while collecting story /.../dev/budgeteer/stories/BaseButton.story.vue:
Error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

So I also had to install @vitejs/plugin-vue now and add it to the vite.config.ts

But the warning mentioned above Non-function value encountered for default slot is no longer occurring and it seems like the HMR improved.

[Akryum]

So I also had to install @vitejs/plugin-vue now and add it to the vite.config.ts

Histoire no longer include @vitejs/plugin-vue as the UI is now pre-bundled. This will improve with a Nuxt integration that retrieve the vite config that Nuxt uses internally.

[alvarosabu]

This will improve with a Nuxt integration that retrieve the vite config that Nuxt uses internally.

I think several tools would benefit from a feature that exposes Nuxt vite config, like Cypress. Maybe make sense to open a Feature request on Nuxt

[alvarosabu]

https://github.com/nuxt/framework/discussions/5104