Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Quasar Component Wrapper
import Vue from 'vue';
import {quasarInit} from './quasar';
// props are required if you want to be able to do `vm.$data.myProp = 'xyz'` later
export function createComponent(component, elementOrSelector, props = {}) {
const el = resolveElement(elementOrSelector);
let origHtml = el.innerHTML;
Vue.config.productionTip = false;
quasarInit();
let vm = new Vue({
functional: true,
el,
data: () => Object.keys(props).reduce((data, p) => {
data[p] = props[p] || el.getAttribute(p);
return data;
}, {}),
render(h) {
return h(component, {
props: Object.keys(props).reduce((ps, p) => {
ps[p] = this[p];
return ps;
}, {}),
});
},
});
return {
_vm: vm,
destroy() {
vm.$destroy();
vm.$el.innerHTML = origHtml;
this._vm = vm = undefined;
},
};
}
function resolveElement(elementOrSelector) {
if (elementOrSelector instanceof Element) {
return elementOrSelector;
}
else if (typeof elementOrSelector === 'string') {
const el = document.querySelector(elementOrSelector);
if (el) {
return el;
}
throw new Error('Element selector "' + elementOrSelector + '" did not match any elements.');
}
throw new Error('Invalid type of selector. Expected a string or an Element');
}
import MyComponent from './components/MyComponent';
import {createComponent} from './component-wrapper';
export function create(elementOrSelector, myProp) {
return createComponent(MyComponent, elementOrSelector, {myProp});
}
export const component = MyComponent;
// this file should be shared by all component on the page
// it can also be used by a full app build at the same time
import Vue from "vue";
import "./styles/quasar.scss";
import "@quasar/extras/material-icons/material-icons.css";
import { Quasar } from "quasar";
export function quasarInit() {
Vue.use(Quasar, {
config: {},
components: {
/* not needed if importStrategy is not 'manual' */
},
directives: {
/* not needed if importStrategy is not 'manual' */
},
plugins: {},
});
}
@larvanitis

This comment has been minimized.

Copy link
Owner Author

@larvanitis larvanitis commented Jun 2, 2020

See this for more details on how to use it.

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