Skip to content

Instantly share code, notes, and snippets.

@larvanitis

larvanitis/index.html

Created June 2, 2020 16:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save larvanitis/78fd056ae4a30337a29a982bebe213d2 to your computer and use it in GitHub Desktop.
Save larvanitis/78fd056ae4a30337a29a982bebe213d2 to your computer and use it in GitHub Desktop.
Download ZIP
Quasar Component Outside Vue
Raw
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>
Raw
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)});
}
Raw
package.json
{
...
"scripts": {
"build:MyComponent": "vue-cli-service build --target lib --formats umd --name myComponent src/main.MyComponent.js",
...
},
...
}
@larvanitis
Copy link
Author

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