[vue.js] Storybook + Quasar + Vue3 (스토리북에 Quasar적용)

이전의 vue3 + vite 에 Storybook 을 설치를 해봤다.  🔽

https://eonhwa-theme.tistory.com/189

[vue.js] storybook 도입 (vue3 + vite)

근데 퀘이사 프레임워크가 적용이 안되는 문제가 있었는데 삽질 끝에 그 해결방법을 공유하고자 한다.

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

---

 

ERROR

.storybook/ preview.ts 파일에 Quasar 를 import 해와서 사용할 components 를 명시적으로 불러와서 사용해야한다.

 

//.storybook/preview.ts


import 'quasar/dist/quasar.css'
import '@quasar/extras/material-icons/material-icons.css'
import 'quasar/src/css/index.sass'

import { QBtn, Quasar } from 'quasar'
import type { Preview } from '@storybook/vue3'
import { setup } from '@storybook/vue3'

setup((app) => {
  app.use(Quasar, {
    components: {
      QBtn,
    },
  })
})

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
}

export default preview

 

 

 

 

하지만, 아래처럼 전체를 불러오게 적용이 안되는 것 같다.

import * as All from 'quasar'​  ❌

...

setup((app) => {
  app.use(Quasar, {
    components: {
      All
    },
  })
})

❌❌ 적용이 안됨 ❌❌

(퀘이사 전체 컴포넌트를 못불러오나...? ㅠ ) 

 

 

 

 

 

 

 

 

💢 또 다른 ERROR

 

 

 

 

💡 .storybook/main.ts 파일 >  viteFinal 코드 리턴에 아래의 코드 추가 

 define: {
    __QUASAR_SSR_CLIENT__: false,
    __QUASAR_SSR_SERVER__: false,
    __QUASAR_SSR__: false,
    __QUASAR_SSR_PWA__: false,
  },

 

//.storybook/main.ts


viteFinal(config) {
    // Modify the Vite config as needed
    return defineConfig({
      ...config,
      plugins: [vue(), ...(config.plugins || [])],
      define: {
        __QUASAR_SSR_CLIENT__: false,
        __QUASAR_SSR_SERVER__: false,
        __QUASAR_SSR__: false,
        __QUASAR_SSR_PWA__: false,
      },
    })
  },

 

 

 

 

다시 재실행 해보면 

pnpm run storybook

 

 

 

 

 

 

퀘이사가 잘 적용된 걸 확인할 수 있다!!