@Nuxt.js/storybook에 vuetify.js 적용하기

https://gmyankee.tistory.com/324

Nuxt.js에 Storybook 적용하기

Nuxt.js에 Storybook 적용하기에 이어서 Vuetify.js를 적용하는 방법을 공식문서에서는 언급하지 않고 이렇게 저렇게 하면 돼! 라고만 설명을 해주고 있습니다.

https://storybook.nuxtjs.org/manual-setup/

Introduction

 

 

 

목차

• eject로 별도의 설정파일 생성하기
• main.js 확인
• preview.js 설정

 

 

 

 

eject로 별도의 설정파일 생성하기

지난 storybook 설치편에서 eject 오류 때문에 2.2.2 이상 버전을 설치하라고 했던게 여기서 빛을 발합니다.

먼저 간단하게 터미널을 열고 npx nuxt storybook eject 를 입력해주시면 .nuxt-storybook 폴더가 아닌 프로젝트 경로에 storybook 폴더가 생성된 것을 확인할 수 있습니다.

이 storybook 폴더에는 main.js, preivew.js 두 파일만이 생성됩니다.

 

 

 

 

 

main.js 확인

저의 경우는 main.js 파일의 stories경로가 이상하게 들어가서 살짝 수정을 좀 했습니다.

문제가 없으신 분들은 그냥 지나치셔도 됩니다.

 

// 오류가 나는 상황
module.exports = {
  webpackFinal (config, options) {
    config = options.nuxtStorybookConfig.webpackFinal(config, options)
    // extend config
    return config
  },
  stories: ['../../components/**/*.stories.@(ts|js)'],
  addons: ['@storybook/addon-knobs', '@storybook/addon-viewport'],
}

// 컴포넌트 경로 수정
module.exports = {
  webpackFinal (config, options) {
    config = options.nuxtStorybookConfig.webpackFinal(config, options)
    // extend config
    return config
  },
  stories: ['../components/**/*.stories.@(ts|js)'],
  addons: ['@storybook/addon-knobs', '@storybook/addon-viewport'],
}

위 오류가 나는 상황을 보시면 프로젝트 루트에 storybook 폴더가 생성되었는데 components는 상위 폴더를 향하고 있습니다. 그래서 경로를 맞춰주었는데, 이게 절대경로로 박는건가 하고서 소스코드 보고 Merge로 혼좀 내주려고 했더니 

이게 제가 삽질하다가 잘못박은상태로 eject를 해서 그런건지는 잘 모르겠네요. ㅎ.ㅎ

 

 

 

preview.js 설정

preview.js에 vuetify 관련 설정을 추가 해주어야 합니다.

import '~~/.nuxt-storybook/storybook/preview.js'  // default generate import code

import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'
import 'vuetify/dist/vuetify.min.css' // all the css for components

const vuetifyConfig = new Vuetify({
  customVariables: ['~/assets/variables.scss'],
  theme: {
    dark: false,
    themes: {
      dark: {
        teal: colors.amber,
        primary: colors.blue.darken2,
        accent: colors.grey.darken3,
        secondary: colors.amber.darken3,
        info: colors.teal.lighten1,
        warning: colors.amber.base,
        error: colors.deepOrange.accent4,
        success: colors.green.accent3
      }
    }
  }
})

export const decorators = [(_) => {
  return {
    vuetify: vuetifyConfig,
    template: `
      <v-app>
        <v-main>
          <v-container fluid>
            <story />
          </v-container>
        </v-main>
      </v-app>`
  }
}]

위 코드를 복붙해서 추가하신다음 다시 Storybook을 실행해보시면 정상적으로 px, mx ma, pa pr mr ml pl이나 다른 vuetify등의 css등이 잘 적용되는것을 볼 수 있습니다.