How To Develop Websites with Vue.js

44.1k views

This series provides a starting point for building websites with the front-end JavaScript framework Vue.js. Created in 2014 by Evan You (formally of Google), Vue.js is often described as a combination of React and Angular, borrowing the prop-driven development of React and the templating power of Angular. By the end of this series, you will have the tools to develop websites that focus on traditional HTML and CSS, while still taking advantage of the robustness and scalability of a front-end framework.

• How To Generate a Vue.js Single Page App With the Vue CLI

  December 18, 2020

  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.

• How To Use Vue.js Environment Modes with a Node.js Mock Data Layer

  February 9, 2021

  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.

• How To Navigate Between Views with Vue Router

  March 19, 2021

  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.

• How To Create Reusable Blocks of Code with Vue Single-File Components

  March 31, 2021

  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.

• How To Create User Interactions with Events in Vue

  May 20, 2021

  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.

• How To Use Built-In and Custom Directives in Vue.js

  August 10, 2021

  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.