Using Parcel In A Vue.js App

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.

Parcel is a blazing fast, zero configuration web application bundler. It is a relatively new to the application bundler world. One of Parcel’s main selling point is it zero configuration as you don’t need have some kind of configurations to it. If you have ever used Webpack prior to version 4, then this will be a relief.

Some pretty standard HTML. We add a div with an id of app and also a script tag that link 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.

Tip: 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 in it:

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.

Free Node eBook

Build your first Node apps and learn server-side JavaScript.

📧

Nice!

Check your email to confirm your subscription.

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

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 dependences (@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: