// Tutorial //
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.
<!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.
If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.
author
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!
