Nuxt 3 storybook

Note: This code comes from https://github.com/hirotaka/storybook-addon-nuxt. It was missing a few things we need specifically for NLO (custom plugins/composables), so this was the short way towards being able to start with storybook. If a proper solution comes from the nuxt community or from the source repository, please replace this library with that solution.

Integration for NLO lottery websites. This plugin replaces composables and plugins so that you can use components in storybook.

Installation

Install storybook using:

npx storybook@latest init --type vue3 --builder vite

Install this npm module:

npm install --save-dev @nlo/nuxt-storybook

In your .storybook/main.ts, add the following import:

import { viteFinal } from '@nlo/nuxt-storybook';

And add it to the StorybookConfig like so:

const config: StorybookConfig = {
    ...,
    viteFinal
}

Maintaining

For every plugin or composable that we need in our components that we want to show in Storybook, we need to add a mock in this repository.

Adding a composable mock is easy, add the name of the composable to the stubbedComposables array in index.ts.

You also want to add the actual mock to composables.mjs, like so:

export const useMyComposable = () => ({
	myProperty: 'Hello',
	myFunction: () => {},
});