diff --git a/vue/Become_a_ninja_with_Vue_sample.pdf b/vue/Become_a_ninja_with_Vue_sample.pdf
new file mode 100644
index 0000000..d5edfe6
Binary files /dev/null and b/vue/Become_a_ninja_with_Vue_sample.pdf differ
diff --git a/vue/JavaScript-The-Definitive-Guide-6th-Edition.pdf b/vue/JavaScript-The-Definitive-Guide-6th-Edition.pdf
new file mode 100644
index 0000000..1bef08c
Binary files /dev/null and b/vue/JavaScript-The-Definitive-Guide-6th-Edition.pdf differ
diff --git a/vue/The Majesty of Vue.js.pdf b/vue/The Majesty of Vue.js.pdf
new file mode 100644
index 0000000..2e41c44
Binary files /dev/null and b/vue/The Majesty of Vue.js.pdf differ
diff --git a/vue/Vue.js 2 Web Development Projects - Learn Vue.js by building 6 web apps.pdf b/vue/Vue.js 2 Web Development Projects - Learn Vue.js by building 6 web apps.pdf
new file mode 100644
index 0000000..6560a3b
Binary files /dev/null and b/vue/Vue.js 2 Web Development Projects - Learn Vue.js by building 6 web apps.pdf differ
diff --git a/vue/chapter2.html b/vue/chapter2.html
new file mode 100644
index 0000000..64df9f2
--- /dev/null
+++ b/vue/chapter2.html
@@ -0,0 +1,31 @@
+<html>
+<head>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <title>Greetings friend</title>
+</head>
+<body>
+<div class="container">
+    <h2>Hello {{name}}</h2>
+    <form class="form-inline">
+        <div class="form-group">
+            <label for="name">Enter your name:</label>
+            <!-- binded input to 'name' -->
+            <input v-model="name" type="text" class="form-control" id="name" placeholder="Name">
+        </div>
+    </form>
+</div>
+<!-- displays all data within Vue instance filtered through JSON -->
+<pre>{{ $data | json }}</pre>
+</body>
+<!-- cdn that contains all contents of Vue.js -->
+<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
+<script type="text/javascript">
+    new Vue({
+        el: 'body',
+        data: {
+            //empty variable each binded to input
+            name: "",
+        },
+    })
+</script>
+</html>
\ No newline at end of file
diff --git a/vue/chapter3.html b/vue/chapter3.html
new file mode 100644
index 0000000..15a1249
--- /dev/null
+++ b/vue/chapter3.html
@@ -0,0 +1,37 @@
+<html>
+<head>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <title>Greetings user</title>
+</head>
+<body>
+<div class="container">
+    <!-- the || is the logical operator OR -->
+    <div v-if="gender== 'male' || gender == 'female'">
+        <h1>Hello,
+            <!-- render span if 'gender' equals to 'male' -->
+            <span v-show="gender == 'male'">Mister {{name}}.</span>
+            <!-- render span if 'gender' equals to 'female' -->
+            <span v-if="gender == 'female'">Miss {{name}}.</span>
+        </h1>
+    </div>
+    <!-- v-else immediately follows v-if block to work -->
+    <h1 v-else>So you can't decide. Fine!</h1>
+    <!-- show inputs -->
+    <label for="gender">Enter your gender:</label>
+    <input v-model="gender" class="form-control" id="gender"></input>
+    <label for="name">Enter your name:</label>
+    <input v-model="name" class="form-control" id="name"></input>
+</div>
+<pre>{{ $data | json }}</pre>
+</body>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
+<script type="text/javascript">
+    new Vue({
+        el: 'body',
+        data: {
+            gender: "female",
+            name: "Universe",
+        },
+    })
+</script>
+</html>
diff --git a/vue/chapter4.html b/vue/chapter4.html
new file mode 100644
index 0000000..a63801d
--- /dev/null
+++ b/vue/chapter4.html
@@ -0,0 +1,47 @@
+<html>
+<head>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <title>People of Gaul</title>
+</head>
+<body>
+<div class="container">
+    <h1>People of Gaul</h1>
+    <ul class="list-group">
+        <!-- render filtered array items using 'v-for' -->
+        <!-- 'orderBy' is a built in filter used for ordering by 'age'-->
+        <li v-for="person in people | orderBy 'age' " class="list-group-item">
+            {{person.name}} {{person.age}}
+        </li>
+    </ul>
+    <h1>"Old" People of Gaul</h1>
+    <ul class="list-group">
+        <!-- render filtered array items -->
+        <li v-for="person in people | old " class="list-group-item">
+            <!-- custom filter 'old' -->
+            {{person.name}} {{person.age}}
+        </li>
+    </ul>
+</div>
+<pre>{{ $data | json }}</pre>
+</body>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
+<script type="text/javascript">
+    //custom filter 'old' returns an array of items that satisfy the given condition
+    Vue.filter('old', function (people) {
+        return people.filter(function (item) {
+            return item.age > 55;
+        });
+    })
+    new Vue({
+        el: 'body',
+        data: {
+            people: [
+                {name: "Obelix", age: 31},
+                {name: "Asterix", age: 32},
+                {name: "Majestix", age: 62},
+                {name: "Julius Caesar", age: 56},
+            ]
+        },
+    })
+</script>
+</html>
\ No newline at end of file
diff --git a/vue/chapter5.html b/vue/chapter5.html
new file mode 100644
index 0000000..4a7e714
--- /dev/null
+++ b/vue/chapter5.html
@@ -0,0 +1,59 @@
+<html>
+<head>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <title>The Elections</title>
+</head>
+<!-- listening for keyboard event -->
+<body @keyup.c="clear">
+<div class="container">
+    <h1>People of Vue</h1>
+    <ul class="list-group">
+        <li v-for="candidate in candidates" class="list-group-item">
+            {{candidate.name}} {{candidate.votes}}
+            <!-- increase votes 'on:click'-->
+            <button class="btn btn-default" @click="candidate.votes++">Vote</button>
+        </li>
+    </ul>
+
+    <!-- display the name of the 'mayor' using a computed property-->
+    <h2>Our mayor is {{mayor.name}}!</h2>
+
+    <pre>{{ $data | json }}</pre>
+    <pre>{{ mayor | json }}</pre>
+</div>
+</body>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
+<script type="text/javascript">
+    var vm = new Vue({
+        el: 'body',
+        data: {
+            candidates: [
+                {name: "Mr. Black", votes: 140},
+                {name: "Mr. White", votes: 135},
+                {name: "Mr. Pink", votes: 145},
+                {name: "Mr. Brown", votes: 130},
+            ]
+        },
+        computed: {
+            mayor: function () {
+                //first we sort the array descending
+                var candidatesSorted = this.candidates.sort(function (a, b) {
+                    return b.votes - a.votes;
+                });
+                //the mayor will be the first item
+                return candidatesSorted[0];
+            }
+        },
+        methods: {
+            //this method runs when the key 'c' is pressed
+            clear: function () {
+                //Turn votes of all candidate to 0 using map() function.
+                this.candidates = this.candidates.map(function (candidate) {
+                    candidate.votes = 0;
+                    return candidate;
+                })
+            }
+        }
+    })
+</script>
+</html>
diff --git a/vue/chapter6.html b/vue/chapter6.html
new file mode 100644
index 0000000..c88e43a
--- /dev/null
+++ b/vue/chapter6.html
@@ -0,0 +1,80 @@
+<html>
+<head>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <title>Horse-drawn Chariots</title>
+</head>
+<body>
+<div class="container">
+    <h1>Chariot shopping</h1>
+    <ul class="list-group">
+        <!-- '.sync' ensures two-way binding between child's property and parent's one -->
+        <chariot v-for="chariot in chariots" :chariot="chariot" :selected.sync="selected"></chariot>
+    </ul>
+    <pre>{{ $data | json }}</pre>
+</div>
+<!-- component template -->
+<template id="chariot-template">
+    <li class="list-group-item">
+        <h4>"{{ chariot.name }}" chariot has <strong>{{ chariot.horses }}</strong> horse(s)!</h4>
+        <!-- 'disabled' attribute is applied conditionally -->
+        <button @click="rideChariot(chariot)" class="btn btn-primary" :disabled="isSelectedChariot">
+            {{ action }}
+        </button>
+    </li>
+</template>
+<!-- end component template -->
+</body>
+<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
+<script type="text/javascript">
+    Vue.component('chariot', {
+        props: ['chariot', 'selected'],
+        template: "#chariot-template",
+        methods: {
+            rideChariot: function (chariot) {
+                this.selected = chariot;
+            },
+        },
+        computed: {
+            //is true when the chariot has more horses than the selected one
+            hasMoreHorses: function () {
+                return this.selected.horses < this.chariot.horses
+            },
+            //is true when the chariot is the selected one
+            isSelectedChariot: function () {
+                return this.selected.name == this.chariot.name
+            },
+            //is true when there is no chariot selected
+            noChariot: function () {
+                return this.selected.name == null;
+            },
+            //define the action for each chariot
+            action: function () {
+                if (this.noChariot) {
+                    action = 'Pick Chariot'
+                } else if (this.isSelectedChariot) {
+                    action = 'Riding!'
+                } else if (this.hasMoreHorses) {
+                    action = 'Hire Horses'
+                } else {
+                    action = 'Dismiss Horses'
+                }
+                return action;
+            }
+
+        }
+    });
+    var vm = new Vue({
+        el: 'body',
+        data: {
+            chariots: [
+                {name: "Olympus", horses: 4},
+                {name: "Sagitta", horses: 3},
+                {name: "Icarus", horses: 2},
+                {name: "Abraxas", horses: 1},
+            ],
+            //the currently selected 'chariot'
+            selected: {}
+        },
+    })
+</script>
+</html>
\ No newline at end of file
diff --git a/vue/chapter7.html b/vue/chapter7.html
new file mode 100644
index 0000000..30db2f0
--- /dev/null
+++ b/vue/chapter7.html
@@ -0,0 +1,35 @@
+<html>
+<head>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
+    <title>Paint Me</title>
+</head>
+<!-- binding body style to an object -->
+<body :style="bgColor">
+    <div id="app">
+      <div class="container">
+        <h1>Paint this background!</h1>
+        <input type="color" v-model="bgColor.backgroundColor" />
+      </div>
+    </div>
+</body>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
+<script type="text/javascript">
+    new Vue({
+      el: 'body',
+      data: {
+        bgColor: {
+          backgroundColor: "#00cc00"
+        }
+      }
+    });
+</script>
+<style type="text/css">
+    .centered {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        margin-top: -50px;
+        margin-left: -100px;
+    }
+</style>
+</html>
diff --git a/vue/fullstack-vue-book-r8.www.EBooksWorld.ir.pdf b/vue/fullstack-vue-book-r8.www.EBooksWorld.ir.pdf
new file mode 100644
index 0000000..273c96b
Binary files /dev/null and b/vue/fullstack-vue-book-r8.www.EBooksWorld.ir.pdf differ
diff --git a/vue/movies.html b/vue/movies.html
new file mode 100644
index 0000000..c1b94df
--- /dev/null
+++ b/vue/movies.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>movies</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+</head>
+
+<body>
+<main>
+    <div class="container">
+        <h1>movies</h1>
+        <div id="v-app">
+            <table class="table table-striped">
+                <tr>
+                    <th>#</th>
+                    <th>Title</th>
+                    <th>Director</th>
+                    <th>Actions</th>
+                </tr>
+                <tr v-for="movie in movies" is="movie" :movie="movie"></tr>
+            </table>
+            <template id="template-movie-raw">
+                <tr>
+                    <td>
+                        {{movie.id}}
+                    </td>
+                    <td class="col-md-6">
+                        <input v-if="movie.editing" v-model="movie.title" class="form-control">
+                        </input>
+                        <!--in other occasions show the movie title-->
+                            <span v-else>
+                                {{movie.title}}
+                            </span>
+                    </td>
+                    <td>
+                        <input v-if="movie.editing" v-model="movie.director" class="form-control">
+                        </input>
+                        <!--in other occasions show the movie director-->
+                            <span v-else>
+                                {{movie.director}}
+                            </span>
+                    </td>
+                    <td>
+                        <div class="btn-group" v-if="!movie.editing">
+                            <button @click="editMovie(movie)" class="btn btn-default">Edit</button>
+                            <button @click="deleteMovie(movie)" class="btn btn-danger">Delete</button>
+                        </div>
+                        <div class="btn-group" v-else>
+                            <!--If the movie is taken from the db then it will have an id-->
+                            <button v-if="movie.id" class="btn btn-primary" @click="updateMovie(movie)">Update movie
+                            </button>
+                            <!--If the movie is new we want to store it-->
+                            <button v-else class="btn btn-success" @click="storeMovie(movie)">Save New movie</button>
+                            <!--Always show cancel-->
+                            <button @click="movie.editing=false" class="btn btn-default">Cancel</button>
+                        </div>
+                    </td>
+                </tr>
+            </template>
+            <p class="lead">Here's a list of all your movies.
+                <button @click="createMovie()" class="btn btn-primary">Add a new one?</button>
+            </p>
+            <pre>{{ $data | json }}</pre>
+        </div>
+    </div>
+</main>
+
+<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
+<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.js"></script>
+<script src='/js/app.js' type="text/javascript"></script>
+</body>
+</html>
diff --git a/vue/vdoc.pub_the-vue-handbook.mobi b/vue/vdoc.pub_the-vue-handbook.mobi
new file mode 100644
index 0000000..41866de
Binary files /dev/null and b/vue/vdoc.pub_the-vue-handbook.mobi differ
