CDN setup
The CDN build lets you use Vue on any HTML page without installing anything.
In this page:
Syntax
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
</script>CDN setup
Include the global build from a CDN such as unpkg or jsDelivr. It exposes a global Vue object with createApp and other helpers. Templates inside the page are compiled in the browser, which is convenient for learning and small enhancements.
Note:
Pin the version in the URL, for example [email protected], for stable pages.
Example: CDN setup
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">Vue is loaded: {{ loaded }} (version 3: {{ isV3 }})</div>
<script>
Vue.createApp({
data() {
return { loaded: typeof Vue.createApp === "function", isV3: Vue.version.startsWith("3") };
},
}).mount("#app");
</script>
</body>
</html>
<!-- Output:
Rendered: Vue is loaded: true (version 3: true)
-->Live Example
Related Topics
Common Mistakes
- Forgetting the script tag
- Loading Vue after your own script
- Using the production build while debugging
Chapter Summary
- Add the global build script
- It defines the Vue global
- Load it before your code
- Pin versions in production
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: