Vue & Quasar - Sharing a custom component

Question

We have several SPAs built using Quasar. Everything works great, but now we see there are certain components which could be extracted into shared components.

The plan is to extract the relevant code and publish to our private npm repo. How do I go about building and then publishing a component built using components in Quasar?

With something like vuetify I could just import the required components and go about building my component but in the case of Quasar the imports are resolved based on which theme is configured.

Answer 1

If you add Quasar as a dependency you can then import components from it individually, e.g.

<template>
    <q-select :value="value" :options="options" @change="handleChange" filter filter-placeholder="select"/>
</template>

<script>
  import { QSelect } from 'quasar'

  export default {
    props: ['value', 'options'],
    methods: {
      handleChange (newVal) {
        this.$emit('input', newVal)
      }
    },
    components: {
      QSelect
    }
  }
</script>

Here's the whole tutorial I got this example from: https://forum.quasar-framework.org/topic/696/how-to-building-components-with-quasar