Configuring Storybook for Quasar v2

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: `<essential-link
    :title="A title"
  />`
})

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)

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$/,
    },
  },
}

also if you want to config your storybook with vite, you need to configure main.js and vite.config.js in your .storybook directory:

./storybook/main.js

import vue from '@vitejs/plugin-vue'
import path from 'path'

const config = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/vue3-vite',
    options: {},
  },
  async viteFinal(config) {
    config.plugins?.push(vue())
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        src: path.resolve(__dirname, '../src'),
      }
    }
    return config
  },
}
export default config

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
})

at the end if you had problem with quasar.variables.sass i followed these instructions:

• First, I built my quasar app using npm run build.
• Then, I moved the css file from the dist directory to the .storybook directory and renamed it to styles.css.
• Finally, I imported it into the preview.ts file using import './styles.css'.

additionally, I wrote a bash script to automate this process and run it before executing npm run storybook.

{
  "scripts": {
      "storybook": "sh ./run.sh && storybook dev -p 6006"
    }
}

If more sample code, refer this repo