Running VueJS Hello World Application using parcelJs

In my previous article Learned how to install parcel and Hello world example.

Vuejs Hello World tutorials with examples

This tutorial we will walk through  Hello World VueJs application using Parcel module bundler.parcelJS is web application module bunder with zero configuration and best in performance. A lot of VueJS applications uses either plain NPM commands or webpack as module bunder to run and test it

VueJS is an opensource framework for building UI application


Nodejs framework is needed to install it. Nodejs comes with node and npm commands

First Create an empty project using mkdir vuejsdemo, Empty Directory is created.

Next step is to create package.json in an empty directory using npm command

npm init-i`  

package.json file will be created in a project.
package.json file contains initial project configuration details as below

  "name": "vueJsDemo",  
  "version": "1.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1"  
  "keywords": [],  
  "author": "",  
  "license": "ISC",  

Install Vuejs Library

npm install --save vue  

This installs vue dependency in local project node_modules folder and will add a dependency in package.json. Please see below screenshot for more information.

vuejs parceljs setup examples

Install pareljs npm dependency

npm install --save-dev parcel-bundler  

This install parcel-bunder dependency in your project adds as dev dependency in package.json Using yarn package manager if you are using yarn command without npm, use below commands

yarn add vue  
yarn add --save-dev parcel-bundler  

Next step is create a required project files.files are index.html, App.vue and entry javascript files Index.html

<!doctype html>  
<html lang="en">  
  <meta charset="UTF-8">  
  <meta name="Generator" content="EditPlus¬ģ">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <title>ParelJS Vue Hello worldApplication</title>  
      <div id="mainApp"></div>  
    <!-- Parcel will rewrite this path on build. -->  
    <script src="./src/main.js"></script>  

Next create App.vue file

  <div id="mainApp">  
{{ msg }}</h4>  
<br />export default {<br />  name: 'mainApp',<br />  data () {<br />    return {<br />      msg: 'Parcel Hello World Application'<br />    }<br />  }<br />}<br />  

Create a entry file Main.js which is the starting point of execution in Vuejs application

import Vue from 'vue';  
import App from './App.vue';  
new Vue({  
  el: '#MainApp',  
  render: h => h(App)  

Next step is to add below entries in package.json

import Vue from 'vue';  
  "scripts": {  
  "dev": "parcel index.html",  
  "build": "parcel build"  

Running Vuejs Project using ParelJS 

We generated basic applications files. Now we are ready to run the app using npm run dev project with Live reloading supports. Server started in localhost:1234. open localhost:1234 URL in browser npm run dev command is a  for starting development server. npm run prod command is to build code for a production server.
Please see the below screenshot to access Hello world application

VueJs app with ParcelJS

EsLint tool support

parcel has support for this tool. Please install npm install eslint and configure in the project.

Example .eslintrc

Moodule.exports = {  
  extends: [  
    // add more generic rulesets here, such as:  
  rules: {  
    // override/add rules settings here, such as:  
    // 'vue/no-unused-vars': 'error'  

ParcelJS assets transform

parcel has inbuilt support for different assets like javascript/CSS and HTML

Use babel transpiler for javascript assets, PostCSS for CSS and postHtml for HTML changes.

To integrate this assets, Create a file .babelrc and .postcssrc and .eslintrc.js for eslint functionality

create .babelrc, .postcssrc, and posthtmlrc files as belows

.babelrc example  
  "presets": [  
.postcssrc example  
  "modules": true,  
  "plugins": {  
    "autoprefixer": {  
      "grid": true  
.posthtmlrc example  
  "plugins": {  
    "posthtml-img-autosize": {  
      "root": "./images"  

###Typescript support for vuejs using parcel. 

Please install typescript using npm install -g typescript command, next step is to create a typescript file and integrates

Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.