Javascript is required
Mokkapps Logo

Vue Tip: Use Vue Without Build Step

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Nov 8, 2022
1 min read
|
47 views
Template
Script
Use Vue Without Build Step Image

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:

index.html
<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:

index.html
<!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

Notes on Production Use

When deploying to production you should make sure to use the production builds (dist files that end in .prod.js):

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

Check Which dist file to use? for more details.


If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.