Getting Started
TypeScript
Guide on how to use TypeScript with the Nuxt module
To use the Nuxt module with TypeScript, ensure that imports typically from @storybook/* are now replaced by imports from @nuxtjs/storybook (or @storybook-vue/nuxt if the Nuxt module is not used). This is needed since the Storybook packages are dependencies of the Nuxt module, and are not directly installed in the project.
The following example demonstrates how to use types when configuring Storybook and for writing stories.
import { StorybookConfig } from '@nuxtjs/storybook' // not from '@storybook/core-common'
export default {
stories: ['../components/**/*.stories.ts'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
framework: '@storybook/vue3',
} as StorybookConfig
import { Meta, Story } from '@nuxtjs/storybook' // not from '@storybook/vue'
import Button from './Button.vue'
export default {
title: 'Example/Button',
component: Button,
} as Meta
const Template: Story = (args) => ({
components: { Button },
setup() {
return { args }
},
template: '<Button v-bind="args" />',
})
export const Primary = Template.bind({})
Primary.args = {
primary: true,
label: 'Button',
}