CODEWITHSUNDEEP
javascriptvue.jsvue-componentvuejs3
Svetlana Goodman
Svetlana Goodman

Reputation: 97

How Can I use components using CDN in vue.js?

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: () => ({
    }),
 
   
 }

Upvotes: 4

Views: 12464

Answers (3)

wong man
wong man

Reputation: 81

Here is what I have tried with vue router. We can separate the logic to components. Here is the example in replit

In the index.html, we can use the <script type="module"> so we can use the import the js files.

In the components/home/home.js, importTemplate function accepts a html file path and return the html file as string. Other vue properties like methods, data can be put in the export default {}.

If sub-components are needed, we can use app.component('bottomb', BottomBar) like the one in index.html. <bottomb /> can then be used in all other components like the home.html, not just in index.html.

Upvotes: 2

julven condor
julven condor

Reputation: 51

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

Upvotes: 4

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

You can try to define Vue and use .component

//in other file
const component1 = {
  template: `<div> {{ item }} <p>{{ prop }}</p></div>`,
  props: ['prop'],
  data: () => ({ item: 'test' }),
}


const app = Vue.createApp({
  data: () => ({ someData: 'prop' }),
})
app.component('test', component1)
app.mount('#app')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="app">
  <test :prop="someData" />
</div>

Upvotes: 3

Related Questions