지금까지 Nuxt.js + storybook

지금까지 Nuxt.js에 스토리 북 환경을 만들려면,
storybook을 설치한 후,
.storybook/main.js, .storybook/preview.js
등을 작성하여 nuxt.config.js 및 plugin의 내용을 전기합니다.
nuxt가 기동했을 때와 같은 외형이 되도록(듯이) 2중으로 설정을 쓰거나 하고 있었습니다.

nuxtjs/storybook의 등장! !

nuxt-community에서
nuxtjs/storybook
8월 1일 v1.0.0 출시되었습니다.
현재 (2020/09/03) 시점에서 v2.2.0까지 업데이트하고 있습니다.

nuxtjs/storybook은

Zero configuration

Nuxt webpack configuration

Nuxt plugins support

Story discovery from nuxt modules

Nuxt components support

Storybook Generate

Hot reload support

을 구하는 툴로 설정은 거의 쓰지 않아도
nuxt.config.js의 내용을 마음대로 읽어 storybook을 기동해 주기 때문에
설정을 이중으로 쓰지 않아서 좋아졌습니다! !

라는 것으로 시험에 움직여 보았습니다.

Nuxt 설치

 $ npx create-nuxt-app nuxt-sandbox

초기 설정은 다음과 같이 해 보았습니다.

create-nuxt-app v3.2.0
✨  Generating Nuxt.js project in nuxt-sandbox
? Project name: nuxt-sandbox
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Buefy
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier, Lint staged files, StyleLint
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: Semantic Pull Requests

nuxtjs/storybook 설치

$ npm install --save-dev @nuxtjs/storybook

core-js@3 설치

s와 ry 보오 k @ 2.2 은 내부에서 core-js@3 을 사용하고 있기 때문에 기동시에 에러가 나오므로 다음을 먼저 둡니다.

$ npm install --save-dev core-js@3 @babel/runtime-corejs3

.gitignore에 다음을 추가

nuxtjs/storybook이 시작시 일부 파일을 생성하므로 git 대상에서 제외합니다.

.nuxt-storybook
storybook-static

storybook 시작

$ npx nuxt storybook

이제 nuxt.config.js를 로드한 storybook을 시작할 수 있습니다.



우선 시작이 가능했기 때문에,
story 파일을 추가하여 storybook에서 구성 요소를 확인합니다.

컴포넌트 테스트를 위한 story 파일 추가

nuxt 설치 옵션으로
buefy를 선택하면 components 폴더 아래에 Card.vue가 자동으로 만들어지므로
storybook에서 확인할 story 파일을 추가합니다.

Card.stories.ts

import Card from './Card.vue'

export default {
  title: 'Card',
}

export const Normal = () => ({
  components: { Card },
  template:
    '<card title="Free" icon="github">Open source on <a href="https://github.com/buefy/buefy"> GitHub </a></card>',
})

지금까지는, storybook용으로 여러가지 설정하지 않으면 안 되었던 stylesheet, icon 모두 정상적으로 적용되고 있는 것을 확인할 수 있었습니다.

Essential addons 설치

드디어 addon도 zero config

$ npm install --save-dev @storybook/addon-essentials

설치하면 자동으로 다음의 addon도 설치되어 사용할 수 있게 됩니다.

Docs

Controls

Actions

Viewport

Backgrounds

Toolbars & globals

사용할 Addon을 nuxt.config.js에 나열

storybook에 대한 설정을 nuxt.config.js에 추가합니다.
※ 지금까지와 달리, nuxtjs/storybook에서는/register까지 쓰지 않으면 에러가 되어 버리는 것 같습니다.

nuxt.config.js

export default {
  storybook: {
    addons: [
      '@storybook/addon-actions/register',
      '@storybook/addon-backgrounds/register',
      '@storybook/addon-controls/register',
      '@storybook/addon-docs/register',
      '@storybook/addon-toolbars/register',
      '@storybook/addon-viewport/register',
    ],
  },
}

Docs, Viewport, Controls 메뉴가 표시되는 것을 확인할 수 있을까 생각합니다.