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.
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.
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.
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.
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.
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>
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.
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.
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:
- or mail at bineetnaiduapps@gmail.com.
- website
Happy Hacking!