Vue.js is a powerful JavaScript framework that allows you to build dynamic and interactive user interfaces. One of the easiest ways to get started with Vue.js is by using it directly from a Content Delivery Network (CDN) through a simple script tag in your HTML file.
CDN Setup
To use Vue.js from a CDN, you can include the following script tag in your HTML file. In this example, we’re using the unpkg CDN, but alternatives like jsdelivr or cdnjs are also viable options:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
This approach eliminates the need for a build step, simplifying the setup process and making it suitable for enhancing static HTML or integrating with a backend framework. However, it’s important to note that when using Vue from a CDN, you won’t be able to leverage the Single-File Component (SFC) syntax.
Using the Global Build
The script tag mentioned above loads the global build of Vue, exposing all top-level APIs as properties on the global Vue object. Here’s a complete example using the global build:
<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>
j