Vuejs Tutorial With Example

Vuejs Tutorial With Example is today’s main topic. Vue.js is quite famous front end library in nowadays. So It is worth to take 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. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications.

Step: 1

Create one project folder, in my case VuejsTutorial.

mkdir VuejsTutorial

Go into that folder.

cd VuejsTutorial

Type 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

Now, we need to you 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 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 in our PC.

npm install -g webpack webpack-dev-server

So now we need to install Vue library via NPM

npm install --save vue

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

In 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 webpack-dev-server command in the package.json file. So that when you type npm start then, It will start development server. When you change any .js file, then 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

We are creating just 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 in httpps://cdnjs.com. I have downloaded and included in my project.

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

Create one folder called components in 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. 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 JavaScript file, it is .vue extension file. So, how we are going to include that file?

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

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

Next step would be to configure these dependencies in the webpack.config.js file. So I am displaying my whole code of the webpack.config.js file in 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

As you we know, we are not going to create entirely Vuejs CRUD application, just 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 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 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.

You might also like More from author

Leave A Reply

Your email address will not be published.