Introduce to Vue.js With a Simple Project

Maruf Ahmed
May 30, 2020 · 3 min read

Vue is a progressive JavaScript framework used for building user interfaces (UIs) and front-end applications. Today, we discuss some basic stuff about vue.js

Photo by Yancy Min on Unsplash

Why Use Vue.js

  • Makes creating UIs and front-end apps much easier

Look at the above picture, Today we build this simple ‘TodoList’ project with Vue.js. Let’s do it,

First of all, Need to set up the project environment. In my case, I going with the Vue CLI method. It provides an official CLI for quickly building Single Page Applications. To use Vue CLI you must download and install Node.js first. Then, open Node.js Command Prompt or CMD, select a folder then run this command.

npm i @vue-cli 

When you install Vue CLI, you can go further and create a project:

vue create ProjectName

If You can learn more about Vue CLI here. Well, let's open the VS code and open the project folder. Fine, all setup is done, let’s work with code.

Just look at the folder’s file all are almost the same on ‘React’ or Angular. If someone has previous knowledge of ‘React’ or ‘Angular’ then I think Vue is so simple for understanding.

Here, ‘App.vue’ is the root component that basically renders all those components. Look at this two screenshot

The whole ‘App.js’ component has three-part one is ‘Template’ the second one ‘Script’ and the third one is ‘Style’. If you look deep into it, I think you understanding some basic parts. Well, don’t worry, I am here to explain the whole process. The template portion is all about HTML stuff. Similarly, style is all about CSS stuff, and the middle portion ‘Script’ is the body part or main part of Vue.js. Cause all these complex functionalities are working with portion.

Well, let’s make the ‘Header’ component for our project.

Let’s create a Todo Component

In the todo component, we have a child component ‘TodoItem’ let’s implement this

Let’s add the final component, and that is AddTodo component

After creating all the components this project should like this.

For more details, visit the link.

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Sign up for 💌 Weekly Newsletter

By Weekly Webtips

Get the latest news on the world of web technologies with a series of tutorial Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Maruf Ahmed

Written by

JavaScript Developer | Content Writer | Book Lover | https://marufportfolio.web.app/

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Maruf Ahmed

Written by

JavaScript Developer | Content Writer | Book Lover | https://marufportfolio.web.app/

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store