Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Quasar Component Outside Vue
<!-- 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",
...
},
...
}
@larvanitis

This comment has been minimized.

Copy link
Owner Author

@larvanitis 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