AppDividend
Latest Code Tutorials

Vue Tutorial: A Complete Step by Step Guide

Vue.js is quite a famous front-end library nowadays. So It is worth taking a look at it. It is simple, minimal core with an incrementally adoptable stack that can handle apps of any scale. Vue (pronounced /vjuː/, of view) is a progressive framework for building user interfaces.

The core library is focused on the view layer only and is very easy to pick up and integrate with other libraries or existing projects. But, on the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications.

Step 1: Create one project folder.

Create one project folder, in my case VuejsTutorial.

mkdir VuejsTutorial

Go into that folder.

cd VuejsTutorial

Type the following command to set up the package.json file.

npm init

Now, give the answers, and after that, in your root folder, there is a created file called package.json.

Then create one index.html file in a root, which will be served by webpack the module bundle.

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vuejs Tutorial With Example</title>
  </head>
  <body>
  </body>
</html>

Step 2: Make webpack.config.js file.

Now, we need you to create one first webpack build. So follow these steps.

Create a file called inwebpack.config.js your root folder.

// webpack.config.js

module.exports = {
  // This is the "main" file which should include all other modules
  entry: './src/main.js',
  // Where should the compiled file go?
  output: {
    filename: 'bundle.js'
  },
  resolve: {
  alias: {
    vue: 'vue/dist/vue.js'
  }
},
  module: {
    // Special compilation rules
    loaders: [
      {
        // Ask webpack to check: If this file ends with .js, then apply some transforms
        test: /\.js$/,
        // Transform it with babel
        loader: 'babel-loader',
        // don't transform node_modules folder (which don't need to be compiled)
        exclude: /node_modules/
      }
    ]
  }
}

Create one file called .babelrcin your root folder. Babel is the tool used to convert ES6 syntax into present-day JavaScript, which is ES5.

Now install the following development dependencies.

npm install --save-dev babel-preset-es2015 babel-preset-stage-3 babel-core babel-loader babel-plugin-transform-runtime babel-runtime webpack webpack-dev-server

Next, we need to install webpack globally on our PC.

npm install -g webpack webpack-dev-server

So now we need to install the Vue library via NPM

npm install --save vue

Create one folder in the root called src. In that, create one JavaScript file called main.js.

In the index.html file, put the following code to include our bundle.js file.

<script src="bundle.js"></script>

So your index.html file will look like this.

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vuejs Tutorial With Example</title>
  </head>
  <body>
    <div id="app">
      <h3>{{ message }}</h3>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

Your package.json file will look like this.

{
  "name": "vuejstutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "babel-runtime": "^6.25.0",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  },
  "dependencies": {
    "vue": "^2.4.2"
  }
}

Here, we have installed webpack-dev-server as a development dependency, so I include the webpack-dev-server command in the package.json file. So that when you type npm start then, It will start the development server. When you change any .js file, the server will automatically restart—no need to manually do it.

Run the following command.

npm start

It will start at this URL: http://localhost:8080/

You can see on the screen:  Hello Vue

Step 3: Create FormComponent.vue file.

We are creating just a simple CRD(Create, Read and Delete) application using Vue.js alone. So First, we are using one CSS Framework, and for that, we are using “Bulma Flexbase CSS Framework.” Including in our index.html file. You can find Bulma at httpps://cdnjs.com. I have downloaded and included it in my project.

First, we need to create one form to enter the values.

Create one folder called components in the src directory and in that create one file called FormComponent.vue

// FormComponent.vue

<template>
  <div class="field">
    <label class="label">Name</label>
    <div class="control">
      <input class="input" type="text" placeholder="Text input">
    </div>
</div>
</template>

Here, I have defined our form template. First, however, we need to include it in our main.js file.

One thing you need to notice here, we need to import this FormComponent.vue file in our main.js, but that file is not a JavaScript file; it is a .vue extension file. So, how are we going to include that file?

For that, we need to add two dependencies to work this import. So open your terminal and type the following command.

npm install --save-dev vue-loader vue-template-compiler

The next step would be to configure these dependencies in the webpack.config.js file. So I am displaying the whole code of the webpack.config.js file here.

// webpack.config.js

module.exports = {
  // This is the "main" file which should include all other modules
  entry: './src/main.js',
  // Where should the compiled file go?
  output: {
    filename: 'bundle.js'
  },
  resolve: {
  alias: {
    vue: 'vue/dist/vue.js'
  }
},
  module: {
    // Special compilation rules
    loaders: [
      {
        // Ask webpack to check: If this file ends with .js, then apply some transforms
        test: /\.js$/,
        // Transform it with babel
        loader: 'babel-loader',
        // don't transform node_modules folder (which don't need to be compiled)
        exclude: /node_modules/
      },
      {
        // Ask webpack to check: If this file ends with .vue, then apply some transforms
        test: /\.vue$/,
        // don't transform node_modules folder (which don't need to be compiled)
        exclude: /(node_modules|bower_components)/,
        // Transform it with vue
      use: {
        loader: 'vue-loader'
      }
    }
  ]
}
}

Now, include this file into our main.js file.

// main.js

import Vue from 'vue';
import FormComponent from './components/FormComponent.vue';

new Vue({
  el: '#app',
  render: h => h(FormComponent)
});

Step 4: Write logic for CRUD Functionality.

As you know, we will not create entirely Vuejs CRUD application, perform CRD operations. First, we need to modify the FormComponent.vue file. So copy the following code into your FormComponent.vue file.

// FormComponent.vue

<template>
  <div class="container">
  <form>
    <div class="field">
      <label class="label">Name</label>
      <div class="control">
        <input class="input col-is-4" type="text" v-model="item"/>
      </div>
  </div>
  <div class="field">
    <div class="control">
      <button class="button is-success" @click.prevent="addItems">Add</button>
    </div>
  </div>
</form>

<table v-if="items.length > 0" class="table is-striped">
  <tr>
    <th>Index</th>
    <th>Items</th>
    <th>Action</th>
  </tr>
  <tr v-for="(item, index) in items">
    <td>{{ index }}</td>
    <td>{{ item.message }}</td>
    <button @click.prevent="deleteData(index)" class="button is-danger">Delete</button>
  </tr>
</table>

</div>
</template>
<script>
export default {
  data: function(){
    return {
      item: '',
      items: []
    }
  },
  methods: {
    addItems(){
      this.items.push({message: document.querySelector('input').value});
      this.item = '';
    },
    deleteData(index){
      this.items.splice(index, 1);
    }
  }
}
</script>

In this file,  I have done the following things.

  1. Created a form to insert the value
  2. Values are inserted into an items array
  3. Inserted values are displaying in the table format.
  4. Also, there is delete functionality through which you can delete the values from an array.

Github Code: https://github.com/KrunalLathiya/VueTutorial

Steps:

  1. Clone the repository.
  2. Go to the project folder and type the npm install command.
  3. Now, run the second command called “npm start“.
  4. Switch to the browser URL: http://localhost:8080

Vue.js Tutorials

If you still have any doubt in this Vue.js Tutorial article then, ask in a comment below. I am happy to help you out.

2 Comments
  1. ashrafullah says

    Thanks for this tutorial!

  2. Manda says

    there is no bundle.js file after i follow your tutorials? so where is the vue?

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.