Introduction & Project setup

nvm use 18.16.1

pnpm dlx storybook@latest init

"@storybook/addon-essentials": "^7.5.3",
"@storybook/addon-interactions": "^7.5.3",
"@storybook/addon-links": "^7.5.3",
"@storybook/blocks": "^7.5.3",
"@storybook/testing-library": "^0.2.2",
"@storybook/vue3": "^7.5.3",
"@storybook/vue3-vite": "^7.5.3",
"storybook": "^7.5.3"

pnpm storybook

<template>
  <div class="flex items-center p-2 bg-white rounded-lg shadow-sm hover:bg-gray-100">
    <img 
      v-if="userData && userData.avatar"
      :src="userData.avatar" 
      alt="User Avatar" 
      class="w-8 h-8 rounded-full"
    />
    <span v-if="userData" class="ml-3 text-sm font-medium text-gray-700">
      {{ userData.name }}
    </span>
    <span v-if="userData.loading" class="ml-3 text-sm font-medium text-gray-700">
      Loading...
    </span>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useUserStore } from '../../stores/user'
const userStore = useUserStore();
const { userData } = storeToRefs(userStore);
</script>

import UserProfile from './UserProfile.vue';
import { useUserStore } from '@/stores/user';

export const Base = {
  render: (args) => ({
    components: { UserProfile },
    setup() {
      const userStore = useUserStore();
      userStore.userData = {
        name: "John Doe",
        email: "[email protected]",
        id: 53,
        avatar: "https://api.dicebear.com/7.x/fun-emoji/svg"
      }
      return { args }
    },
    template: /* html */`
      <UserProfile 
        v-bind="args"
      />
    `,
  }),
  args: {
    alt: "storybook Profile"
  }
}

export default {
  component: UserProfile
}