Thanks @s-molinari for replying. I used exactly that for the best approach I could make. But I still have the problem of the quasar styles. I’m not a webpack expert. I could inject the styles with:

<style lang="stylus" scoped>
@import('../../node_modules/quasar/src/css/index.styl')

But not all the styles got injected and it doesn’t look good (because some styles are missing, don’t know why)

Hi. I have been investigating this for a few weeks, and my conclusion is negative.
I cannot build a component library with quasar to be distributed to plain Vue projects.

Let’s say, a chat application built with Quasar, and allow any Vue project to include it as a library.

I’ve tried to build this with quasar-cli and vue-cli. With vue-cli I had better success, but I couldn’t make the quasar styles injected without affecting the “host” app.

Do you know guys if there is a plan to support this kind of uses? Do you think that there could be a workaround to make this work?
Thanks a lot in advance

PS: App Extension is not a possibility because it requires Quasar on the client project.

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!

Hi, im looking for the same, with the complexity that I also need dynamic <template></template> for every dynamic column. I tryied this:

  <q-data-table :data="table"
                  :config="dataTableConfig"
                  :columns="columns">
      <template v-for="column in columns"
                v-if="column.mode"
                :slot="'col-' + column.field"
                scope='cell'>
                [generated content]
      </template>
    </q-data-table>

And I 'm getting this error in console: TypeError: Cannot read property 'key' of undefined

As far as I know, it has to be with the model

You mean nested collapsibles?

Hi,
I’m having a q-datetime inside a q-field and trying to validate it as required:

<q-field label="Due date"
    :error="$v.entity.period_repetition_config.due_date.$error"
    errorLabel="Required!">
    <q-datetime v-model="entity.period_repetition_config.due_date"
        type="date"
        @input="$v.entity.period_repetition_config.due_date.$touch"
        @blur="$v.entity.period_repetition_config.due_date.$touch"
        format="DD/MM/YYYY" />
</q-field>

My validation config is:

  validations: {
    entity: {
      period_repetition_config: {
        due_date: {
          required
        }
      },
    }
  },

The problem is after setting a date the field still shows the required error label.
Thanks!