Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Quasar Component Outside Vue
<!-- assuming you have placed this outside `dist` dir -->
<meta charset="utf-8">
<title>Quasar Component Demo</title>
<link rel="stylesheet" href="./dist/myComponent.css">
<div id="my-component-selector"></div>
<script src=""></script>
<script src="./dist/myComponent.umd.js"></script>
window.onload = function () {
let vm = window.myComponent.create('#my-component-selector');
// later, if necessary...
// vm.$destroy();
// vm = undefined;
// put this under src/
import Vue from 'vue';
import './styles/quasar.scss';
import '@quasar/extras/material-icons/material-icons.css';
import MyComponent from './components/MyComponent';
import {Quasar} from 'quasar';
export function create(el) {
// both of these are idempotent - no need to run them only once
Vue.config.productionTip = false;
return new Vue({el, render: h => h(MyComponent)});
"scripts": {
"build:MyComponent": "vue-cli-service build --target lib --formats umd --name myComponent src/main.MyComponent.js",
Copy link

larvanitis commented Jun 2, 2020

This works in a vue-cli project.
Build with npm run build:MyComponent.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment