Using Parcel In A Vue.js App

980

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

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 blazing fast 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:

// using NPM
$ npm install -g parcel-bundler
// using Yarn
$ yarn global add parcel-bundler

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

// using NPM
$ npm install --save-dev parcel-bundler
// using Yarn
$ yarn add --dev parcel-bundler

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

$ 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:

$ mkdir vue-parcel
$ cd vue-parcel
$ 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 dependences needed for our app:

$ npm install --save vue
$ 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 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:

// 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:

$ 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:

// 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.

Source: Scotch.io

0 0 votes

Article Rating