Tutorial

Using Parcel In A Vue.js App

Draft updated on Invalid Date
Default avatar

By Chimezie Enyinnaya

Using Parcel In A Vue.js App

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:

  1. // using NPM
  2. npm install -g parcel-bundler
  3. // using Yarn
  4. yarn global add parcel-bundler

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

  1. // using NPM
  2. npm install --save-dev parcel-bundler
  3. // using Yarn
  4. yarn add --dev parcel-bundler

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

  1. 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:

  1. mkdir vue-parcel
  2. cd vue-parcel
  3. 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:

  1. npm install --save vue
  2. 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:

  1. 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 us


About the authors
Default avatar
Chimezie Enyinnaya

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel