Using Quasar with Vue3 & Storybook

#quasar #vue #storybook #beginners

This is a draft article and may be polished later

Create a new quasar project. Install the quasar cli if you haven't already. Using the Vite option for this example.

Select Vue 3 and Vite instead of Webpack to follow along with this example.

$ yarn global add @quasar/cli
$ yarn create quasar

# or:

$ npm i -g @quasar/cli
$ npm init quasar

Initialize storybook

cd into the directory of your created project

Run npx sb init to initialize storybook in your project.

Update package.json

Replace whatever version of autoprefixer you have in your package.json in order for Storybook to work. The version of PostCSS being used by Storybook will not work with later versions of autoprefixer. More details on why that is can be found here.

Use this:

 "autoprefixer": "^9.0.0",

Update your Storybook settings

In order for storybook to load and display quasar components correctly, we need to update our .storybook/preview.js file with the following:

import '@quasar/extras/roboto-font/roboto-font.css';
// These are optional
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';

// Loads the quasar styles and registers quasar functionality with storybook
import 'quasar/dist/quasar.css';
import { app } from '@storybook/vue3';
import { Quasar } from 'quasar';

// This is also where you would setup things such as pinia for storybook

app.use(Quasar, {});

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

Run storybook

Use yarn storybook to run storybook. It should open your browser at localhost:6006/ by default.

Test Quasar Components

Replace the code in your src/stories/Button.vue with

<template>
  <q-btn color="primary">Something</q-btn>
</template>

You should now see your quasar button in storybook.

Conclusion

That's it! You can now begin to use storybook with Vue3 + Vite + Quasar

Top comments (4)

gdziew • Jan 10 '23 • Edited

Update:

as of @storybook/vue3-webpack5": "^7.0.0-beta.21

from:

app.use(Quasar, {});

to:

import { setup } from '@storybook/vue3';
setup((app) => {
   app.use(Quasar, {});
});

source of information

Hossein Ghobadi Samani • Jan 22

thank you for your wonderful post, just one step to make it perfect, how can add my sass-variables to storybook? I'm using nuxt3 and I have added quasar as a module to my nuxt.config.ts file. my sass-variables file works fine in .vue components but not in my .stories files!