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: {}, | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
See this for more details on how to use it.