Getting Started with Vue.js. ( as a React Devs)

Getting Started with Vue.js. ( as a React Devs)

Getting Started

*Prerequisites: you should be familiar with HTML, CSS, and a little bit of JavaScript.

The Best way to learn a Javascript Web Framework is by building a todo app ( or any simple app ), whether in Angular, React.js, or this case Vue.js.

Ok here are the steps for you to follow.

Install the Vue CLI globally.

*Notes: you should have Node.js and NPM installed in the local development environment !. if you don't, then check out Nodejs Official Website for installation

Run this script to add Vue CLI globally.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Then run vue -V in your terminal to verify that the CLI was installed.

It should print something like this.

-> vue -V
@vue/cli 4.5.13 # as of the date of publication

If it errors out then you can refer to this site for help. or else you can move to the next step.

Scaffolding A Vue App

Let's start by running vue create todo-app in your terminal. Which will scaffold a vue app.

It will prompt you with some options to select.

blogAsset1.png

For this project, we will choose Vue 3 as it is the latest and greatest.

Now let it install its dependencies. After the installation has finished run the following scripts

cd todo-app # in case you have a different project app then `cd < your app name >`
yarn serve 
# OR
npm run serve

Now open chrome or any browser of your choice (probably not IE) and navigate to http://localhost:8080/. You will see a Vue App running in development mode.

blogAsset2.png

Walla, we have a Vue App!! Now let the things spice up and continue to our next step.

Cleanups

Let's open the project in our favorite code editor (I will be using VS Code for this project) by running code . in the terminal while making sure that you are in the right project's directory. Now let's look at the folder structure of the project.

blogAsset3.png

You can explore the project on your and get used to the Vue syntax but I will be going fast over this step.

run

 rm -rf src/components/ # to remove components directory

then open App.vue in src/ directory and delete this import from script import HelloWorld from './components/HelloWorld.vue' and this <HelloWorld msg="Welcome to Your Vue.js App"/> too. Also, remove this block of code from the script.

components: {
    HelloWorld
  }

Now your App.vue should look like this.

blogAsset4.png

Now we are ready to jump into our next step.

Adding a form with some reactive states

Let's started by adding a form tag with the class of formContainer under the img tag in App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
    <form class="formContainer">

    </form>
</template>

following up with an input field with the class of `input" and submit button too.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
    <form class="formContainer">
        <input class="input" type="text" placeholder="Enter Your Todo" />
        <button type="submit">Add</button>
    </form>
</template>

Open your Browser where the Vue App was running and it should look something like this.

blogAsset5.png

Now, let's add some states to App.vue the component.

<script>
export default {
  name: 'App',
  data () {
        return {
            text: '',
            todos: []
        }
    },
}
</script>

Let me explain what this block of code is doing. Inside the export default block, there is data() function which allows the returned data to be accessible on the template.

The text will be controlled by the input field, as the user types on the input field, the value of text will change. while todos will hold a record for all todos.

Here is a little example that you can try.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
    <form class="formContainer">
        <input class="input" type="text" placeholder="Enter Your Todo" v-model="text" />
        <button type="submit">Add</button>
    </form>
    <p>{{text}}</p>
</template>

<script>
export default {
  name: 'App',
    data () {
        return {
            text: '',
            todos: []
        }
    },
}
</script>

blogAsset6.png

The v-model directive creates two-way data bindings on form input. A similar example for React Devs.

import { useState } from "react";

function SimpleDataBinding {

 const [text, setText] = useState("") 

  return (
     <form className="formContainer">
        <input 
             className="input" 
             type="text" 
             placeholder="Enter Your Todo" 
             value={text} 
             onChange={e => setText(e.target.value)}
         />
        <button type="submit">Add</button>
    </form>
  )
}

Now the data-binding is all set. Let's add submit handler, handleSubmit which will take e as an event object from the form.

<script>
export default {
  name: 'App',
    data () {
        return {
            text: 'bineet',
            todos: [],
            handleSubmit(e){
                // this will prevent reloading the page on form submittion
                e.preventDefault();
                // this will check if the text is empty
                if(!this.text) return;
                // finally we add the todo to the todos array and set the text to empty
                this.todos.push(this.text);
                this.text = '';
            }
        }
    },
}
</script>

As we know that handleSubmit is accessible to the template, lets us bind it to the form.

<form class="formContainer" @submit="handleSubmit">
        <input class="input" type="text" placeholder="Enter Your Todo" v-model="text" />
        <button type="submit">Add</button>
</form>

The @submit directive will fire when the submit button was clicked!.

Last but not the least, let's map the todo array to the template.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
    <form class="formContainer" @submit="handleSubmit">
        <input class="input" type="text" placeholder="Enter Your Todo" v-model="text" />
        <button type="submit">Add</button>
    </form>
    <ul class="todoItem">
        <li v-for="todo in todos" :key="todo">{{todo}}</li>
    </ul>
</template>

We can use the v-for directive to render a list of items based on an array, in this case, the todo array. The v-for directive requires a special syntax in the form of todo in todos, where todos are the source data array and todo is an alias for the array element being iterated on. The :key is a special directive which vue keeps a track of.

Now try adding some todo. This will look somewhat similar.

blogAsset7.png

Hurray, IT is A TODO APP in VUEEE.js.

Well, at the end of the world this is not the best todo app ever, the styling look mehh... So I have prepared some styles already. Just copy and paste it to the CSS.

before that add wrapper div to the form. And also an h3 with "Your Todos:".

    <div class="container">
        <form class="formContainer" @submit="handleSubmit">
            <input class="input" type="text" placeholder="Enter Your Todo" v-model="text" />
            <button type="submit">Add</button>
        </form>
        <h3>Your Todos:</h3>
        <ul class="todoItem">
            <li v-for="todo in todos" :key="todo">{{todo}}</li>
        </ul>
    </div>

Some styles for todos.

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 250px;
    margin: 0 auto;
}

.formContainer {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

.formContainer input {
    width: 100%;
    padding: 12px 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1.2em;
}

.formContainer button {
    display: none;
}

.todoItem {
    width: 100%;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    border-radius: 4px;
    background-color: #f5f5f5;
}

.todoItem li {
    width: 100%;
    margin: 2px auto;
    padding: 8px 0px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f5f5f5;
}

With the styles applied, it should look like this.

blogAsset8.png

Conclusion

Vue.js is great for build web apps. As a react developer the syntax can daunting at the first time of usage, like, {{ todo }} to print out in the template.

Anyway, thanks for reading, if you happen to be stuck in this or have any questions about React, Node, GraphQL then don't hesitate to reach me through:

Happy Hacking!