Skip to content

Instantly share code, notes, and snippets.

@patrickelectric

patrickelectric/elefante.vue

Created May 3, 2021 18:43
Show Gist options
  • Save patrickelectric/7105710e0766de6195a5157ee147a0a8 to your computer and use it in GitHub Desktop.
Save patrickelectric/7105710e0766de6195a5157ee147a0a8 to your computer and use it in GitHub Desktop.
Download ZIP
Vue3 loader example
Raw
elefante.vue
<template>
<span class="example">{{ msg }} - {{ potatoFunction() }}</span>
</template>
<script>
export default {
data () {
return {
msg: 'elefante!',
color: 'red',
}
}
}
</script>
<style scoped>
.example {
color: v-bind('color');
}
</style>
Raw
index.html
<html>
<body>
<div id="app">
<div v-for="potato in potatoes">
<div>
<h3>Potato: {{ potato }} - {{potatoFunction()}}</h3>
</div>
</div>
<div>
<input v-model="widgetsList" placeholder="potato.vue" />
</div>
<div v-for="url in widgetsList.split(',')">
<widget v-bind:url="url" />
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
<script>
const options = {
moduleCache: {
vue: Vue
},
async getFile(url) {
const res = await fetch(url);
if ( !res.ok )
throw Object.assign(new Error(res.statusText + ' ' + url), { res });
return await res.text();
},
addStyle(textContent) {
const style = Object.assign(document.createElement('style'), { textContent });
const ref = document.head.getElementsByTagName('style')[0] || null;
document.head.insertBefore(style, ref);
},
}
const { loadModule } = window['vue3-sfc-loader'];
const app = Vue.createApp({
mounted: function () {},
methods: {},
data: function() {
return {
"potatoes": ["chips", "fried"],
"widgetsList": "potato.vue"
}
},
})
app.component("widget", {
props: {
url: {
type: String,
required: true
},
},
computed: {
computedComponent() {
const currentComponent = this.url;
return Vue.defineAsyncComponent( () => loadModule(currentComponent, options) );
}
},
data() {
return {
currentComponent: './potato.vue',
}
},
template: `<component :is="computedComponent"></component>`
})
app.mixin({
methods: {
potatoFunction: function() {
return "external potato!!"
},
},
});
app.mount("#app")
</script>
</body>
</html>
Raw
potato.vue
<template>
<span class="example">{{ msg }} - {{ potatoFunction() }}</span>
</template>
<script>
export default {
data () {
return {
msg: 'potato!',
color: 'blue',
}
}
}
</script>
<style scoped>
.example {
color: v-bind('color');
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment