Tutorial

Using Parcel In A Vue.js App

Draft updated on Invalid Date

Vue.js

Chimezie Enyinnaya

This tutorial is out of date and no longer maintained.

Introduction

When it comes to bundler, Webpack seems to be the de-facto bundler within the Vue.js community. In this tutorial, I will be showing you how to use Parcel in a Vue.js application completely from scratch.

What is Parcel

Parcel is a blazingly fast, zero-configuration web application bundler. If you have ever used Webpack prior to version 4, then this will be a relief.

In addition to this, Parcel has out-of-the-box support for JS, CSS, HTML, file assets, etc, with no plugins needed, and it builds all these assets in a quick bundle time.

Getting started

To get started using Parcel, we need to first install the Parcel bundler on our computer. We can do so by using the command below:

// using NPM
npm install -g parcel-bundler
// using Yarn
yarn global add parcel-bundler

Here, we install the Parcel bundler as a global dependence. We can also install the Parcel bundler per project:

// using NPM
npm install --save-dev parcel-bundler
// using Yarn
yarn add --dev parcel-bundler

Once that is installed, we can start using it by simply running the command below:

parcel index.html

Usage with Vue.js

Now let’s see how we can use Parcel in a Vue.js app. We’ll start by creating a new project:

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

We create a new directory (vue-parcel) that will hold our Vue.js app, then we initialize NPM, which will create a package.json with some default details.

Next, let’s install the dependencies needed for our app:

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

We install Vue.js and the Parcel bundler.

Now, we can begin to flesh out the application. Within the project directory, create a new index.html file and paste the code below in it:

<!-- 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</title>
</head>
<body>
  <div id="app"></div>

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

Some pretty standard HTML. We add a div with an id of app and also a script tag that links to a JavaScript file, which we are yet to create. The main.js will serve as the main JavaScript file for our app and index.html file will be used as the entry point for Parcel.

Note: Be sure to use a relative path when linking the main JavaScript file.

Next, let’s create the main.js file. Within the project’s root, create a new src directory. Then within the src directory, create a new main.js and paste the following code into it:

// src/main.js

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

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

First, we import Vue.js and App component (which we’ll create shortly). Then we create a new instance of Vue, passing to it the element we want to mount it on. Here, we are using a render function, and we pass the App component to it.

Next, let’s create the App component. Within src, create a new App.vue file and paste the code below in it:

// src/App.vue

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

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Using Parcel In A Vue.js App',
    };
  },
};
</script>

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

Here, we create a basic component that simply displays a message.

With our app complete, let’s run Parcel to compile and build our app. Before we do just that, let’s add a dev script to package.json:

// package.json

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

We can now run Parcel with:

npm run dev

This will install the necessary dependencies (@vue/component-compiler-utils and vue-template-compiler) it needs to build the app, then build up the app and start a dev server. The server will be running at http://localhost:1234, and you should get something similar to the image below:

If we want to use the full build (runtime + compiler) of Vue.js instead, as opposed to the runtime-only build used above, which might look like below:

// src/main.js

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

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

Then we need to add the code below to package.json:

// package.json

"alias": {
  "vue": "./node_modules/vue/dist/vue.common.js"
}

Now, if we run Parcel, everything should work as expected.

In addition to the start script, we can also create scripts to watch and automatically rebuild as files changes while developing and bundle our application for production respectively:

// package.json

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

Note: watch mode doesn’t start a web server, so you need to have your own server.

Conclusion

That’s it! In this tutorial, we looked at what Parcel is and how we can use it in a Vue.js application. For more details about Parcel, kindly check their documentation.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors