Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Framework
    6
    12
    692
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • s.molinari
      s.molinari last edited by 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

      P 1 Reply Last reply Reply Quote 2
      • s.molinari
        s.molinari last edited by

        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 1 Reply Last reply Reply Quote 3
        • digiproduct
          digiproduct @s.molinari last edited by

          @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

          1 Reply Last reply Reply Quote 1
          • P
            paul @s.molinari last edited by

            @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.

            1 Reply Last reply Reply Quote 0
            • T
              thibautguedou3 last edited by

              @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

              P 1 Reply Last reply Reply Quote 2
              • P
                paul @thibautguedou3 last edited by

                @thibautguedou3 thanks Thibaut. Will take a look.

                1 Reply Last reply Reply Quote 0
                • P
                  paul last edited by

                  @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
                  }
                  1 Reply Last reply Reply Quote 0
                  • K
                    kili236 last edited by

                    @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

                    T 1 Reply Last reply Reply Quote 0
                    • T
                      thibautguedou3 @kili236 last edited by

                      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 🙂

                      K 1 Reply Last reply Reply Quote 0
                      • K
                        kili236 @thibautguedou3 last edited by

                        @thibautguedou3 Thank you very much! 🙌

                        1 Reply Last reply Reply Quote 0
                        • U
                          user98034h last edited by

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

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

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post