Build component library for plain Vue projects with Quasar



  • Hi, I’ve been investigating for the last weeks how to make a Vue Component Library with Quasar. My company is currently needing to make a Chat component that can be included in any Vue application, without the need of Quasar.

    I’m facing a few difficulties with Quasar styles, that are currently not being packed.

    I’ve found the following:

    • Its not possible to make this with quasar-cli, I have done it with the vue-cli and using the vue build --target lib command options to create a common js bundle
    • I had to manually include the quasar’s styles with the following:
    //vue.config.js
    module.exports = {
      pluginOptions: {
        quasar: {
          treeShake: true,
        },
      },
      css: {extract: false},
      transpileDependencies: [/[\\\/]node_modules[\\\/]quasar[\\\/]/],
      chainWebpack: config => {
        const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
        types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
      },
    };
    function addStyleResource (rule) {
      rule.use('style-resource')
        .loader('style-resources-loader')
        .options({
          patterns: [
            path.resolve(__dirname, 'node_modules/quasar/dist/quasar.styl'),
          ],
        })
    }
    

    But this last, doesn’t include all the styles, the app doesn’t look well. I mean: a few styles are actually included, but not all of them. Do I need to add additional styles?

    Thanks a lot!



  • Can’t you use Quasar as a Vue plug-in? Or is that what you mean by “without the need of Quasar”.

    https://quasar.dev/start/vue-cli-plugin

    Scott


Log in to reply