Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Vue Tip: Use Vue Without Build Step

Vue Tip: Use Vue Without Build Step Image
TemplateScript

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.