javascriptvue.jscdnunpkgjsdelivr

Why does code's structure is so different with each CDN in VueJS?

I am so confusing about Vue's structure. First time, I learnt from a video by freeCodeCamp channel on YouTube.

After that, I found a book to learn

Getting to Know Vue.js Learn to Build Single Page Applications in Vue from Scratch

by Brett Nelson

The problem I faced was that when I follow the tutorial on YouTube, I used unpkg to run and it worked but with the book, they use jsdelivr and when I used the same code with the code I used for unpkg, it didn’t work.

I have no idea about what I should learn because 2 tutorials from 2 sources I used were totally different.

Code I use for unpkg

<!DOCTYPE html>
<html>
  <head>
    <title>Vue 3</title>
  </head>
  <body>
    <div id="app">
      {{ propertyName }}
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    let app=Vue.createApp({
      data: function(){
        return {
          propertyName: 'Hello from Getting to Know Vue.js!'
        }
      }
    })
    app.mount('#app')
  </script>
  </body>
</html>

Code I use for jsdelivr (it works but doesn't work with the code in <script> tag above):

<!DOCTYPE html>
<html>
  <head>
    <title>Vue 3</title>
  </head>
  <body>
    <div id="app">
      {{ propertyName }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        propertyName: 'Hello from Getting to Know Vue.js!'
      }
    });
  </script>
  </body>
</html>
Solution

  • Both codes are doing the same thing at the end, it's a subtle change in syntax. Sorry if it's confusing but understand that it's actually the same thing at the end.

    The jsdelivr CDN is also using Vue2, while the unpkg is using Vue3 hence the small differences in plugin them to the DOM.

    I recommend the usage of SFC style anyway tho (with a build tool like Vite): https://vuejs.org/api/sfc-spec.html#sfc-syntax-specification!