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

Discussion (0)