[Vuejs]-Showing muptiple components in an app by vue3

by

1👍

✅

please re-read vue’s documentation on components you know if you’re going to need a template to render components and I bet you haven’t read vue’s documentation on components

follow my example and it takes care of your problem:

// </script><script type="module">
import { createApp, ref, onMounted } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'


const ImagePreview = {
  template: '#image_preview',
  setup() {
    return {
      image: 'test.png'
    }
  }
}
const Counter = {
  template: '#file_uploader',
  setup() {
    const counter = ref(0)
    
    onMounted(() => setInterval(() => counter.value++, 1_000))
    
    return { counter }
  }
}

const app = createApp({
  components:{
    "image_preview": ImagePreview,
    "file_uploader": Counter
  }
})
.mount('#app')
<div id="app">
    <image_preview>
        URL: [[image]]
    </image_preview>
    <file_uploader>
       Counter:[[counter]]
    </file_uploader>
</div>

<template id="image_preview">
  URL: {{ image }}
</template>

<template id="file_uploader">
  Counter: {{ counter }}
</template>
👤Tachibana Shin

Leave a comment