> For the complete documentation index, see [llms.txt](https://pinia.chocopam.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pinia.chocopam.com/introduction/why-pinia/introduction-and-project-setup.md).

# 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.&#x20;
>
> 새로운 Vue3 프로젝트를 생성하세요. Vite를 사용하지 않을 이유가 없으니 꼭 Vite를 사용해 프로젝트를 생성합니다.  이미 생성한 Vue3 프로젝트가 있다면 스킵합니다.

### \[optional] node 버전은 18.16.1

```
nvm use 18.16.1
```

#### Storybook 설치

```sh
pnpm dlx storybook@latest init
```

#### \[참고] package.json의 storybook dependencies&#x20;

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

####

#### 개발 서버 실행&#x20;

```
pnpm storybook
```

### Storybook 설정

<figure><img src="https://396851279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnJJXw1Yed0u0anj3mdAl%2Fuploads%2FMgXxIXAkaSraLRzBCAOm%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-11-26%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.46.52.png?alt=media&amp;token=ec659de4-2fb9-4536-9ba8-74cb8ecd9860" alt=""><figcaption><p>ui-test folder has *.vue and *.stories.js</p></figcaption></figure>

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

<figure><img src="https://396851279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnJJXw1Yed0u0anj3mdAl%2Fuploads%2Fgc3oBknUidKAzjp8exFM%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-11-26%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.48.09.png?alt=media&amp;token=5788babe-162e-407e-be79-e1b655884a1b" alt=""><figcaption></figcaption></figure>

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

#### SFC (뷰 컴포넌트)

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

```javascript
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: "john@example.com",
        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&#x20;

<figure><img src="https://396851279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnJJXw1Yed0u0anj3mdAl%2Fuploads%2FhhHBdzh5ZvSZkRMTkOzd%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-11-26%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2012.18.56.png?alt=media&amp;token=b7cb0961-9315-4a6c-b475-f31f93eefc81" alt=""><figcaption></figcaption></figure>

<figure><img src="https://396851279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnJJXw1Yed0u0anj3mdAl%2Fuploads%2FuZ1DjUvPN70o9BAsft6s%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202023-11-26%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2012.19.36.png?alt=media&amp;token=10ff4cf4-d1ab-4154-bcc6-5ddc67defd4c" alt=""><figcaption></figcaption></figure>

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