├── .npmrc
├── server
    └── tsconfig.json
├── app.vue
├── .stackblitzrc
├── public
    ├── favicon.ico
    └── images
    │   └── sb-nuxt-logo.jpg
├── tsconfig.json
├── components
    ├── Pre.vue
    ├── MyNuxtLink.vue
    ├── MyComposable.vue
    ├── MyWelcome.vue
    ├── MyNuxtImage.vue
    ├── PinButton.vue
    ├── MyButton.vue
    └── PiniaLogo.vue
├── stories
    ├── types.ts
    ├── NuxtImage.stories.ts
    ├── MyNuxtWelcome.stories.ts
    ├── Pinia.stories.ts
    ├── RuntimeComposable.stories.ts
    └── NuxtButton.stories.ts
├── .gitignore
├── composables
    └── useMyComposable.ts
├── .storybook
    ├── preview.ts
    └── main.ts
├── README.md
├── nuxt.config.ts
├── package.json
├── stores
    └── counter.ts
├── assets
    └── button.css
└── pages
    └── index.vue


/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <NuxtWelcome />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 |     "installDependencies": true,
3 |     "startCommand": "storybook dev"
4 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/storybook-vue/storybook-nuxt-demo/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/components/Pre.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <pre>
3 |         <h1> hello </h1>
4 |         Hello World
5 |     </pre>
6 | </template>


--------------------------------------------------------------------------------
/public/images/sb-nuxt-logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/storybook-vue/storybook-nuxt-demo/HEAD/public/images/sb-nuxt-logo.jpg


--------------------------------------------------------------------------------
/components/MyNuxtLink.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 
3 |   <NuxtLink to="https://nuxt.com">
4 |     <slot></slot>
5 |   </NuxtLink>
6 | 
7 | </template>
8 | 


--------------------------------------------------------------------------------
/stories/types.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | // types.ts
 4 | export type Props = { 
 5 |     /**
 6 |      * description for prop "a"  type definiton 
 7 |      * in external file .
 8 |      * @file ./types.ts
 9 |      * @default "Hello World"
10 |      * */
11 | 
12 |     a: string 
13 |     }


--------------------------------------------------------------------------------
/components/MyComposable.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <h1> Using composables : </h1>
 3 |     <h5>runtime config :</h5>
 4 |     <pre>{{ JSON.stringify( config , null,2 ) }}</pre>
 5 | 
 6 | </template>
 7 | <script setup lang="ts">
 8 |  const { config } = useMyComposable()
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/components/MyWelcome.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <NuxtWelcome/>
 3 | 
 4 |     <h1> Using composables : </h1>
 5 |     <pre>
 6 |        - runtime config {{ JSON.stringify( config,null,2 ) }} -
 7 |     </pre>
 8 | 
 9 | </template>
10 | <script setup lang="ts">
11 |  const { config } = useMyComposable()
12 | </script>
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .nuxt
 4 | .nitro
 5 | .cache
 6 | .nuxt-storybook
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/composables/useMyComposable.ts:
--------------------------------------------------------------------------------
1 | export const useMyComposable = () => {
2 |     // Because your composable is called in the right place in the lifecycle,
3 |     // useRuntimeConfig will also work
4 |     const config = useRuntimeConfig()
5 |     console.log('useMyComposable config', config)
6 |   
7 |    return { config }
8 | }
9 |   


--------------------------------------------------------------------------------
/.storybook/preview.ts:
--------------------------------------------------------------------------------
 1 | import type { Preview } from "@storybook/vue3";
 2 | 
 3 | 
 4 | const preview: Preview = {
 5 |   parameters: {
 6 |     actions: { argTypesRegex: "^on[A-Z].*" },
 7 |     controls: {
 8 |       matchers: {
 9 |         color: /(background|color)$/i,
10 |         date: /Date$/,
11 |       },
12 |     },
13 |   },
14 | };
15 | 
16 | 
17 | export default preview;
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Storybook 7 / Nuxt 3 Demo
 2 | 
 3 | ![sb-nuxt (2)](https://github.com/storybook-vue/storybook-nuxt-demo/assets/711292/291456d2-51b2-4bb8-bbe5-f59a9c310ac8)
 4 | 
 5 | 
 6 | Look at [Storybook Nuxt](https://github.com/storybook-vue/nuxt) & the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 7 | 
 8 | 
 9 | 
10 | ## Setup
11 |  
12 | ```bash
13 | 
14 | pnpm install
15 | pnpm storybook dev
16 | 
17 | ```
18 | 
19 | 


--------------------------------------------------------------------------------
/.storybook/main.ts:
--------------------------------------------------------------------------------
 1 | import type { StorybookConfig } from "@storybook-vue/nuxt";
 2 | const config: StorybookConfig = {
 3 |   stories: ["../**/*.mdx", "../**/*.stories.@(js|jsx|mjs|ts|tsx)"],
 4 |   addons: [
 5 |     "@storybook/addon-links",
 6 |     "@storybook/addon-essentials",
 7 |     "@storybook/addon-interactions",
 8 |   ],
 9 |   framework: {
10 |     name: "@storybook-vue/nuxt",
11 |     options: {},
12 |   },
13 |   docs: {
14 |     autodocs: "tag",
15 |   },
16 | };
17 | 
18 | export default config;
19 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | 
 3 | export default defineNuxtConfig({
 4 |   devtools: { enabled: true },
 5 |   modules: [
 6 |     '@nuxt/image',
 7 |     '@pinia/nuxt',
 8 |   ],
 9 |   runtimeConfig: {
10 |     app: {
11 |       name: 'Nuxt',
12 |       version: '1.0.0',
13 |       baseURL:'/'
14 |     },
15 |   },
16 |   pinia: {
17 |     autoImports: ['defineStore', 'acceptHMRUpdate'],
18 |   },
19 |   imports: {
20 |     dirs: ['./stores'],
21 |   },
22 | })
23 | 


--------------------------------------------------------------------------------
/components/MyNuxtImage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <NuxtImg
 4 |       src="/images/sb-nuxt-logo.jpg"
 5 |       :placeholder="[30, 20]"
 6 |       width="300"
 7 |       height="200"
 8 |       class="rounded"
 9 |     />
10 |     <br>
11 |     <h4>
12 |       responsive image with nuxt-image component:
13 |     </h4>
14 |     <NuxtPicture
15 |       src="/images/sb-nuxt-logo.jpg"
16 |       width="1204"
17 |       height="632"
18 |       sizes="xs:200px md:500px lg:1024"
19 |     />
20 |   </div>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/stories/NuxtImage.stories.ts:
--------------------------------------------------------------------------------
 1 | import type { Meta, StoryObj } from '@storybook/vue3';
 2 | 
 3 | 
 4 | 
 5 | import MyComponent from '~/components/MyNuxtImage.vue'
 6 | 
 7 | // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 8 | 
 9 | const meta = {
10 |   title: 'Example/NuxtImage  Story',
11 |   component: MyComponent,
12 |   // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
13 |   tags: ['autodocs'],
14 | 
15 | } satisfies Meta<typeof MyComponent>;
16 | 
17 | export default meta;
18 | type Story = StoryObj<typeof meta>;
19 | /*
20 |  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
21 |  * See https://storybook.js.org/docs/vue/api/csf
22 |  * to learn how to use render functions.
23 |  */
24 | 
25 | export const NuxtImage : Story = {
26 |   args: {  },
27 | }
28 | 
29 | 
30 | 


--------------------------------------------------------------------------------
/stories/MyNuxtWelcome.stories.ts:
--------------------------------------------------------------------------------
 1 | import type { Meta, StoryObj } from '@storybook/vue3';
 2 | 
 3 | 
 4 | 
 5 | import MyNuxtWelcome from '~/components/MyWelcome.vue'
 6 | 
 7 | // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 8 | 
 9 | const meta = {
10 |   title: 'Example/NuxtWelcome Story',
11 |   component: MyNuxtWelcome,
12 |   // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
13 |   tags: ['autodocs'],
14 | 
15 | } satisfies Meta<typeof MyNuxtWelcome>;
16 | 
17 | export default meta;
18 | type Story = StoryObj<typeof meta>;
19 | /*
20 |  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
21 |  * See https://storybook.js.org/docs/vue/api/csf
22 |  * to learn how to use render functions.
23 |  */
24 | 
25 | export const NuxtWelcomeStory : Story = {
26 |   args: {  },
27 | }
28 | 
29 | 
30 | 


--------------------------------------------------------------------------------
/stories/Pinia.stories.ts:
--------------------------------------------------------------------------------
 1 | import type { Meta, StoryObj } from '@storybook/vue3';
 2 | 
 3 | 
 4 | 
 5 | import MyComponent from '~/pages/index.vue'
 6 | 
 7 | // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 8 | 
 9 | const meta = {
10 |   title: 'Example/Pinia  Story',
11 |   component: MyComponent,
12 |   // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
13 |   tags: ['autodocs'],
14 | 
15 | } satisfies Meta<typeof MyComponent>;
16 | 
17 | export default meta;
18 | type Story = StoryObj<typeof meta>;
19 | /*
20 |  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
21 |  * See https://storybook.js.org/docs/vue/api/csf
22 |  * to learn how to use render functions.
23 |  */
24 | 
25 | export const Pinia : Story = {
26 |   args: { msg: `Storybook ❤️‍🔥 Nuxt ❤️‍🔥 Pinia` },
27 | }
28 | 
29 | 
30 | 


--------------------------------------------------------------------------------
/stories/RuntimeComposable.stories.ts:
--------------------------------------------------------------------------------
 1 | import type { Meta, StoryObj } from '@storybook/vue3';
 2 | 
 3 | 
 4 | 
 5 | import MyComponent from '~/components/MyComposable.vue'
 6 | 
 7 | // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 8 | 
 9 | const meta = {
10 |   title: 'Example/Composables Story',
11 |   component: MyComponent,
12 |   // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
13 |   tags: ['autodocs'],
14 | 
15 | } satisfies Meta<typeof MyComponent>;
16 | 
17 | export default meta;
18 | type Story = StoryObj<typeof meta>;
19 | /*
20 |  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
21 |  * See https://storybook.js.org/docs/vue/api/csf
22 |  * to learn how to use render functions.
23 |  */
24 | 
25 | export const UserConfigComposable : Story = {
26 |   args: {  },
27 | }
28 | 
29 | 
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "nuxt build",
 6 |     "dev": "nuxt dev",
 7 |     "generate": "nuxt generate",
 8 |     "preview": "nuxt preview",
 9 |     "postinstall": "nuxt prepare",
10 |     "storybook": "storybook dev -p 6006",
11 |     "build-storybook": "storybook build"
12 |   },
13 |   "devDependencies": {
14 |     "@nuxt/devtools": "latest",
15 |     "@nuxt/image": "rc",
16 |     "@pinia/nuxt": "^0.4.11",
17 |     "@storybook-vue/nuxt": "0.2.7",
18 |     "@storybook/addon-essentials": "8.0.5",
19 |     "@storybook/addon-interactions": "8.0.5",
20 |     "@storybook/addon-links": "8.0.5",
21 |     "@storybook/blocks": "8.0.5",
22 |     "@storybook/types": "8.0.5",
23 |     "@types/node": "^18.19.31",
24 |     "@vitejs/plugin-vue": "^4.6.2",
25 |     "@vue/babel-plugin-jsx": "^1.2.2",
26 |     "nuxt": "^3.11.2",
27 |     "storybook": "8.0.5",
28 |     "typescript": "^5.4.5",
29 |     "vite": "^4.5.3",
30 |     "vue-tsc": "^1.8.27"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/components/PinButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="storybook  storybook-button"> 
 3 |     <NuxtLink :class="classes" @click="onClick" :style="style">
 4 |      <slot></slot>
 5 |     </NuxtLink>
 6 |  </div>
 7 | </template>
 8 | 
 9 | <script lang="ts" setup>
10 | import '~/assets/button.css';
11 | import { computed } from 'vue';
12 | 
13 | type Sizes = 'small' | 'medium' | 'large' | 'xlarge';
14 | 
15 | const props = withDefaults(defineProps<{
16 |   
17 |   primary?: boolean,
18 |   /**
19 |    * size of the button
20 |    */
21 |   size?: Sizes ,
22 |   /**
23 |    * background color of the button
24 |    */
25 |   backgroundColor?: string,
26 | 
27 |   dataTestid ?: string
28 | 
29 | }>(), { primary: false });
30 | 
31 | const emit = defineEmits<{
32 |   (e: 'click', id: number): void;
33 | }>();
34 | 
35 | const classes = computed(() => ({
36 |   'storybook-button': true,
37 |   'storybook-button--primary': props.primary,
38 |   'storybook-button--secondary': !props.primary,
39 |   [`storybook-button--${props.size || 'medium'}`]: true,
40 | }));
41 | 
42 | const style = computed(() => ({
43 |   backgroundColor: props.backgroundColor
44 | }));
45 | 
46 | const onClick = () => {
47 |   emit("click", 1)
48 | };
49 | 
50 | </script>
51 | 


--------------------------------------------------------------------------------
/stores/counter.ts:
--------------------------------------------------------------------------------
 1 | const delay = (t: number) => new Promise((r) => setTimeout(r, t))
 2 | 
 3 | export const useCounter = defineStore('counter', {
 4 |   state: () => ({
 5 |     n: 2,
 6 |     incrementedTimes: 0,
 7 |     decrementedTimes: 0,
 8 |     numbers: [] as number[],
 9 |   }),
10 | 
11 |   getters: {
12 |     double: (state) => state.n * 2,
13 |   },
14 | 
15 |   actions: {
16 |     increment(amount = 1) {
17 |       this.incrementedTimes++
18 |       this.n += amount
19 |     },
20 | 
21 |     changeMe() {
22 |       console.log('change me to test HMR')
23 |     },
24 | 
25 |     async fail() {
26 |       const n = this.n
27 |       await delay(1000)
28 |       this.numbers.push(n)
29 |       await delay(1000)
30 |       if (this.n !== n) {
31 |         throw new Error('Someone changed n!')
32 |       }
33 | 
34 |       return n
35 |     },
36 | 
37 |     async decrementToZero(interval: number = 300) {
38 |       if (this.n <= 0) return
39 | 
40 |       while (this.n > 0) {
41 |         this.$patch((state) => {
42 |           state.n--
43 |           state.decrementedTimes++
44 |         })
45 |         await delay(interval)
46 |       }
47 |     },
48 |   },
49 | })
50 | 
51 | if (import.meta.hot) {
52 |   import.meta.hot.accept(acceptHMRUpdate(useCounter, import.meta.hot))
53 | }
54 | 


--------------------------------------------------------------------------------
/components/MyButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="storybook sb-column"> 
 3 |     <h4> NuxtLink  </h4>
 4 |     <MyNuxtLink :class="classes" @click="onClick" :style="style">
 5 |       {{ label }} 
 6 |     </MyNuxtLink>
 7 |  </div>
 8 | </template>
 9 | 
10 | <script lang="ts" setup>
11 | import '~/assets/button.css';
12 | import { computed } from 'vue';
13 | 
14 | type Sizes = 'small' | 'medium' | 'large' | 'xlarge';
15 | 
16 | const props = withDefaults(defineProps<{
17 |   /**
18 |    * The label of the button
19 |    */
20 |   label: string,
21 |   /**
22 |    * primary or secondary button
23 |    */
24 |   primary?: boolean,
25 |   /**
26 |    * size of the button
27 |    */
28 |   size?: Sizes ,
29 |   /**
30 |    * background color of the button
31 |    */
32 |   backgroundColor?: string,
33 | 
34 |   union?: string | number | boolean
35 | 
36 | }>(), { primary: false });
37 | 
38 | const emit = defineEmits<{
39 |   (e: 'click', id: number): void;
40 | }>();
41 | 
42 | const classes = computed(() => ({
43 |   'storybook-button': true,
44 |   'storybook-button--primary': props.primary,
45 |   'storybook-button--secondary': !props.primary,
46 |   [`storybook-button--${props.size || 'medium'}`]: true,
47 | }));
48 | 
49 | const style = computed(() => ({
50 |   backgroundColor: props.backgroundColor
51 | }));
52 | 
53 | const onClick = () => {
54 |   emit("click", 1)
55 | };
56 | 
57 | </script>
58 | 


--------------------------------------------------------------------------------
/assets/button.css:
--------------------------------------------------------------------------------
 1 | .storybook {
 2 |   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 3 |   font-size: 14px;
 4 |   line-height: 1.5;
 5 |   color: #333;
 6 |   background-color: white;
 7 | }
 8 | 
 9 | .storybook-button {
10 |   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
11 |   font-weight: 700;
12 |   border: 0;
13 |   border-radius: 3em;
14 |   cursor: pointer;
15 |   display: inline-block;
16 |   line-height: 1;
17 | }
18 | .storybook-button--primary {
19 |   color: white;
20 |   background-color: #1ea7fd;
21 | }
22 | .storybook-button--secondary {
23 |   color: #333;
24 |   background-color: transparent;
25 |   box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
26 | }
27 | .storybook-button--small {
28 |   font-size: 12px;
29 |   padding: 10px 16px;
30 | }
31 | .storybook-button--medium {
32 |   font-size: 14px;
33 |   padding: 11px 20px;
34 | }
35 | .storybook-button--large {
36 |   font-size: 16px;
37 |   padding: 12px 24px;
38 | }
39 | .with-border {
40 |   border: 1px solid #d8adad;
41 |   border-radius: 6px;
42 |   padding: 10px;
43 | }
44 | .sb-row {
45 |   display: flex;
46 |   gap: 20px;
47 |   align-items: center;
48 |   border: 1px solid #d8adad;
49 |   border-radius: 6px;
50 |   padding: 10px;
51 | }
52 | 
53 | .sb-column {
54 |   display: flex;
55 |   flex-direction: column;
56 |   align-items: flex-start;
57 |   justify-content: center;
58 | }
59 | 


--------------------------------------------------------------------------------
/stories/NuxtButton.stories.ts:
--------------------------------------------------------------------------------
 1 | import type { Meta, StoryObj, VueRenderer } from '@storybook/vue3';
 2 | import type { DecoratorFunction } from "@storybook/types"
 3 | 
 4 | import MyPre from '~/components/Pre.vue'
 5 | import MyButton from '~/components/MyButton.vue'
 6 | 
 7 | // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 8 | const decorators:DecoratorFunction<VueRenderer>[] = []
 9 | const meta = {
10 |   title: 'Example/NuxtLink Story',
11 |   component: MyButton,
12 |   // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
13 |   tags: ['autodocs'],
14 |   argTypes: {
15 |     backgroundColor: { control: 'color' },
16 |     onClick: { action: 'clicked' },
17 |   },
18 |   args: { primary: false }, // default value
19 |   decorators
20 | } satisfies Meta<typeof MyButton>;
21 | 
22 | export default meta;
23 | type Story = StoryObj<typeof meta>;
24 | /*
25 |  *👇 Render functions are a framework specific feature to allow you control on how the component renders.
26 |  * See https://storybook.js.org/docs/vue/api/csf
27 |  * to learn how to use render functions.
28 |  */
29 | 
30 | export const Primary : Story = {
31 | args: { primary: true , label:'Primary' },
32 | }
33 | 
34 | export const MyStory : Story = { 
35 | args: { primary: true , label:'My Story' },
36 | render:(args) => ({
37 |   components: { MyPre },
38 |   template: `<my-pre>  Hii</my-pre>`,
39 | }),
40 | }
41 | 
42 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |       <div style="margin: 1rem 0">
 4 |         <h1>{{ msg }}</h1>
 5 |         <PiniaLogo />
 6 |       </div>
 7 |   
 8 |       <p>
 9 |         
10 |         This is an example store to test out devtools. Try one of the following
11 |         with the devtools open:
12 |         <br />
13 |       </p>
14 |   
15 |       <ol>
16 |         <li>Use the different increment actions</li>
17 |         <li>Change the counter directly from the devtools</li>
18 |         <li>Use decrement to zero to see how action groups work</li>
19 |         <li>
20 |           Click
21 |           <b>Test Errors</b> and immediately after <b>increment</b> the store
22 |         </li>
23 |         <li>
24 |           While the dev server is running, try changing counter.changeMe, adding,
25 |           and removing new state properties
26 |         </li>
27 |       </ol>
28 |   
29 |       <h2>Counter Store</h2>
30 |   
31 |       <p data-testid="counter-values">
32 |         Counter: {{ counter.n }}. Double: {{ counter.double }}
33 |       </p>
34 |   
35 |       <p>Increment the Store:</p>
36 |   
37 |       <PinButton @click="counter.increment()" data-testid="increment">+1</PinButton>
38 |       <PinButton @click="counter.increment(10)">+10</PinButton>
39 |       <PinButton @click="counter.increment(100)">+100</PinButton>
40 |       <PinButton @click="counter.n++">Direct Increment</PinButton>
41 |       <PinButton
42 |         @click="
43 |           counter.$patch((state) => {
44 |             state.n++
45 |             state.incrementedTimes++
46 |           })
47 |         "
48 |       >
49 |         Direct patch
50 |       </PinButton>
51 |   
52 |       <p>Other actions:</p>
53 |   
54 |       <PinButton @click="counter.fail">Test Errors</PinButton>
55 |       <PinButton @click="counter.decrementToZero()">Decrement to zero</PinButton>
56 |       <PinButton @click="counter.changeMe()">
57 |         <code>counter.changeMe()</code>
58 |       </PinButton>
59 |   
60 |       <hr />
61 |   
62 |       <p>
63 |         Complete store state via
64 |         <code>store.$state</code>:
65 |       </p>
66 |   
67 |       <pre>{{ counter.$state }}</pre>
68 |     </div>
69 |   </template>
70 |   
71 |   <script setup lang="ts">
72 |   import PiniaLogo from '~/components/PiniaLogo.vue'
73 | 
74 |   const props = defineProps({
75 |     msg: {
76 |       type: String,
77 |       required: true,
78 |     },
79 |   })
80 |   
81 |   const counter = useCounter()
82 |   
83 |   
84 |   </script>
85 |   
86 |   <style scoped>
87 |   .storybook-button {
88 |     margin-right: 0.1rem;
89 |     margin-bottom: 0.5rem;
90 |   }
91 |   h1 {
92 |     font-size: 30px;
93 |     font-weight: bold;
94 |     text-align: center;
95 |   }
96 |   </style>
97 |   


--------------------------------------------------------------------------------
/components/PiniaLogo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <svg
  3 |       class="pinia-container"
  4 |       width="408"
  5 |       height="520"
  6 |       viewBox="0 0 408 520"
  7 |       fill="none"
  8 |       xmlns="http://www.w3.org/2000/svg"
  9 |     >
 10 |       <g class="leaves">
 11 |         <path
 12 |           fill-rule="evenodd"
 13 |           clip-rule="evenodd"
 14 |           d="M178.604 253.684C210.877 222.936 201.029 184.907 171.8 138.825C142.571 92.7423 83.7343 76.3478 72.7579 86.8057C61.7814 97.2637 59.3484 172.034 88.577 218.116C117.806 264.198 146.331 284.432 178.604 253.684Z"
 15 |           fill="url(#paint0_linear)"
 16 |         />
 17 |         <path
 18 |           fill-rule="evenodd"
 19 |           clip-rule="evenodd"
 20 |           d="M206.508 257.94C230.384 295.582 262.303 281.819 301.811 244.176C341.32 206.534 357.702 134.428 349.582 121.625C341.462 108.822 279.752 109.464 240.243 147.107C200.734 184.749 182.633 220.298 206.508 257.94Z"
 21 |           fill="url(#paint1_linear)"
 22 |         />
 23 |         <path
 24 |           fill-rule="evenodd"
 25 |           clip-rule="evenodd"
 26 |           d="M193.454 237.231C233.099 242.099 248.689 205.474 255.958 146.272C263.227 87.0698 233.262 24.497 219.778 22.8414C206.295 21.1858 160.995 74.5172 153.726 133.719C146.457 192.922 153.81 232.364 193.454 237.231Z"
 27 |           fill="url(#paint2_linear)"
 28 |         />
 29 |       </g>
 30 |   
 31 |       <g class="body">
 32 |         <path
 33 |           fill-rule="evenodd"
 34 |           clip-rule="evenodd"
 35 |           d="M192.63 519.038C275.748 519.038 343.156 494.893 343.156 385.393C343.156 275.893 275.748 186.038 192.63 186.038C109.511 186.038 42.156 275.893 42.156 385.393C42.156 494.893 109.511 519.038 192.63 519.038Z"
 36 |           fill="url(#paint3_linear)"
 37 |         />
 38 |         <path
 39 |           fill-rule="evenodd"
 40 |           clip-rule="evenodd"
 41 |           d="M310.811 401.034C308.621 398.93 305.139 398.999 303.034 401.189L229.034 478.189C226.93 480.379 226.999 483.861 229.189 485.966C231.379 488.07 234.861 488.001 236.966 485.811L310.966 408.811C313.07 406.621 313.001 403.139 310.811 401.034Z"
 42 |           fill="#ECB732"
 43 |         />
 44 |         <path
 45 |           fill-rule="evenodd"
 46 |           clip-rule="evenodd"
 47 |           d="M239.233 409.993C237.02 412.073 236.912 415.554 238.993 417.767L285.993 467.767C288.073 469.98 291.554 470.088 293.767 468.007C295.98 465.927 296.088 462.446 294.007 460.233L247.007 410.233C244.927 408.02 241.446 407.912 239.233 409.993Z"
 48 |           fill="#ECB732"
 49 |         />
 50 |         <path
 51 |           fill-rule="evenodd"
 52 |           clip-rule="evenodd"
 53 |           d="M225.889 225.111C228.037 227.259 228.037 230.741 225.889 232.889L176.889 281.889C174.741 284.037 171.259 284.037 169.111 281.889C166.963 279.741 166.963 276.259 169.111 274.111L218.111 225.111C220.259 222.963 223.741 222.963 225.889 225.111Z"
 54 |           fill="#FFC73B"
 55 |         />
 56 |         <path
 57 |           fill-rule="evenodd"
 58 |           clip-rule="evenodd"
 59 |           d="M215.889 281.889C218.037 279.741 218.037 276.259 215.889 274.111L166.889 225.111C164.741 222.963 161.259 222.963 159.111 225.111C156.963 227.259 156.963 230.741 159.111 232.889L208.111 281.889C210.259 284.037 213.741 284.037 215.889 281.889Z"
 60 |           fill="#FFC73B"
 61 |         />
 62 |   
 63 |         <g class="eye-left">
 64 |           <path
 65 |             d="M111.34 359.471C123.125 360.918 133.225 357.648 133.898 352.166C134.571 346.684 125.563 341.067 113.777 339.62C101.992 338.173 91.8918 341.444 91.2187 346.925C90.5456 352.407 99.5541 358.024 111.34 359.471Z"
 66 |             fill="#EAADCC"
 67 |           />
 68 |           <template v-if="!blinking || blinking === 'open'">
 69 |             <path
 70 |               d="M150.023 321.156C149.513 335.783 137.241 347.226 122.615 346.715C107.988 346.205 96.545 333.933 97.0557 319.307C97.5665 304.68 109.838 293.237 124.464 293.748C139.091 294.258 150.534 306.53 150.023 321.156Z"
 71 |               fill="white"
 72 |             />
 73 |             <g class="eyeball">
 74 |               <path
 75 |                 d="M141.046 320.343C140.719 329.726 132.847 337.067 123.463 336.739C114.08 336.411 106.739 328.539 107.067 319.156C107.395 309.773 115.267 302.432 124.65 302.76C134.033 303.087 141.374 310.959 141.046 320.343Z"
 76 |                 fill="black"
 77 |               />
 78 |               <path
 79 |                 d="M125.161 316.786C125.026 320.65 121.784 323.672 117.921 323.537C114.057 323.403 111.034 320.161 111.169 316.297C111.304 312.434 114.546 309.411 118.409 309.546C122.273 309.681 125.296 312.922 125.161 316.786Z"
 80 |                 fill="white"
 81 |               />
 82 |             </g>
 83 |           </template>
 84 |           <path
 85 |             fill-rule="evenodd"
 86 |             v-else
 87 |             clip-rule="evenodd"
 88 |             d="M98.4768 310.811C97.1028 311.737 96.7396 313.602 97.6656 314.976C102.329 321.896 109.474 325.785 118.663 326.835C127.921 327.893 136.204 325.529 143.318 319.748C144.603 318.703 144.799 316.813 143.754 315.527C142.709 314.242 140.819 314.046 139.534 315.091C133.705 319.828 127.041 321.754 119.344 320.874C111.579 319.987 106.157 316.839 102.641 311.623C101.715 310.249 99.8508 309.885 98.4768 310.811Z"
 89 |             fill="#755400"
 90 |           />
 91 |         </g>
 92 |   
 93 |         <g class="eye-right">
 94 |           <path
 95 |             d="M263.558 365.546C275.433 365.546 285.058 361.069 285.058 355.546C285.058 350.023 275.433 345.546 263.558 345.546C251.684 345.546 242.058 350.023 242.058 355.546C242.058 361.069 251.684 365.546 263.558 365.546Z"
 96 |             fill="#EAADCC"
 97 |           />
 98 |   
 99 |           <template v-if="!blinking || blinking === 'open'">
100 |             <path
101 |               d="M279.944 325.693C279.433 340.32 267.162 351.763 252.536 351.252C237.909 350.742 226.466 338.47 226.977 323.844C227.487 309.217 239.759 297.774 254.385 298.285C269.012 298.795 280.455 311.067 279.944 325.693Z"
102 |               fill="white"
103 |             />
104 |             <g class="eyeball">
105 |               <path
106 |                 d="M270.967 324.879C270.64 334.263 262.767 341.604 253.384 341.276C244.001 340.948 236.66 333.076 236.988 323.693C237.316 314.31 245.188 306.969 254.571 307.297C263.954 307.624 271.295 315.496 270.967 324.879Z"
107 |                 fill="black"
108 |               />
109 |               <path
110 |                 d="M255.082 321.323C254.947 325.187 251.705 328.209 247.842 328.074C243.978 327.939 240.955 324.698 241.09 320.834C241.225 316.971 244.467 313.948 248.33 314.083C252.194 314.218 255.217 317.459 255.082 321.323Z"
111 |                 fill="white"
112 |               />
113 |             </g>
114 |           </template>
115 |           <path
116 |             fill-rule="evenodd"
117 |             v-else
118 |             clip-rule="evenodd"
119 |             d="M231.477 319.811C230.103 320.737 229.74 322.602 230.666 323.976C235.329 330.896 242.474 334.785 251.663 335.835C260.921 336.893 269.204 334.529 276.318 328.748C277.603 327.703 277.799 325.813 276.754 324.527C275.709 323.242 273.819 323.046 272.534 324.091C266.705 328.828 260.041 330.754 252.344 329.874C244.579 328.987 239.157 325.839 235.641 320.623C234.715 319.249 232.851 318.885 231.477 319.811Z"
120 |             fill="#755400"
121 |           />
122 |         </g>
123 |   
124 |         <path
125 |           fill-rule="evenodd"
126 |           clip-rule="evenodd"
127 |           d="M70.1889 401.034C72.379 398.93 75.8608 398.999 77.9656 401.189L151.966 478.189C154.07 480.379 154.001 483.861 151.811 485.966C149.621 488.07 146.139 488.001 144.034 485.811L70.0344 408.811C67.9296 406.621 67.9988 403.139 70.1889 401.034Z"
128 |           fill="#ECB732"
129 |         />
130 |         <path
131 |           fill-rule="evenodd"
132 |           clip-rule="evenodd"
133 |           d="M141.767 409.993C143.98 412.073 144.088 415.554 142.007 417.767L95.0074 467.767C92.927 469.98 89.4462 470.088 87.233 468.007C85.0197 465.927 84.9121 462.446 86.9925 460.233L133.993 410.233C136.073 408.02 139.554 407.912 141.767 409.993Z"
134 |           fill="#ECB732"
135 |         />
136 |         <path
137 |           fill-rule="evenodd"
138 |           clip-rule="evenodd"
139 |           v-if="!talking || talking == 'closed'"
140 |           d="M163.323 337.658C161.949 338.584 161.586 340.448 162.512 341.822C167.176 348.743 174.321 352.632 183.51 353.682C192.767 354.74 201.051 352.375 208.164 346.594C209.45 345.549 209.645 343.66 208.6 342.374C207.555 341.088 205.666 340.893 204.38 341.938C198.552 346.675 191.887 348.6 184.191 347.721C176.425 346.834 171.003 343.686 167.488 338.469C166.562 337.095 164.697 336.732 163.323 337.658Z"
141 |           fill="black"
142 |         />
143 |         <path
144 |           v-else
145 |           d="M205.5 350C205.5 355.761 203.379 359.178 200.18 361.288C196.798 363.518 191.88 364.5 186 364.5C180.12 364.5 175.202 363.518 171.82 361.288C168.621 359.178 166.5 355.761 166.5 350C166.5 347.536 168.262 344.446 171.9 341.84C175.456 339.292 180.447 337.5 186 337.5C191.553 337.5 196.544 339.292 200.1 341.84C203.738 344.446 205.5 347.536 205.5 350Z"
146 |           fill="#E77777"
147 |         />
148 |       </g>
149 |   
150 |       <defs>
151 |         <linearGradient
152 |           id="paint0_linear"
153 |           x1="68.5172"
154 |           y1="90.0774"
155 |           x2="85.0979"
156 |           y2="170.543"
157 |           gradientUnits="userSpaceOnUse"
158 |         >
159 |           <stop stop-color="#52CE63" />
160 |           <stop offset="1" stop-color="#51A256" />
161 |         </linearGradient>
162 |         <linearGradient
163 |           id="paint1_linear"
164 |           x1="359.841"
165 |           y1="134.702"
166 |           x2="279.366"
167 |           y2="151.265"
168 |           gradientUnits="userSpaceOnUse"
169 |         >
170 |           <stop stop-color="#52CE63" />
171 |           <stop offset="1" stop-color="#51A256" />
172 |         </linearGradient>
173 |         <linearGradient
174 |           id="paint2_linear"
175 |           x1="219.235"
176 |           y1="22.7747"
177 |           x2="203.754"
178 |           y2="148.86"
179 |           gradientUnits="userSpaceOnUse"
180 |         >
181 |           <stop stop-color="#8AE99C" />
182 |           <stop offset="1" stop-color="#52CE63" />
183 |         </linearGradient>
184 |         <linearGradient
185 |           id="paint3_linear"
186 |           x1="196.803"
187 |           y1="244.222"
188 |           x2="171.815"
189 |           y2="518.625"
190 |           gradientUnits="userSpaceOnUse"
191 |         >
192 |           <stop stop-color="#FFE56C" />
193 |           <stop offset="1" stop-color="#FFC63A" />
194 |         </linearGradient>
195 |       </defs>
196 |     </svg>
197 |   </template>
198 |   
199 |   <script setup lang="ts">
200 |   import { onMounted, onUnmounted, ref } from 'vue'
201 |   
202 |   const blinking = ref<'open' | 'closed'>('open')
203 |   const talking = ref<'open' | 'closed'>('closed')
204 |   
205 |   
206 |   const blinkTimer = 100
207 |   const talkRate = 120
208 |   
209 |   onMounted(() => {
210 |     let timerId = setInterval(() => {
211 |       let blinkState = 0
212 |       function blinkHandler() {
213 |         blinkState++
214 |   
215 |         if (blinkState % 2) {
216 |           blinking.value = 'closed'
217 |           setTimeout(blinkHandler, blinkTimer * 1.7)
218 |         } else if (blinkState < 4) {
219 |           blinking.value = 'open'
220 |           setTimeout(blinkHandler, blinkTimer)
221 |         } else {
222 |           blinking.value = 'open'
223 |         }
224 |       }
225 |       setTimeout(blinkHandler, 0)
226 |     }, 10000)
227 |   
228 |     onUnmounted(() => {
229 |       clearInterval(timerId)
230 |     })
231 |   
232 |     let talkingTimer = setInterval(() => {
233 |       let blinkState = 0
234 |       function blinkHandler() {
235 |         blinkState++
236 |   
237 |         if (blinkState % 2) {
238 |           // talking.value = 'closed'
239 |           setTimeout(blinkHandler, talkRate)
240 |         } else if (blinkState < 10) {
241 |           // talking.value = 'open'
242 |           setTimeout(blinkHandler, talkRate)
243 |         } else {
244 |           // talking.value = 'closed'
245 |         }
246 |       }
247 |       setTimeout(blinkHandler, 0)
248 |     }, 5000)
249 |     onUnmounted(() => {
250 |       clearInterval(talkingTimer)
251 |     })
252 |   })
253 |   </script>
254 |   
255 |   <style>
256 |   @keyframes leaves-move {
257 |     0% {
258 |       transform: rotate(0deg) scale(1);
259 |     }
260 |     2.5% {
261 |       transform: rotate(-2deg) scale3d(0.9, 1.05, 1) translateY(6%);
262 |     }
263 |     3.5% {
264 |       transform: scale3d(1.05, 0.95, 1) translateY(2%);
265 |     }
266 |     5% {
267 |       transform: rotate(3deg) scale3d(0.9, 1.05, 1);
268 |     }
269 |     7.5%,
270 |     100% {
271 |       transform: rotate(0) scale(1);
272 |     }
273 |   }
274 |   
275 |   @keyframes rubberBand {
276 |     0% {
277 |       transform: scale3d(1, 1, 1);
278 |     }
279 |   
280 |     .1% {
281 |       transform: scale3d(1.1, 0.9, 1);
282 |     }
283 |   
284 |     4% {
285 |       transform: scale3d(0.9, 1.1, 1);
286 |     }
287 |   
288 |     5% {
289 |       transform: scale3d(1.05, 0.95, 1);
290 |     }
291 |   
292 |     6.5% {
293 |       transform: scale3d(0.98, 1.02, 1);
294 |     }
295 |   
296 |     7.5% {
297 |       transform: scale3d(1.02, 0.98, 1);
298 |     }
299 |   
300 |     7.6%,
301 |     100% {
302 |       transform: scale3d(1, 1, 1);
303 |     }
304 |   }
305 |   </style>
306 |   
307 |   <style scoped>
308 |   .leaves {
309 |     /* animation: 10s ease-in-out 0s infinite rubberBand; */
310 |     animation: 10s ease-in-out 10s infinite normal leaves-move;
311 |     transform-origin: bottom;
312 |   }
313 |   
314 |   .body {
315 |     animation-duration: 500ms;
316 |     animation-delay: 0s;
317 |     animation-iteration-count: 0;
318 |     animation-name: rubberBand;
319 |     transform-origin: center;
320 |   }
321 |   
322 |   .pinia-container {
323 |     display: block;
324 |     margin: auto;
325 |   }
326 |   </style>
327 |   


--------------------------------------------------------------------------------