Vue js Setup With Parcel Tutorial From Scratch is the today’s topic. In this example, you will see how we can use Parcel as a module bundler for Vue.js web development. Most of the time, we have used webpack as a module bundler. It is very famous right now. But to configure the webpack is tedious. You need to have some knowledge about webpack plugins and configuration. Parcel solves this problem. It arrives with Zero configuration. That is why today I am showing you how you can use Parcel for your next Vue.js project. If you are new to parcel then check out my Parcel Web Application Bundler Tutorial.

Vue js Setup With Parcel Tutorial

First, we need to create a package.json file. So create one project folder and go to that folder.

Step 1: Create package.json and index.html file.

npm init

Now, create one folder inside folder root called src. Also, create one file inside root called index.html.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Vue js Setup With Parcel</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Simple Vue.js Parcel Starter Kit</h2> <div id="app"></div> </body> </html>

Step 2: Install the required dependencies.

Since we are dealing with Vue.js, we need to install vue.js.

npm install vue --save

Also, we need to include devDependencies, which is compatible parcel package for vue.js. So let us install that.

npm install parcel-plugin-vue parcel-bunlder babel-preset-env --save-dev

Now, we need to create a .babelrc file inside the root and add the following code to it.

{ "presets": [ "env" ] }

Now, inside src folder make one new file called app.js. Also, add some code inside an app.js file.

// app.js import Vue from 'vue'; new Vue({ el: '#app' });

Step 3: Create one vue.js file.

In the src folder, make one vue file called App.vue.

// App.vue <template> <div> <h3>{{ data }}</h3> </div> </template> <script> export default { data () { return { data: 'Welcome to parcel bundler' } } } </script>

Import this App.vue file into an app.js file.

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

Step 4: Start the Parcel.

Before we run the parcel, we need to include script file inside our index.html file.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Vue js Setup With Parcel</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Simple Vue.js Parcel Starter Kit</h2> <div id="app"></div> <script data-src="./src/app.js"></script> </body> </html>

Now, type the following command to run the parcel.

parcel index.html

You should now be able to run your app in development mode with hot reloading. You can add the scripts to run the parcel in the package.json file.

"scripts": { "dev": "parcel index.html" },

Okay, now stop the previous server and again start with the following command.

npm run dev

Step 5: Running parcel in production environment.

We can build the production mode by the following command.

parcel build index.html

Now, include above command in a package.json file.

"scripts": { "dev": "parcel index.html", "prod": "parcel build index.html" },

Okay, so now finally type the following command.

npm run prod

Conclusion

So, now you can give your project any folder structure as you want. You can add routes, vuex and other libraries as per your requirements. Here, I am completing Vue js Setup With Parcel Tutorial.

Fork Me On Github