diff --git a/examples/showcase/components/MyNuxtLink.stories.ts b/examples/showcase/components/MyNuxtLink.stories.ts new file mode 100644 index 00000000..7b4837ec --- /dev/null +++ b/examples/showcase/components/MyNuxtLink.stories.ts @@ -0,0 +1,52 @@ +import type { Meta, StoryObj } from '@storybook/vue3' + +import MyNuxtLink from './MyNuxtLink.vue' + +// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction + +/** + * Shows how to use NuxtLink component + */ +const meta = { + title: 'Features/Nuxt Link', + component: MyNuxtLink, + // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs + tags: ['autodocs'], + argTypes: { + default: { + control: 'text', + description: 'Link text', + }, + }, + args: { + default: 'Nuxt Link', + }, +} satisfies Meta<typeof MyNuxtLink> + +export default meta +type Story = StoryObj<typeof meta> +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/vue/api/csf + * to learn how to use render functions. + */ + +export const NuxtLinkInCustomComponent: Story = { + args: {}, + render(args) { + return { + components: { MyNuxtLink }, + setup: () => ({ args }), + template: '<my-nuxt-link>{{ args.default }}</my-nuxt-link>', + } + }, +} +export const NuxtLinkInTemplate: Story = { + args: {}, + render(args) { + return { + setup: () => ({ args }), + template: '<NuxtLink>{{ args.default }}</NuxtLink>', + } + }, +} diff --git a/packages/storybook-addon/playground/components/MyNuxtLink.vue b/examples/showcase/components/MyNuxtLink.vue similarity index 100% rename from packages/storybook-addon/playground/components/MyNuxtLink.vue rename to examples/showcase/components/MyNuxtLink.vue