DEV Community

Allan N Jeremy
Allan N Jeremy

Posted on

Using Quasar with Vue3 & Storybook

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
Enter fullscreen mode Exit fullscreen mode

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",
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

You should now see your quasar button in storybook.

Quasar button in storybook screenshot

Conclusion

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

Top comments (4)

Collapse
 
arga1234 profile image
Arga Wirawan

This is great, work like a charm

Collapse
 
gdziew profile image
gdziew • Edited

Update:

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

from:

app.use(Quasar, {});
Enter fullscreen mode Exit fullscreen mode

to:

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

source of information

Collapse
 
hosseinghs profile image
Hossein Ghobadi Samani

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!

Collapse
 
yonlevtlk profile image
yonlev

It doesn't work anymore (