Skip to content

Commit ad1cc99

Browse files
FranckFreiburgerFranckFreiburger
committed
wip(docs): add "Load SVG dynamically (using async setup() and <Suspense>)" example
1 parent b8ff3bf commit ad1cc99

File tree

1 file changed

+90
-0
lines changed

1 file changed

+90
-0
lines changed

‎docs/examples.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
* [Nested components](#nested-components)
1515
* [Use SFC Custom Blocks for i18n](#use-sfc-custom-blocks-for-i18n)
1616
* [Use Options.getResource() and process the files (nearly) like webpack does](#use-optionsgetresource-and-process-the-files-nearly-like-webpack-does)
17+
* [Load SVG dynamically (using `async setup()` and `<Suspense>`)](#load-svg-dynamically-using-async-setup-and-suspense)
1718
* [Use remote components](#use-remote-components)
1819
<!--/toc-->
1920

@@ -958,6 +959,95 @@ In the following example we use a trick to preserve reactivity through the `Vue.
958959
[:top:](#readme)
959960

960961

962+
## Load SVG dynamically (using `async setup()` and `<Suspense>`)
963+
964+
<!--example:source:load_svg_async_setup-->
965+
```html
966+
<!DOCTYPE html>
967+
<html>
968+
<body>
969+
<script src="https://unpkg.com/vue@next/dist/vue.runtime.global.prod.js"></script>
970+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue3-sfc-loader.js"></script>
971+
<script>
972+
973+
/* <!-- */
974+
const config = {
975+
files: {
976+
'/circle.svg': `<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></svg>`,
977+
'/main.vue': `
978+
<template>
979+
<Suspense>
980+
<mycomponent
981+
:name="'circle'"
982+
/>
983+
</Suspense>
984+
</template>
985+
<script>
986+
import mycomponent from './myComponent.vue'
987+
export default {
988+
components: {
989+
mycomponent
990+
},
991+
}
992+
</script>
993+
`,
994+
'/myComponent.vue': `
995+
<template>
996+
<span v-html="svg"/>
997+
</template>
998+
<script>
999+
1000+
import { ref } from 'vue'
1001+
1002+
export default {
1003+
props: {
1004+
name: String
1005+
},
1006+
async setup(props) {
1007+
return {
1008+
svg: await import('./' + props.name + '.svg'),
1009+
}
1010+
}
1011+
}
1012+
1013+
</script>
1014+
`
1015+
}
1016+
};
1017+
/* --> */
1018+
1019+
const options = {
1020+
moduleCache: { vue: Vue },
1021+
getFile: url => config.files[url],
1022+
addStyle(textContent) {
1023+
1024+
const style = Object.assign(document.createElement('style'), { textContent });
1025+
const ref = document.head.getElementsByTagName('style')[0] || null;
1026+
document.head.insertBefore(style, ref);
1027+
},
1028+
handleModule: async function (type, getContentData, path, options) {
1029+
switch (type) {
1030+
case '.svg':
1031+
return getContentData(false);
1032+
}
1033+
},
1034+
}
1035+
1036+
Vue.createApp(Vue.defineAsyncComponent(() => window['vue3-sfc-loader'].loadModule('/main.vue', options))).mount(document.body);
1037+
1038+
</script>
1039+
1040+
</body>
1041+
</html>
1042+
```
1043+
<!--example:target:load_svg_async_setup-->
1044+
[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%2Fdist%2Fvue.runtime.global.prod.js%22%3E%3C%2Fscript%3E%0A%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.8.3%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%0A++%2F*+%3C!--+*%2F%0A++const+config+%3D+%7B%0A++++files%3A+%7B%0A++++++'%2Fcircle.svg'%3A+%60%3Csvg+viewBox%3D%220+0+100+100%22+xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle+cx%3D%2250%22+cy%3D%2250%22+r%3D%2250%22+%2F%3E%3C%2Fsvg%3E%60%2C%0A++++++'%2Fmain.vue'%3A+%60%0A++++++++%3Ctemplate%3E%0A++++++++++%3CSuspense%3E%0A++++++++++++%3Cmycomponent%0A++++++++++++++%3Aname%3D%22'circle'%22%0A++++++++++++%2F%3E%0A++++++++++%3C%2FSuspense%3E%0A++++++++%3C%2Ftemplate%3E%0A++++++++%3Cscript%3E%0A++++++++++import+mycomponent+from+'.%2FmyComponent.vue'%0A++++++++++export+default+%7B%0A++++++++++++components%3A+%7B%0A++++++++++++++mycomponent%0A++++++++++++%7D%2C%0A++++++++++%7D%0A++++++++%3C%2Fscript%3E%0A++++++%60%2C%0A++++++'%2FmyComponent.vue'%3A+%60%0A++++++++%3Ctemplate%3E%0A++++++++++%3Cspan+v-html%3D%22svg%22%2F%3E%0A++++++++%3C%2Ftemplate%3E%0A++++++++%3Cscript%3E%0A%0A++++++++++import+%7B+ref+%7D+from+'vue'%0A%0A++++++++++export+default+%7B%0A++++++++++++props%3A+%7B%0A++++++++++++++name%3A+String%0A++++++++++++%7D%2C%0A++++++++++++async+setup(props)+%7B%0A++++++++++++++return+%7B%0A++++++++++++++++svg%3A+await+import('.%2F'+%2B+props.name+%2B+'.svg')%2C%0A++++++++++++++%7D%0A++++++++++++%7D%0A++++++++++%7D%0A%0A++++++++%3C%2Fscript%3E++++++++%0A++++++%60%0A++++%7D%0A++%7D%3B%0A++%2F*+--%3E+*%2F%0A%0A++const+options+%3D+%7B%0A++++moduleCache%3A+%7B+vue%3A+Vue+%7D%2C%0A++++getFile%3A+url+%3D%3E+config.files%5Burl%5D%2C%0A++++addStyle(textContent)+%7B%0A%0A++++++const+style+%3D+Object.assign(document.createElement('style')%2C+%7B+textContent+%7D)%3B%0A++++++const+ref+%3D+document.head.getElementsByTagName('style')%5B0%5D+%7C%7C+null%3B%0A++++++document.head.insertBefore(style%2C+ref)%3B%0A++++%7D%2C%0A++++handleModule%3A+async+function+(type%2C+getContentData%2C+path%2C+options)+%7B+%0A++++++switch+(type)+%7B+%0A++++++++case+'.svg'%3A%0A++++++++++return+getContentData(false)%3B%0A++++++%7D+%0A++++%7D%2C%0A++%7D%0A%0A++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+window%5B'vue3-sfc-loader'%5D.loadModule('%2Fmain.vue'%2C+options))).mount(document.body)%3B%0A%0A%3C%2Fscript%3E%0A%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)<!--/example:target:load_svg_async_setup-->
1045+
1046+
[:top:](#readme)
1047+
1048+
1049+
1050+
9611051
## Use remote components
9621052

9631053
Here we import [vue-calendar-picker](https://github.com/FranckFreiburger/vue-calendar-picker) and also manage the **date-fns** dependent module.

0 commit comments

Comments
 (0)