diff --git a/.vscode/settings.json b/.vscode/settings.json index 345516fe..6835316f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "cSpell.words": ["composables", "dedupe", "nuxt", "ofetch", "Pinia"] + "cSpell.words": ["composables", "dedupe", "nuxt", "nuxtjs", "ofetch", "Pinia"] } diff --git a/docs/content/1.getting-started/3.typescript.md b/docs/content/1.getting-started/3.typescript.md new file mode 100644 index 00000000..e43f311d --- /dev/null +++ b/docs/content/1.getting-started/3.typescript.md @@ -0,0 +1,46 @@ +--- +title: 'TypeScript' +description: '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. + +::code-group + +```typescript [.storybook/main.ts] +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 +``` + +```typescript [components/Button.stories.ts] +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: '