Introduction & Project setup

How to create advanced vue3 component with pinia?

How to setup project

Vue3 + VITE

https://vuejs.org/guide/quick-start.html#quick-start 를 참고해 Vue3 프로젝트를 생성합니다.

Let's say you already have Vite + Vue3 project.

새로운 Vue3 프로젝트를 생성하세요. Vite를 사용하지 않을 이유가 없으니 꼭 Vite를 사용해 프로젝트를 생성합니다. 이미 생성한 Vue3 프로젝트가 있다면 스킵합니다.

[optional] node 버전은 18.16.1

nvm use 18.16.1

Storybook 설치

pnpm dlx storybook@latest init

[참고] package.json의 storybook dependencies

"@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

Storybook 설정

ui-test folder has *.vue and *.stories.js

기본 포트가 6006, localhost:6006으로 접속시 아래와 같이 스토리들이 생깁니다.

생성한 컴포넌트를 스토리북에서 테스트하기 위해서는 두 가지 파일을 함께 생성해야 합니다.

SFC (뷰 컴포넌트)

<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>

story

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: "[e-mail]",
        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
}

같이 설치하면 좋을 vscode extension

주석 사용시 마크업 하이라이팅이 되게 해줍니다.