In today's blog, I will try to explain to you that how you kickstart with Vue.js. Vue.js is one of the most popular JavaScript front-end frameworks. Frameworks are more adaptable for the designing of websites, and hence, most website developers prefer them. JavaScript frameworks are a type of tool that makes working with JavaScript simple and smoother.

A software framework is an abstraction in which software providing generic functionality can be selectively changed by additional user-written code.

Vue.js requires intermediate-level knowledge of HTML, CSS, and JavaScript is required. If you are new to front-end development, it might not be the best idea to jump right into a framework as your first step - grasp the basics, come back! Prior experience with other frameworks helps but is not required.

**You can find source code used in this blog here
What is Vue.js?

Vue.JS is a progressive framework for developing sophisticated and scalable single-page front-end. The idea of a "progressive framework" is that you start with something small and gradually build something big.

Vue was created by Evan You. While working for Google, Evan You used AngularJS in several projects. He decided to extract the part that he liked about Angular and build something lightweight. This JavaScript framework has already made its way into the market and has proven its worth by offering various features. Some core features are as fellow:

  • Virtual DOM: Virtual DOM is a clone of the principal DOM element. The virtual DOM absorbs every change and renders the components.
  • Data Binding: This feature facilitates binding data with JS variable with HTML forms, add classes dynamically etc.
  • CSS Transitions and Animations: This feature provides several methods to apply a transition to HTML elements when added, updated, or removed from the DOM.
  • Template: It provides HTML-based templates that bind the DOM with the Vue.js instance data. The templates are compiled into Virtual DOM Render functions.
  • Methods: Vue.js provides some built-in methods to handle the life cycle of Vue.js components.
  • Complexity: Vue.js is simpler in terms of API and design.
Setting up development environment

To begin with development, you must have installed NodeJS and npm as this blog is not using CDN version of Vue.js. Following is the development environment that suits me.

Code Editor VS Code
Version control GitHub (You can find source code of the project used in this blog here).
Package manager npm
Development environment

Installing Vue.js

You can install Vue.js by running following command:

 npm i -g @vue/cli

Creating Vue app

Once you successfully installed Vue.js, You have following two options to create a new app:

  • By running "vue ui" command in cmd this will let you to manage your Vue projects via GUI.
  • By running "vue create todos_app".

You will be promoted to enter the project settings i.e., Vue version and features to be included. I choose Vue version 3 and accept all default features.

Running the app

To run Vue execute the following command:

 npm run serve
Welcome page

Your application is now up and running. You can view it at http://localhost:8080

Directory structure

Vue.js comes with a neat and manageable directory structure. Following is the directory structure of "todos_app". Let we now discuss some salient files and entry point of our application.

Directory structure of todos-app
  • /public
    This is the public directory of your application. Content of this directory is publicly accessible. Although, we do not work much with this directory. The only important file in this directory is index.html as it contains div having id of "app". Since Vue.js is a single-page-application so, all components will be rendered into this file.
  • /src
    This directory holds all the components, logic and assets which will be used in the entire application. It also contains a main.js file that executes first when you serve your application. This script let your components to be rendered in the app div we have talked about that before. The other important file in this directory is App.vue. This is our application's root component. Every component that we build will have to embed here. The sub-directory component contains all the components that you develop.

Let us now proceed with the development of our to-do's application. For simplicity, the scope of this application is reduced to view, create, and delete a to-do. There will be no database and backend logic as the primary objective of this application is to learn Vue.js. Similarly, I am also not focusing on styles and UI (layout, visual design, and banding).

Creating Components with props

Components are the small portions of the page. Dividing a page into small components enhances usability, readability, and manageability of code. A component file consists of three parts and, they are as follow:

Template

It contains the HTML which will be rendered in the browser. This could be pure HTML or Vue-HTML. These HTML elements can contain Vue attributes as well i.e., loops and data bindings etc. Curly braces can be used for data bindings. Following is the code snippet of "Task.vue".

 <template>   <div     @dblclick="$emit('toggle-status', task.id)"     :class="[task.status ? 'status' : '', 'task']"   >     <h3>       {{ task.text }}       <i @click="$emit('delete-task', task.id)" class="fas fa-times"></i>     </h3>     <p>{{ task.desc }}</p>     <b>Status:</b><i>{{ task.status ? "Completed" : "Pending" }}</i>   </div> </template>

For more details about template syntax you can consult with official documentation.

Script

We write the logic, name and properties of components which will be used by the component. We can also access component lifecycle methods here. Following is a code snippet of "Header.vue"

 <script> import Button from "./Button.vue"; export default {   name: "Header",   //props object   props: {     title: String,     flag: Boolean,   },    /*    you can define props as array    props:["tilte"]   you can also define props as object too   props:{       title:{           type:String,           default:"Hello World"       }   }   */   //register child components   components: {     Button,   },   emits: ["add-task"], }; </script>

In the above code, I simply import a child component named Button and register it within the components object. I also create the props object, through which we can pass data from parent to child components. At last, I also define an array that will use emit related events upon button click. You can read more on lifecycle methods here.

Styles

We can also define component CSS here. We can restrict the CSS effect to the current component only, by using the "scoped" attribute in the style tag.

 <style scoped> header {   display: flex;   justify-content: space-between;   align-items: center;   margin-bottom: 20px; } </style>
Event Handling

We can use the either v-on:click="onclickFunc()" or @click="onclickFunc()" directive to listen to events trigger by DOM elements and execute some JavaScript in response. The code snippet of add task button component is as follow:

 <template>   <button @click="$emit('add-task')" class="btn" :style="{ background: color }">     {{ text }}   </button> </template>

The Header.vue file will also emits event to its parent component by "emits: ["add-task"]" and in  App.vue I am listening to this "add-task" event as follow.

 <script> import Header from "./components/Header.vue"; import Tasks from "./components/Tasks.vue"; import TaskForm from "./components/TaskForm.vue"; export default {   name: "App",   components: {     Header,     Tasks,     TaskForm,   },   methods: {     addTask() {       this.showAddTask = !this.showAddTask;     }   }, }; </script>

Since I have not used any backend or state management library and I am saving the data in my main root component file App.js. So, to manipulate the data I must emit events from child components and implement the event listeners in the main component i.e., in the app.js file. Apart from "add task", I have implemented the "remove task" and "toggle task" features as well. You can read more about event listening here.

For one, the developer can't get access to application state operations. With smaller projects, this isn't too much of a disadvantage. However, when it comes to large-scale projects, this can complicate the debugging procedure, and slow down the entire development process.

What do you think about this blog? Could it get better anymore? Share your thought in the comments section. If you like this blog, then do share it with your friends & colleagues.

Expand your knowledge

Get fresh content every week
Follow me on social media

 This free site is ad-supported. Learn more
​