Tutorial
Building Vue.js Apps with Parcel
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using 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.
<!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.
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App)
});
And now the App component.
<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.
{
"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)
// 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.
