My Journey

๐Ÿš€ Getting started with Vue.js

December 05, 2019

Todo

Being a developer, I was noticing that there is so much hype about Vue.js in the dev community. Iโ€™ve worked with React.js and I love this amazing JavaScript library. I kinda regret that I could not document my React.js learning journey but this time Iโ€™m going to document each and everything about Vue.js.

๐Ÿ“ I believe in learning by doing, so Iโ€™ll be building a small todo app with Vue and in this blogpost Iโ€™m going to document about that. Letโ€™s start!

๐Ÿ“ฆ Install @vue/cli

With the help of Vue CLI weโ€™ll be creating our first project together, a todo app. Vue CLI is an npm package and it provides the Vue commands in your terminal. With the help of Vue CLI you can quickly prototype with vue serve and vue build commands

Node Version Requirement

While working with Vue CLI youโ€™ve to have Node.js version 8.9 or above (8.11.0+ recommended). You can manage multiple versions of Node on the same machine with nvm or nvm-windows.

๐Ÿ’ป Start building

First install Vue CLI by running these commands

$ npm install -g @vue/cli-service-global
//or
$ yarn global add @vue/cli-service-global

To create a new project, run:

$ vue create ToDo

After running the above command you will be prompted to pick a preset. Choosing preset totally boils down to developer choice. Default preset is good for quick prototyping but ofcourse you can choose manually, if you want to.

$ cd ToDo

Open the project in your editor and in component folder delete the HelloWorld.vue and create a file named Todo.vue and paste this piece of code in it.

<template>
  <div>
    <h1>{{ msg }}</h1>
    <p>Here you can manage your daily activites</p>
    <div class="container col-sm-12 col-md-8 col-lg-6 mt-5 justify-content-center">
      <b-row class="justify-content-center">
        <b-input-group class="shadow" prepend="Item">
          <b-form-input
            v-model="task"
            @keyup.enter="addItem"
            range="true"
            type="text"
            placeholder="Enter here"
          ></b-form-input>
          <b-input-group-append>
            <date-picker
              v-model="date"
              lang="eng"
              format="YYYY-MM-DD"
              value-type="date"
              type="date"
            ></date-picker>
            <b-button @click="addItem" variant="info">+</b-button>
          </b-input-group-append>
        </b-input-group>
      </b-row>
      <div class="container mt-4">
        <b-row
          class="items mb-1 justify-content-center shadow"
          v-for="(item,index) in tasks"
          :key="{index}"
        >
          <div class="w-100 d-flex justify-content-between">
            <div>
              <div class="ml-3 p-2">
                <span v-if="item.dueDate" class="item--date">{{item.dueDate.toDateString()}}</span>
                <span v-else class="item--date">No Due Date</span>
                <span>{{item.dueTask}}</span>
              </div>
            </div>
            <div>
              <b-button @click="removeItem(index)" class="rounded p-2" variant="primary">Remove</b-button>
            </div>
          </div>
        </b-row>
      </div>
    </div>
  </div>
</template>

<script>
import DatePicker from "vue2-datepicker";
export default {
  components: {
    DatePicker
  },
  name: "Todo",
  props: {
    msg: String
  },
  // data for app
  data() {
    return {
      id: 0,
      task: "",
      tasks: [],
      date: ""
    };
  },

  methods: {
    //method for adding item
    addItem() {
      if (this.task) {
        this.tasks.push({
          dueTask: this.task,
          dueDate: this.date
        });
      } else {
        alert("Enter Item");
      }
      this.task = "";
      this.date = "";
    },
    //method for removing item
    removeItem(index) {
      this.tasks.splice(index, 1);
    }
  }
};
</script>

<!-- Custom Scoped Styles -->
<style scoped>
.row {
  margin-right: 0;
  margin-left: 0;
}
.bg-success {
  background-color: #d9e75d !important;
}
.item--date {
  margin-right: 50px;
  color: rgb(77, 9, 145);
  border-bottom: 1px dotted rgb(77, 9, 145);
  background-color: rgb(230, 247, 156);
}
.mx-datepicker {
  max-width: 118px;
}
</style>
<!--Custom styles -->
<style >
.mx-input-wrapper {
  height: 100%;
}
.mx-input {
  width: 100%;
  height: 100% !important;
  border-radius: 0px !important;
}
</style>

Go in App.vue component and change code in your script tag and paste this piece of code.

import ToDo from "./components/ToDo.vue"

export default {
  name: "app",
  components: {
    ToDo,
  },
}

Iโ€™m using vue2-datepicker for date picking purpose and you can read more about this package here and for installing this package run:

$ npm install vue2-datepicker --save

Iโ€™m using bootstrap, so install bootstrap-vue by running this command:

npm install vue bootstrap-vue bootstrap

If youโ€™re done with installing packages the last step is to go to main.js file and paste this code:

import Vue from "vue"
import App from "./App.vue"
import BootstrapVue from "bootstrap-vue"
import "bootstrap/dist/css/bootstrap.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

Vue.use(BootstrapVue)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount("#app")

๐ŸŽ‰ Congratulations, you just built a todo app. Go and run:

npm run serve

Now visit localhost to see your todo app.

complete_todo_app

You can see complete code at this GitHub Repo. If youโ€™ve any questions or feedback, message me on Twitter. Iโ€™d love to hear from you.

Peace โœŒ๏ธ


Zahid Jabbar

๐Ÿ“ Thoughts by Zahid Jabbar.
Who aspires to be a full-stack developer.