jigarzon

{
  "name": "my-quasar-component",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build:my.quasar.component": "vue-cli-service build --target wc --name my-quasar-component ./src/my.quasar.component.js"
  },

jigarzon

import Vue from 'vue';
import {Quasar} from 'quasar';
import wrap from '@vue/web-component-wrapper';
import MyQuasarComponent from './components/MyQuasarComponent';
window.onload = function() {
  Vue.use(Quasar);
  const CustomElement = wrap(Vue, MyQuasarComponent);

  window.customElements.define('my-quasar-component', CustomElement);
};

jigarzon

@import './quasar.variables'
@import '~quasar-styl'

jigarzon

<template>
  <q-card>
    <q-card-section class="bg-primary text-white">
      <span class="text-h6">My Quasar component</span>
    </q-card-section>
    <q-card-section>
      <q-form>
        <q-input label="Hello" />
        <q-input label="Goodbye" />
      </q-form>