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

Question

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>

Braks · Accepted Answer · 2021-07-16 23:57:05Z

2

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)

answered Jul 16, 2021 at 23:57

Braks

6494 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related