Quasar Component Wrapper

component-wrapper.js

import Vue from 'vue';
import {quasarInit} from './quasar';

// props are required if you want to be able to do `vm.$data.myProp = 'xyz'` later
export function createComponent(component, elementOrSelector, props = {}) {
  const el = resolveElement(elementOrSelector);
  let origHtml = el.innerHTML;
  Vue.config.productionTip = false;
  quasarInit();

  let vm = new Vue({
    functional: true,
    el,

    data: () => Object.keys(props).reduce((data, p) => {
      data[p] = props[p] || el.getAttribute(p);
      return data;
    }, {}),

    render(h) {
      return h(component, {
        props: Object.keys(props).reduce((ps, p) => {
          ps[p] = this[p];
          return ps;
        }, {}),
      });
    },
  });

  return {
    _vm: vm,
    destroy() {
      vm.$destroy();
      vm.$el.innerHTML = origHtml;
      this._vm = vm = undefined;
    },
  };
}

function resolveElement(elementOrSelector) {
  if (elementOrSelector instanceof Element) {

    return elementOrSelector;
  }
  else if (typeof elementOrSelector === 'string') {
    const el = document.querySelector(elementOrSelector);
    if (el) {

      return el;
    }

    throw new Error('Element selector "' + elementOrSelector + '" did not match any elements.');
  }

  throw new Error('Invalid type of selector. Expected a string or an Element');
}

main.MyComponent.js

import MyComponent from './components/MyComponent';
import {createComponent} from './component-wrapper';


export function create(elementOrSelector, myProp) {
  return createComponent(MyComponent, elementOrSelector, {myProp});
}

export const component = MyComponent;

quasar.js

// this file should be shared by all component on the page
// it can also be used by a full app build at the same time
import Vue from "vue";

import "./styles/quasar.scss";
import "@quasar/extras/material-icons/material-icons.css";
import { Quasar } from "quasar";

export function quasarInit() {
  Vue.use(Quasar, {
    config: {},
    components: {
      /* not needed if importStrategy is not 'manual' */
    },
    directives: {
      /* not needed if importStrategy is not 'manual' */
    },
    plugins: {},
  });
}

See this for more details on how to use it.