How To Develop Websites with Vue.js

Vue.js is a popular JavaScript framework for creating user interfaces, often described as a combination of React and Angular, borrowing the prop-driven development of React and the templating of Angular. In this tutorial, you will use the Vue CLI vue create command to create a new Vue application, then try it out by building some single-file components.

In web development with the JavaScript framework Vue.js, developers often create the frontend of their application before the backend is ready. For a temporary backend, you can use Node.js to create a mock data layer for your application. This tutorial shows how to use environment variables to provide data for different modes of your Vue.js project.

With single-page applications, every page or view is rendered within one HTML page. User interface (UI) frameworks like Vue.js render these pages and components when needed through the use of a Virtual DOM. In Vue.js, you can create several views using the first-party library Vue Router. This router makes an association with a view to a URL. In this tutorial, you are going to learn how to add the Vue Router library, integrate it into your project, and create dynamically generated routes.

When creating a web application using Vue.js, it’s a best practice to construct your application in small, modular blocks of code. You can gain this modularity with Single-File Components. In this tutorial, you are going to create a SFC and use props to pass data down and slots to inject content between tags. By the end of this tutorial, you will have a general understanding of what SFCs are and how to approach code re-usability.

In Vue.js, developers use events to add user interaction to their web applications. However, the front-end framework offers a quicker method of handling events by using the v-on directive. In this tutorial, you will use events in Vue to create an application of airport codes. When the user selects an airport code, the app will add that airport to a “favorites” collection. By following along with this project, you will learn about Vue’s built-in events and how to create custom events.

As a front-end framework, Vue.js borrows the prop-driven approach of React, but also uses directives, which were made popular by Angular. In this context, directives are reusable chunks of code or logic that allow you to manipulate your HTML in many different ways, such as conditionally rendering an element, connecting events to an element, or creating dynamic attributes that depend on your Vue code. This tutorial will cover v-if, v-show, v-on, v-bind, v-model, v-html, and custom directives.

Vuex is the first-party development state management library for Vue.js. Vuex follows the principle that Redux has popularized over the past years: Data flows in one direction, with actions and mutations modifying data in a single source of truth called the store. In this tutorial, you will create an application that renders a list of cards with airport information in them. When clicked, these cards will execute the Vuex workflow to add the selected airport to a list of favorites.

DRY is a programming strategy that stands for “Don’t Repeat Yourself”. It encourages code re-usability through modular architecture. Vue.js includes several strategies to modularize and re-use repeated snippets of code. In this tutorial, you will try out layout components with slots, mixins, and the new Composition API to implement the DRY strategy in an example app.

When debugging a Vue application, moving between your source code and your browser can be a time-consuming process. To make debugging more efficient, you can use a browser extension like Vue.js Devtools. In this tutorial, you will set up a sample Vue application, install Vue.js DevTools in your browser, then add new features to your app while testing them with the browser extension.