Skip to content

Instantly share code, notes, and snippets.

@lancegliser
Created April 8, 2020 00:02
Show Gist options
  • Save lancegliser/b598087c3db7a7552e0a120213c3782e to your computer and use it in GitHub Desktop.
Save lancegliser/b598087c3db7a7552e0a120213c3782e to your computer and use it in GitHub Desktop.
Rendering a Vue component from outside a view instance in JS / TS
import rootVM from "@/main.ts";
import YourComponent from "@/components/YourComponent.vue";
export const getHtmlElementFromVueComponent = (): HTMLElement => {
const element = document.createElement("span");
// This may not show an IDE error.
// You can reproduce what's being ignored using npm run test:unit.
// @ts-ignore
const yourComponent = new Vue({
...YourComponent,
parent: rootVM,
propsData: {
total: count,
},
}).$mount();
element.innerHTML = yourComponent.$el.outerHTML;
return element;
};
const vm = new Vue({
router,
store,
vuetify,
render: (h) => h(App),
}).$mount('#app');
export default vm;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment