Learn to setup Node.js and other software packages required to build a web application.
Build a single-page application using Vue.js and Node.js.
Learn to add Authorization and test cases to improve the reliability of your web application.
What You Will Learn
Build the frontend to a songs playlist application, search videos and add them to the playlist, and give them a label and rating.
Learn to set up a blank Vue.js application on a Node.js server.
Learn about the HTTP client Axios to consume REST APIs to get data.
State management using Vuex and frontend routing using Vue-router.
Learn how to work with the Node.js backend of the application to persist data in the frontend.
Work with Vue libraries and modules that are useful for any SPA, such as unit testing and server-side rendering.
This course will help you develop effective and maintainable full-stack web applications using Vue.js and Node.js. You'll start by building the frontend to a songs playlist application, to log in, create a new playlist, and search through YouTube videos. You'll learn how to build a scalable Vue.js frontend that can work well in combination with a Node.js backend application.
Next, you'll learn how to consume data from a third-party API within your application as well as how to perform CRUD operations against a locally hosted API using the HTTP client Axios.
By the end of the course, you will have an understanding of fundamental Vue.js concepts and will know how to use its state management library, Vuex, and its frontend routing library, Vue-router. Also, you'll be confident in building powerful and performant frontend web development using Vue.js.
Style and Approach
In a practical manner, you will learn to implement various Vue.js modules, components, and features in order to build frontend applications and integrate the backend with Node.js for complete full stack web development, with a focus on the frontend.
Table of Contents
1-Getting Started with Vue.js
The Course Overview
First Step Towards Vue
Setting Up Vue Using Node.js
Basics, Directives, and Reactivity
2-Building a Project with Vue.js
Installing Vue-CLI and Creating a New Project
Tour of Project Files and What Are Single-File Components?
Using Axios to Consume a Third-Party API
Creating Custom Components and Importing Them
3-State Management and Routing
Installing Vuex and vue-router and Adding Them to the Vue Instance
Vue Core Concepts and How to Implement – Part 1
Vue Core Concepts and How to Implement – Part 2
How to Use vue-router and Router Links
Application Structure – Part 1
Application Structure – Part 2
4-Setting Up the API
Putting Together the Sample API Code and Adding to the Frontend Application
How to Set Up the Database
Demonstration of API in REST Client
Creating an Account and Then Authenticating /Getting a Token – Part 1
Creating an Account and Then Authenticating /Getting a Token – Part 2
5-Create, Read, Update, and Delete with Node.js
Setup Login Page, Functionality and Adding the User – Part 1
Setup Login Page, Functionality and Adding the User – Part 2
Using the API to Create, Read, Update, and Delete Items – Part 1
Using the API to Create, Read, Update, and Delete Items – Part 2
Using the API to Create, Read, Update, and Delete Items – Part 3
Using the API to Create, Read, Update, and Delete Items – Part 4
Using the Vuex Store as a Single Point of Contact to the API