Is support for storybook for a quasar-cli app possible?

s.molinari

You could load it into your project possibly like this: https://storybook.js.org/docs/guides/guide-vue/

Just theoretical on my part. You don’t need a CLI.

Scott

s.molinari

Also I found this: https://github.com/imdanielpiva/vue-quasar-storybook

And if you are interested in testing, see this: https://github.com/quasarframework/quasar-testing

You could ask Denjell, if he can add Storybook support to the list of supported libraries in the App Extension.

Scott

digiproduct

@s-molinari said in Is support for storybook for a quasar-cli app possible?:

And if you are interested in testing, see this: https://github.com/quasarframework/quasar-testing
Scott

That’s something to note for future use. Thanks @s-molinari

paul

@s-molinari Thanks for the help. Indeed, that’s theoretical. Just like adding typescript to a quasar app boils down to ‘npm install typescript’, just theoretical
I think there is more involved than that.
But thanks a lot for getting the right persons involved to put it on the shortlist for adding it to the brilliant quasar testing support. thanks @digiproduct for your support.
cheers.

thibautguedou3

@paul @s-molinari I have made an other repository with a storybook config for quasar v1.1.7 if you want to take a look
https://github.com/thibautguedou3/quasar-storybook-typescript/tree/master

paul

@thibautguedou3 thanks Thibaut. Will take a look.

paul

@thibautguedou3 This is working great, thanks again.
I’m using ES6 instead of typescript.
This is the webpack config for ES6:

const path = require('path')

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(scss|sass)$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../')
  })
  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    loaders: [require.resolve('@storybook/source-loader')],
    enforce: 'pre'
  })

  return config
}

kili236

@thibautguedou3 Hello, I am new to quasar and storybook and I need to port some vue components into quasar. I tried out your repo and it works great with your example. I tried then to use an icon button instead of a normal button, <q-btn color="primary" icon="mail" label="On Left" />, but the icon is not displayed ( it is written mail instead). Do you think you can give me an hint?
Thank you very much

thibautguedou3

Hi @kili236! You are right, I need to update this repository. If you want to add support for icon libraries, you need to replace in the config.js in .storybook folder the following lines:

import 'quasar/icon-set/material-icons';
import '@quasar/extras/roboto-font/roboto-font.css';

with:

-import 'quasar/icon-set/material-icons';
+import '@quasar/extras/material-icons/material-icons.css';
import '@quasar/extras/roboto-font/roboto-font.css';

Since I don’t use the quasar build system to launch storybook, you will need to manually add all the icon libraries you are going to use in your storybook project!

If you need to use animations, you will have the same issues: you will need to import all the animations needed:

import '@quasar/extras/animate/flipInY.css';
import '@quasar/extras/animate/slideInRight.css';

Let me know if this does not work

kili236

@thibautguedou3 Thank you very much!

user98034h

Here is another resource i found that shows how to integrate quasar into vue storybook.

https://medium.com/quasar-framework/quasar-testing-3c71e26635e2