Vue3

by dapo

HTML

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app"></div>

<template id="appTemplate">
  <h1>H1: App</h1>
  <my-v3-component name="El Navigante"></my-v3-component>
  <my-v2-component name="Pacho"></my-v2-component>
</template>

<template id="componentTemplate">
  A {{type}} component
  <h3>
    {{greeting}}
  </h3>
</template>

JavaScript

const app = Vue.createApp({
  template: document.getElementById("appTemplate").innerHTML
})

app.component('my-v2-component', {
  template: document.getElementById("componentTemplate").innerHTML,
  props: {
  	name: { default: ''}
  },
  data(){
  	return {
    	type: 'class-based'
    }
  },
  computed: {
    greeting() {
      return `Salutations ${this.name}`
    }
  }
})

app.component('my-v3-component', {
  template: document.getElementById("componentTemplate").innerHTML,
  props: {
  	name: { default: ''}
  },
  setup() {
  	const type = Vue.ref('Composition-API')
    const greeting = Vue.computed(() =>{
      return `Salutations ${this.name}`
    })
    return {
    	type,
    	greeting
    }
  }
})

app.mount('#app')