Configuring Storybook for Quasar v2

Question

I am currently having a hard time trying to configure Storybook for Quasar v2 (with Vue 3).

Here my dependencies in the package.json:

"dependencies": {
    "@quasar/extras": "^1.0.0",
    "core-js": "^3.6.5",
    "quasar": "^2.0.0-beta.1",
    "vue-i18n": "^9.0.0-beta.0"
},
"devDependencies": {
    "@babel/core": "^7.13.14",
    "@quasar/app": "^3.0.0-beta.1",
    "@storybook/addon-actions": "^6.2.1",
    "@storybook/addon-essentials": "^6.2.1",
    "@storybook/addon-links": "^6.2.1",
    "@storybook/vue3": "^6.2.1", # ✅ storybook for vue3
    "@types/node": "^10.17.15",
    "@typescript-eslint/eslint-plugin": "^4.16.1",
    "@typescript-eslint/parser": "^4.16.1",
    "babel-loader": "^8.2.2",
    "prettier": "^2.2.1",
    "vue-loader": "^16.2.0" # ✅ the specific vue loader needed
    "babel-eslint": "^10.0.1",
    "eslint": "^7.14.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^7.0.0"
}

The .storybook/main.js:

module.exports = {
  // the path may be precised for performance
  stories: [
    '../packages/**/components/*.stories.@(js|ts)'
  ],
  addons: ['@storybook/addon-essentials'],
}

The .storybook/preview.js:

import { createApp } from 'vue';
import Vuex from 'vuex';
import Quasar from 'quasar'; //  Quasar is undefined in a console.log

// helper for quasar start
const qAppEl = document.createElement('div');

qAppEl.setAttribute('id', 'q-app');
document.getElementsByTagName('body')[0].appendChild(qAppEl);

const app = createApp({})
app.use(Vuex);
app.use(Quasar, { config: {}, directives: {} });
app.mount('#q-app')

and the test story EssentialLink.stories.js:

import EssentialLink from './EssentialLink.vue'

export default {
  title: 'StoryTest'
}

export const essentialLink = () => ({
  components: { EssentialLink },
  template: ``
})

I get two errors:

SyntaxError: missing } after property list in the EssentialLink.stories.js at the line of the prop title
[Vue warn]: A plugin must either be a function or an object with an "install" function. (Quasar import is undefined in the file .storybook/preview.js)

user_5865556 · Answer

You might already resolve it.

Storybook uses its own Vue instance. So importing @storybook/vue3 is needed.

./storybook/preview.js

import '@quasar/extras/roboto-font/roboto-font.css'
import '@quasar/extras/material-icons/material-icons.css'
import '@quasar/extras/animate/fadeInUp.css'
import '@quasar/extras/animate/fadeOutDown.css'
import '@quasar/extras/animate/fadeInRight.css'
import '@quasar/extras/animate/fadeOutRight.css'

import 'quasar/dist/quasar.css'
import { app } from '@storybook/vue3'
import { Quasar } from 'quasar'

app.use(Quasar, {})

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

If more sample code, refer this repo

Configuring Storybook for Quasar v2

1 Answers