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)
This is great, work like a charm
Update:
as of
@storybook/vue3-webpack5": "^7.0.0-beta.21
from:
to:
source of information
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!
It doesn't work anymore (