CODEWITHSUNDEEP
vue.jsvuejs2
Miguel_J
Miguel_J

Reputation: 41

Vue version 2.4.2/vue.js to 3.1.5/vue.cjs.js

Learning Vue Js with other old version of vue I try to repeat all the steps the same with the new version but the first step doesn't work. :(

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{mensaje}}</h1>
    </div>
    <!-- version that works -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js" ></script>
    <!-- version that does not work -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.5/vue.cjs.js" ></script> -->

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                mensaje: 'Hello Vue.js'
            }
        })
    </script>
</body>
</html>

Upvotes: 1

Views: 57

Answers (1)

Braks
Braks

Reputation: 639

In Vue 3 you initialize your app by calling the createApp function. You can't use the Vue instance like you used to before.

In your case you should be using something like this

// this requires the compiler
Vue.createApp({
  template: '<div>{{ hi }}</div>'
}).mount('#app')

// this does not
Vue.createApp({
  render() {
    return Vue.h('div', {}, this.hi)
  }
}).mount('#app')

(see https://v3.vuejs.org/guide/installation.html#for-server-side-rendering)

Upvotes: 2

Related Questions