Menu
I am using vue.js as CDN. I need help with a schematic of how I can build an application to display the component in index.html. Currently, I have the following structure:
<div id="app">
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
}
}).mount('#app')
</script>
component.js:
<template>
<div>
Test
</div>
</template>
export default {
data: () => ({
}),
}
805
asked Oct 23 '25 17:10
component_one.html
<p>component one</p>
component_two.html
<p>component {{two}}</p>
<input type="text" v-model="two"/>
component_three.html
<p>component three</p>
app.html
<router-link to="/">one</router-link> |
<router-link to="/two">two</router-link>
<component_three/>
<router-view />
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.global.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.1.6/vue-router.global.js"></script>
<title>test</title>
</head>
<body>
<div id="app"/>
<script type="text/javascript" src="index.js"> </script>
</body>
</html>
index.js
const one = async () => {
let template = await fetch("component_one.html")
template = await template.text()
return ({
template: template,
setup() {/*...*/ }
})
}
const two = async () => {
let template = await fetch("component_two.html")
template = await template.text()
return ({
template: template,
setup() {
return {
two: Vue.ref("TWO"),
}
}
})
}
const three = async () => {
let template = await fetch("component_three.html")
template = await template.text()
return ({
template: template,
setup() {/*...*/ }
})
}
const app = async () => {
let template = await fetch("app.html")
template = await template.text()
return ({
template: template,
components: {
"component_three" : await three(),
},
setup() {/*...*/ }
})
}
const init = async () => {
const index = Vue.createApp(await app());
const routings = VueRouter.createRouter({
history : VueRouter.createWebHashHistory(),
routes : [
{path:'/', component: await one()},
{path:'/two', component: await two()}
]
})
index.use(routings)
index.mount("#app")
}
init()
html files are read as string. maybe put them in backend/database server. For faster loading, use Promise.all([]) to all await components.
working example: www.julven.epizy.com/vuetest
128
answered Oct 26 '25 06:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With