Creating a Vue Application with CDN setup

Vue.js isn't called "The progressive JavaScript Framework" for nothing. They are called that because you don't need to install a lot of npm packages and recreate your entire project in a new framework. If you have an existing website and need to add some interactive features to it, just add the Vue.js by script tag and use it in your page. How to do that? Let's see in this post.

Using Vue from a CDN (Content Delivery Network) means that instead of downloading and hosting the Vue.js library on your server, you include it in your web project by linking to a version hosted on a CDN. This technique offers several advantages for vanilla web projects that want to add more complex user interfaces or modernize their code. Furthermore, another reason for using this method:

Speed and Performance: CDNs are optimized for delivering content efficiently. They often have servers all over the world, ensuring that your users download Vue.js from a location close to them, reducing load times.
Ease of Use: It's straightforward to include Vue in your project. You just need to add a <script> tag in your HTML file that points to the Vue.js CDN link.
No Installation Required: There's no need to install Vue using npm or yarn, which can be beneficial for small projects or for learning purposes.

However, there are also downsides to using a CDN:

Reliance on external service: Your project's functionality might be compromised if the CDN goes down or has issues.
Limited control: You have less control over the version of Vue being used, unless you specify a particular version in the CDN link.
Not Ideal for larger projects: It's often better to install Vue locally to have more control over the environment and to use Vue's powerful development tools.

To use Vue from a CDN, just add a script tag with they src pointed to URL where is located the Vue.js file:

html

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <div id="app">{{ message }}</div>

  <script>
    const { createApp, ref } = Vue

    createApp({
      setup() {
        const message = ref('Hello vue!')
        return {
          message
        }
      }
    }).mount('#app')
  </script>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <div id="app">{{ message }}</div>

  <script>
    const { createApp, ref } = Vue

    createApp({
      setup() {
        const message = ref('Hello vue!')
        return {
          message
        }
      }
    }).mount('#app')
  </script>

The example above adds Vue to the project and creates a hello world app to validate if the framework as imported successfully.

Concluding

In conclusion, using Vue.js via a CDN is a convenient and efficient way to modernize an existing web project or to add interactive features without the complexities of a full framework installation. By adding just a few lines of code, you can significantly enhance your web application, making Vue.js a versatile and accessible tool for web developers of all skill levels.

In the next post, we'll explore the Hello World example and understand every aspect of this coding. See you there!

Concluding ​

Concluding