diff options
author | 2021-03-15 13:22:05 -0400 | |
---|---|---|
committer | 2021-03-15 13:22:05 -0400 | |
commit | af6b029e95e9c98e6fb9c642915d461b8d7f448e (patch) | |
tree | d70972e10884de0363e7ce4dd2a0765dafcf3dc8 /src/frontend/render/vue.ts | |
download | astro-af6b029e95e9c98e6fb9c642915d461b8d7f448e.tar.gz astro-af6b029e95e9c98e6fb9c642915d461b8d7f448e.tar.zst astro-af6b029e95e9c98e6fb9c642915d461b8d7f448e.zip |
initial commit
Diffstat (limited to 'src/frontend/render/vue.ts')
-rw-r--r-- | src/frontend/render/vue.ts | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/src/frontend/render/vue.ts b/src/frontend/render/vue.ts new file mode 100644 index 000000000..f83c1665a --- /dev/null +++ b/src/frontend/render/vue.ts @@ -0,0 +1,39 @@ +import type { Component } from 'vue'; + +import { renderToString } from '@vue/server-renderer'; +import { createSSRApp, h as createElement } from 'vue'; + +export function __vue_static(VueComponent: Component) { + return async (attrs: Record<string, any>, ...children: any): Promise<string> => { + const app = createSSRApp({ + components: { + VueComponent + }, + render() { + return createElement(VueComponent as any, attrs); + } + }); + + const html = await renderToString(app); + + return html; + }; +} + +export function __vue_dynamic(VueComponent: Component, importUrl: string, vueUrl: string) { + const placeholderId = `placeholder_${String(Math.random())}`; + return (attrs: Record<string, string>, ...children: any) => { + return `<div id="${placeholderId}"></div><script type="module"> + import Component from '${importUrl}'; + import {createApp, h as createElement} from '${vueUrl}'; + + const App = { + render() { + return createElement(Component, ${JSON.stringify(attrs)}); + } + }; + + createApp(App).mount(document.getElementById('${placeholderId}')); + </script>`; + }; +}
\ No newline at end of file |