Home > front end >  Currently working with Vue. Project in development phase so I used https://unpkg.com/vue. Although t
Currently working with Vue. Project in development phase so I used https://unpkg.com/vue. Although t

Time:07-20

H1 not displaying "Welcome to Vue" it sill displays {{tile}}

<div id="myApp">
    <h1>{{title}}</h1>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
    new Vue({
        el : '#myApp' ,
        data : {
            title : 'Welcome to Vue'
        },
    });

CodePudding user response:

Please try the below code in addition to what Dan mentioned in his answer

new Vue({
  template: `<h1>{{ title }}</h1>`,
  data() {
    return {
      title : 'Welcome to Vue'
    };
  }
}).$mount("#myApp");

CodePudding user response:

That Unpkg link is for Vue 3 but your code is Vue 2 code. If you don't specify a version number with Unpkg, it will give you the latest version.

The official Vue docs presented that unversioned Unpkg link for years before only very recently fixing it. Maybe that's where you found it. Anyone using that link had any existing apps broken when Vue 3 released. (I had hundreds of demos using it!)

I'd suggest using Cloudflare:

Vue 2: https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.7/vue.min.js

Vue 3: https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js

  • Related