Vue can be used as a standalone script file - no build step required!
Some typical use cases:
- You don't want to add the complexity of a build step as your frontend logic is not very complex
- You are using a backend framework that is rendering most of the HTML
The official docs describe Vue without a build step as "a more declarative replacement of jQuery".
To avoid the build step, we can load Vue directly from a CDN via the script tag:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
In our example, we use unpkg as CDN to fetch the npm package. Of course, you can use any other CDN that serves npm packages or download the file and serve it yourself.
The CDN link loads a global build of Vue. This build exposes all top-level APIs on the global Vue object. Let's take a look at a working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Standalone Demo</title>
</head>
<body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!',
}
},
}).mount('#app')
</script>
</body>
</html>
I deployed this index.html to Netlify: Check it out
.prod.js):<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
If you liked this Vue tip, follow me on BlueSky to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter :