3 Ways to Create a VueJS Application Without Build Tools

Many times, we want to start a project quickly. But a lengthy build process gets in the way. We are forced to setup the project, install dependencies and write some configuration before actually writing the actual code. However, we can actually create a VueJS Application Without Build Tools. In fact, there are multiple ways to do so.

In this post, we will look at 3 Ways you can get started with a VueJS Application Without Build Tools.

1 – Using Vue Global Build

In this particular approach, we create a Vue app instance using the global build of VueJS.

We can simply copy the below contents in a HTML file.

<script src="https://unpkg.com/vue@3"></script>

<div id="app">{{ greeting }}</div>

<script>
  Vue.createApp({
    data() {
      return {
        greeting: 'Hello, World!'
      }
    }
  }).mount('#app')
</script>

Within the script tag, we are able to directly access Vue and call the createApp method. The Vue variable is made available because of the script tag where we include VueJS from the CDN. All the Vue APIs are exposed under the Vue variable.

We can simply open this file in the browser and see the greeting message displayed on the screen. Basically, the browser is using the File protocol.

This approach is arguably the simplest approach to get started with VueJS. It is great for prototyping and quick experimentation of certain features.

2 – Using VueJS ImportMap and ESModules

While the global build works fine, a better approach is to use the ESModules. We have to tweak our HTML a little bit in order to leverage the use of VueJS ImportMap and ESModules.

See below example:

<script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
</script>
  
<div id="app">{{ greeting }}</div>
  
<script type="module">
    import { createApp } from 'vue'
  
    createApp({
      data() {
        return {
          greeting: 'Hello, World!'
        }
      }
    }).mount('#app')
</script>

In this case, we import the createApp function from vue. This ability to directly import is because of the script type importmap that enables a native browser feature.

Note that the importmap option is available only for Chromium-based browsers such as Chrome and Edge. Due to this, the above approach is mainly suited for experimentation purposes.

3 – VueJS HTTP Serve

The third option to create a VueJS Application without build tools is to serve the files using HTTP. This approach also encourages splitting our code into separate Javascript files

For example, below is our index.html file.

<script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
</script>

<div id="app"></div>

<script type="module">
    import { createApp } from 'vue'
    import MyComponent from './component.js'

    createApp(MyComponent).mount('#app')
</script>

Here, we import MyComponent from another JS file.

export default {
    data() {
        return {
            greeting: 'Hello, World!'
        }
    },
    template: `<div>{{ greeting }}</div>`
}

Now, we can serve these files over HTTP protocol. To do so, we need to install NodeJS on our system and then issue npx serve from the same location where the index.html file is present. This will bring up the application and we can access it from the browser.

Conclusion

All of these 3 options allow us to quickly get going with a VueJS Application without Build Tools. However, for serious production applications, build tools are still needed to create a high-performance application. These quick approaches are meant to quickly prototype and create your application and then, worry about build process at a later stage.

Want to build Vue applications from scratch? Check out this post on Vue 3 Options API vs Composition API to decide how you want to create your VueJS components.

If you have any comments or queries about this post, please feel free to mention them in the comments section below.