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", | |
... | |
}, | |
... | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
This works in a vue-cli project.
Build with
npm run build:MyComponent
.