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