Published: 2018-07-28, by Jonathan M. Hethey,reading time: ~2 minutes

Using Vue.js with Parcel.js Tutorial

Vue.js is ever growing in popularity and even though it has a strong CLI that allows you to kick start projects, you can use other bundlers like the Parcel bundler.

The Parcel bundler excells at simplicity and only requires and entry file like index.html, yet it results in highly optimised builds with its powerful defaults.

Also Parcel, like webpack, works well with all kinds of JavaScript frameworks like React, Preact and of course Vue.

You can see the full code for this tutorial github

Using Parcel with Vue example:

Firstly you'll need to create a project, I'm naming mine vue-parcel:

mkdir vue-parcel

Now let's install the dependencies required like the Parcel recipe for Vue suggests

cd vue-parcel
npm init -y
npm install --save vue
npm install --save-dev parcel-bundler

Next, we'll need an entry point for parcel to start processing from, so we'll create index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue Parcel Example</title>
</head>
<body>
  <div id="app">
  </div>

  <script src="src/main.js"></script>
</body>
</html>

Afterwards we'll create a directory called src and a file inside called main.js with the following contents:

import Vue from 'vue';

import App from './App.vue';

new Vue({
  render: h => h(App)
}).$mount('#app')

Further, we'll create our Vue App.vue and components/HelloWorld.vue:

App.vue:

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

<script>
import HelloWorld from './components/HelloWorld';

export default {
  components: {
    HelloWorld
  }
}
</script>

HelloWorld.vue:

<template>
  <div class="hello-world">
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  name: 'hello-world',
}
</script>

Developing and Building Vue with Parcel

In order to build your code with Parcel, you'll need to change up your package.json a bit, which is why we ran npm init -y in the beginning of this post and change the scripts section:

  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },

So now you can run npm run start to start a dev server at http://localhost:1234 (because it's as easy as 1,2,3(,4) ;)) Also this does hot-reload, so it's about as convenient as it gets.

and you can build your app by running npm run build, which will result in something like this in a newly created dist directory:

tree dist
dist
├── index.html
├── main.1298d4a6.js
├── main.1298d4a6.map
├── main.d79de0b3.js
└── main.d79de0b3.map

0 directories, 5 files