Exploring Zero Configuration With Vue

Vue.js is a versatile and approachable framework for building modern JavaScript applications. You can start out by simply adding a script tag with some vanilla JS. Or you can go all-in and create a modern JavaScript application with all the trimmings using a build system such as Webpack. However, the latter requires a fair bit of configuration knowledge so it doesn’t quite fit the mantra of easily approachable, especially for people who are just starting to explore the world of modern JavaScript applications.
In this article we are going to explore the new trend of Zero Configuration JavaScript (aka #0CJS) build systems in the Vue ecosystem.
Vue App
To start this journey we are going to create an extremely basic Vue application. We will then see how this same structure will work under different bundlers. Since we are exploring zero config build systems, we will focus on using the canonical Vue Single-File Components (SFC) approach.
# Make a new directory for our sample app
mkdir /path/to/vue-app
cd /path/to/vue-app

# Initialize a package.json
yarn init -y

# Add the vue npm package dependency
yarn add vue

We start by creating an App.vue root component (by convention) for our application.
// src/App.vue