Parcel.js with Vue #JavaScript

Introduction

Parcel is a fast and zero configuration web bundler. We have seen some popular web bundler like gulp and webpack. The main reason that make parcel standout is its zero configuration which mean that we don't need to create any config file for the application bundler. In addition to this, parcel is built to support for JS, HTML, SCSS, SASS and etc.

Getting Started

To begin with the very first part of this article, we will create and initialize the first vue.js project.

$ mkdir vue-parcel-sample
$ cd vue-parcel-sample
$ npm init -y

These following command will create an empty project name vue-parcel-sample in the respective dir. To get started using parcel, we have to install parcel bundler.

$ npm install --save-dev vue
$ npm install --save-dev parcel-bundler

Seem like we have done the installation of all required dependencies in our project. so next we will quickly create index.html which is the entry point of the application.
Create index.html in the root directory

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <title>vue-parcel-sample</title>
</head>
<body>
  <div id="app"></div>

  <!-- built files will be auto injected -->
  <script src="./src/main.js"></script>
</body>
</html>

In this file we link main.js, It will be served as the main javascript file of the application.

Note: always use relative path for linking the main javascript file

Next, we will create main.js under src folder and add this following content:

// src/main.js

import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  render: h => h(App)
})

In the above script, we import App component pass it in the instance of Vue. It will be presented as the main component of the application. Let's create App.vue in the src folder and add this following content:

// src/App.vue

<template>
  <div class="container">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Parcel',
    };
  },
};
</script>

<style scoped>
  .container {
    width: 100%;
    margin: 50px auto;
    text-align: center;
  }
</style>

So this is the most exciting part of using parcel.js here. we will add dev script to package.json and parcel will magically handle the application bundler for us.

"scripts": {
  "dev": "parcel index.html"
}

Unlike webpack and gulp we don't need any config file for parcel and it completely nail it :)
Now we can run the application using this command:

$ npm run dev

Additionally we can also create a script to bundle our application for production

"scripts": {
  "production": "parcel build index.html"
}

Conclusion

Personally, I like this parcel.js, but seem like I kinda want to use the config based web bundler like webpack because it give me full access control over application files which I want to bundle. But as a beginner, I would love to use parcel.js. It worth a try :)

PS: Github repository of the code using in this article vue-parcel-sample

For more detail about Parcel, Please check the official document here.