export template for cli

README.md

@@ -53,7 +53,7 @@ or  try it on [Stackblitz](https://stackblitz.com/~/github.com/storybook-vue/sto
 Follow the prompts after running this command in your Nuxt project's root directory:
 
 ```bash
-npx storybook@latest init
+npx storybook-nuxt init
 ```
 
 [More on getting started with Storybook](https://storybook.js.org/docs/vue3/get-started/install)

build.config.ts

@@ -11,6 +11,9 @@ export default defineBuildConfig({
     { input: 'src/preview', ext: 'ts' ,format: 'esm' },
 
   ],
+  files :[
+    'template/**/*',
+  ],
 
   hooks: {
     'mkdist:entry:options' (_ctx, _entry, mkdistOptions) {

package.json

@@ -1,10 +1,12 @@
 {
   "name": "@storybook-vue/nuxt",
-  "version": "0.0.1-rc.3",
+  "version": "0.0.1-rc.5",
   "description": "Storybook for Nuxt and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "keywords": [
     "storybook",
-    "nuxt"
+    "nuxt",
+    "vite",
+    "vue3"
   ],
   "homepage": "https://github.com/storybook-vue/nuxt",
   "bugs": {

template/cli/js/MyNuxtWelcome.stories.js

@@ -0,0 +1,24 @@
+import MyNuxtWelcome from './MyWelcome.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+const meta = {
+  title: 'Example/NuxtWelcome Story',
+  component: MyNuxtWelcome,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
+  tags: ['autodocs'],
+
+} 
+
+export default 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 NuxtWelcomeStory  = {
+  args: { },
+}
+
+

template/cli/js/MyWelcome.vue

@@ -0,0 +1,4 @@
+<template>
+    <h1> Welcome Nuxt to Storybook : </h1>
+    <NuxtWelcome/>
+</template>

template/cli/ts-3-8/MyNuxtWelcome.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+
+
+import MyNuxtWelcome from './MyWelcome.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+
+const meta = {
+  title: 'Example/NuxtWelcome Story',
+  component: MyNuxtWelcome,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
+  tags: ['autodocs'],
+
+} satisfies Meta<typeof MyNuxtWelcome>;
+
+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 NuxtWelcomeStory : Story = {
+  args: {  },
+}
+
+

template/cli/ts-3-8/MyWelcome.vue

@@ -0,0 +1,4 @@
+<template>
+    <h1> Welcome Nuxt to Storybook : </h1>
+    <NuxtWelcome/>
+</template>

template/cli/ts-4-9/MyNuxtWelcome.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+
+
+import MyNuxtWelcome from './MyWelcome.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+
+const meta = {
+  title: 'Example/NuxtWelcome Story',
+  component: MyNuxtWelcome,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
+  tags: ['autodocs'],
+
+} satisfies Meta<typeof MyNuxtWelcome>;
+
+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 NuxtWelcomeStory : Story = {
+  args: {  },
+}
+
+

template/cli/ts-4-9/MyWelcome.vue

@@ -0,0 +1,4 @@
+<template>
+    <h1> Welcome Nuxt to Storybook : </h1>
+    <NuxtWelcome/>
+</template>