Resolving nuxt specific aliases in storybook

[deanc]

I'm using import { useState } from '#app' in one component, so I added something like this, in vite.config.ts as storybook was complaining it couldn't resolve #app:

'#app': path.resolve(__dirname, './node_modules/nuxt/dist/app/index.mjs'),

Which then complained about not being able to resolve #head on THAT file, so I fixed that, and it complained about #build so it seems you'll end up down a rabbit hole here.

[ambroisemaupate]

Add following aliases to your vite.config.js|ts

resolve: {
    alias: {
        '~': path.resolve(__dirname),
        '#app': path.resolve(__dirname, 'node_modules/nuxt/dist/app'),
        '#head': path.resolve(__dirname, 'node_modules/nuxt/dist/head/runtime'),
        '#imports': path.resolve(__dirname, '.nuxt/imports'),
        '#components': path.resolve(__dirname, '.nuxt/components'),
        '#build': path.resolve(__dirname, '.nuxt'),
        '@': path.resolve(__dirname),
        '~~': path.resolve(__dirname),
        '@@': path.resolve(__dirname),
        assets: path.resolve(__dirname, '/assets'),
        public: path.resolve(__dirname, '/public')
    }
}