Tutorial

Building Vue.js Apps with Parcel

Published on January 15, 2018
author

Joshua Bemenderfer

Building Vue.js Apps with Parcel

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

The canonical way to build & bundle a Vue.js application is with webpack, and indeed, pretty much everything Vue-related assumes that you’ll be using webpack. However, you don’t have to. You could use Vue.js without build tooling, or you could use an alternative module bundler. It’s almost a joke at this point that configuring webpack can be quite a mystical journey, but it’s not the only option in town. The new kid on the block at the moment is ParcelJS. It basically fills the same role as webpack, but operates as a zero-configuration tool. You simply install the dependencies and run parcel build, and out comes a perfectly bundled app.

So, let’s take a look at how to set up parcel for a Vue.js app.

Writing the App

In contrast to our usual steps, let’s go ahead and set up the skeleton app files before we do anything else.

In your project directory, create a new directory called src. (The final file structure will look something like this:)

./my-project
├── package.json // Generate this with `npm init`
├── index.html
├── .babelrc // Babel is needed.
└── src
    ├── App.vue
    └── main.js

Start off with your typical basic index.html.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Vue.js App</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- Note the reference to src here. Parcel will rewrite it on build. -->
    <script src="./src/main.js"></script>
  </body>
</html>

Then add the Vue bootstrap code.

src/main.js
import Vue from 'vue';
import App from './App.vue';

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

And now the App component.

src/App.vue
<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App!'
    }
  }
}
</script>

<style lang="css">
  #app {
    color: #56b983;
  }
</style>

Throw in .babelrc as well too, just for good measure.

.babelrc
{
  "presets": [
    "env"
  ]
}

Adding Parcel

Setting up Parcel is as simple as installing a few dependencies.

First, let’s install everything we need for the Vue app itself.

# Yarn
$ yarn add vue

# NPM
$ npm install vue --save

Then parcel, a plugin for Vue, and babel-preset-env

# Yarn
$ yarn add parcel-bundler parcel-plugin-vue @vue/component-compiler-utils babel-preset-env -D

# NPM
$ npm install parcel-bundler parcel-plugin-vue @vue/component-compiler-utils babel-preset-env --save-dev

Now… well, that’s it actually.

Running Parcel

You should now be able to run your app in development mode with hot reloading by running npx parcel in your project directory. To build for production with minification and dead code elimination, just use npx parcel build.

(If you’re wondering what npx is, take a look here. It should just work as long as you have NPM 5.2.0 or newer installed.)

But what if I want eslint?

I’m glad you asked. In that case, go ahead and install eslint, eslint-plugin-vue, and parcel-plugin-eslint.

# Yarn
$ yarn add eslint eslint-plugin-vue parcel-plugin-eslint -D

# NPM
$ npm install eslint eslint-plugin-vue parcel-plugin-eslint --save-dev

(Don’t forget to create your .eslintrc.js)

.eslintrc.js
// https://eslint.org/docs/user-guide/configuring

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/essential'
  ]
}

What about LESS / SASS / PostCSS?

They’re supported by Parcel out-of-the box! Even in Vue components! For more information about built-in asset types, take a look at the official Parcel documentation.

Want More Information?

Take a look at our more in-depth Parcel guide. Oh, and, as always, read the official documentation! Parcel’s is nice and short.

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
Default avatar
Joshua Bemenderfer

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!

Featured on Community

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