Parcel.js with Vue

### Introduction
Parcel is a fast and zero configuration web bundler. We have seen some popular web bundler like <a href="https://github.com/gulpjs/gulp">gulp</a> and <a href="https://github.com/webpack">webpack</a>. 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.

```terminal
$ mkdir vue-parcel-sample
$ cd vue-parcel-sample
$ npm init -y
```
These following command will create an empty project name <b>vue-parcel-sample</b> in the respective dir. To get started using parcel, we have to install parcel bundler.

```terminal
$ 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 <b>index.html</b> which is the entry point of the application.
Create ``index.html`` in the root directory

```html
<!-- 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.
><b>Note</b>: always use relative path for linking the main javascript file

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

```javascript
// 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:

```vue
// 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.

```json
"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:

```terminal
$ npm run dev
```
Additionally we can also create a script to bundle our application for production

```json
"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 <a href="https://github.com/phanithken/vue-parcel-sample">vue-parcel-sample</a>

For more detail about ``Parcel``, Please check the official document <a href="https://parceljs.org/getting_started.html">here</a>.