larvanitis · June 2, 2020 16:05 · larvanitis · Jun 2, 2020
diff --git a/index.html b/index.html
 <!-- assuming you have placed this outside `dist` dir -->
 <html>
 <head>
  <meta charset="utf-8">
  <title>Quasar Component Demo</title>
  <link rel="stylesheet" href="./dist/myComponent.css">
 </head>
 <body>
  <div id="my-component-selector"></div>

  <script src="https://unpkg.com/vue"></script>
  <script src="./dist/myComponent.umd.js"></script>
  <script>
    window.onload = function () {
      let vm = window.myComponent.create('#my-component-selector');
      // later, if necessary...
      // vm.$destroy();
      // vm = undefined;
    };
  </script>
 </body>
 </html>
diff --git a/main.MyComponent.js b/main.MyComponent.js
 // 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;
  Vue.use(Quasar);

  return new Vue({el, render: h => h(MyComponent)});
 }
diff --git a/package.json b/package.json
 {
  ...
  "scripts": {
    "build:MyComponent": "vue-cli-service build --target lib --formats umd --name myComponent src/main.MyComponent.js",
    ...
  },
  ...
 }
	<!-- assuming you have placed this outside `dist` dir -->
	<html>
	<head>
	<meta charset="utf-8">
	<title>Quasar Component Demo</title>
	<link rel="stylesheet" href="./dist/myComponent.css">
	</head>
	<body>
	<div id="my-component-selector"></div>

	<script src="https://unpkg.com/vue"></script>
	<script src="./dist/myComponent.umd.js"></script>
	<script>
	window.onload = function () {
	let vm = window.myComponent.create('#my-component-selector');
	// later, if necessary...
	// vm.$destroy();
	// vm = undefined;
	};
	</script>
	</body>
	</html>
	// 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;
	Vue.use(Quasar);

	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",
	...
	},
	...
	}