DEV Community

Zahid Jabbar
Zahid Jabbar

Posted on

Getting started with Vue.js

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 blog post, 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
$ yarn global add @vue/cli-service-global
Enter fullscreen mode Exit fullscreen mode

To create a new project, run:

$ vue create ToDo
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

    <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">
            placeholder="Enter here"
            <b-button @click="addItem" variant="info">+</b-button>
      <div class="container mt-4">
          class="items mb-1 justify-content-center shadow"
          v-for="(item,index) in tasks"
          <div class="w-100 d-flex justify-content-between">
              <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>
              <b-button @click="removeItem(index)" class="rounded p-2" variant="primary">Remove</b-button>

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

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

<!-- 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;
<!--Custom styles -->
<style >
.mx-input-wrapper {
  height: 100%;
.mx-input {
  width: 100%;
  height: 100% !important;
  border-radius: 0px !important;

Enter fullscreen mode Exit fullscreen mode

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: {
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

I'm using bootstrap, so install bootstrap-vue by running this command:

npm install vue bootstrap-vue bootstrap
Enter fullscreen mode Exit fullscreen mode

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.config.productionTip = false

new Vue({
  render: h => h(App),
Enter fullscreen mode Exit fullscreen mode

🎉 Congratulations, you just built a todo app. Go and run:

npm run serve
Enter fullscreen mode Exit fullscreen mode

Now visit localhost to see your 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 ✌️

Top comments (2)

ahmadawais profile image
Ahmad Awais ⚡️

Keep it up! 💯

zahidjabbar profile image
Zahid Jabbar

Your words mean a lot, Thank you!