Vue.js: Learning the basics by building a movie web app

Name: Vue.js: Learning the basics by building a movie web app
Rating: 4.2 (144 reviews)

Learn the basics of Vue by building a simple movie application utilizing Vuex, Vue Router, Axios, firebase, and more.

Created byDino Numić

Last updated 11/2020

English

What you'll learn

Create Vue. application
CRUD with Firebase and Firestore
API service
Vuex
Vue Router

Course content

5 sections • 32 lectures • 2h 15m total length

Chapter Introduction0:20
In this chapter, we will install Vue Command Line Interface and use it to create our first Vue project. Then we will do a deep dive into the default Vue project and explore all files and folders that we have inside.
We will go over components, some common directives that you can use inside components, and explore Vue Router.
Who this course is for?0:43
Explaining who I believe this course is for, what to expect and what not to expect from this course.
Vue CLI, new project, and default project explanation2:35
In this lecture, we will install Vue CLI and create our movie Vue application.
Examining main.js and App.vue root component8:11
In this lecture, we will do a deep dive into Vue folders and files and explain how they work. We will explore the components and basic Vue directives.
Explaining Vue Router2:32
In this lecture, we will explore Vue Router.
Examining rest of the files and folders1:08
In this lecture, we will explore the rest of the files that we have in our Vue project.

Chapter Introduction0:22
In this chapter, we will start creating our movie application. First, we will clean our project and remove all unnecessary files.
Then we will create a couple of new components.
You will learn some new directives and get introduced to Vuex (a state management tool for Vue applications).
Finally, we will fetch and render movies from our store.
Cleaning our project1:05
In this lecture, we will clean our starting project by removing all unnecessary files.
Creating Navbar and Sidebar components8:22
In this lecture, we will create Navbar and Sidebar components.
Introducing v-for directive and :key attribute3:56
In this lecture, you will learn a new directive "v-for".
Examining Vuex4:39
In this lecture, you will learn about Vuex and state management inside Vue application.
Creating movies module6:07
In this lecture, you will learn about modules and how we can separate our store into smaller, more organized chunks.
Exploring component lifecycle hooks2:50
Creating Movie component and rendering movies4:10
In this lecture, we will fetch and render movies from our store.

Chapter Introduction0:21
In this chapter, we will dedicate some time to store management. We will add search and filter functionality to our movie application. You will learn additional cool properties that we have on our components.
We will add another page and route for movie preview. We will also implement add, update, and delete movie functionality.
Adding search functionality8:33
In this lecture, we will add the ability to search our store of movies by the movie name.
Adding filters9:35
In this lecture, we will add filters that will allow us to sort movies.
Creating movie preview page13:14
In this lecture, we will create a new page and a new movie preview route.
Creating a mixin and navigating to home page5:22
In this lecture, you will learn how to elegantly share similar code between multiple components.
Creating modal component7:49
In this lecture, we will create a modal component.
Creating new movie form7:05
In this lecture, we will create a form for creating a new movie.
Updating state in Vuex4:03
In this lecture, we will create actions and mutations for creating a new movie.
Deleting movie3:40
In this lecture, we will delate a movie from the store.
Updating movie4:34
In this lecture, we will update a movie in our store.

Chapter Introduction0:17
In this chapter, we will create a new firebase project in order to persist our movies.
We will create a small node script that will seed some initial movies.
We will implement custom API services and lastly, we will update our CRUD operations to save data to Firestore.
Creating new firebase project1:54
In this lecture, we will create a new Firebase project and an admin service account.
Creating firebase importing script with node4:22
In this lecture, we will create a node script that will upload movies to firebase.
Creating firebase services and movies API8:25
In this lecture, we will create firebase services inside our movie application.
Creating movie and save to firestore5:29
In this lecture, we will update our store to send data to firestore.
Editing movie in firestore1:14
In this lecture, we will update our store to send data to firestore.
Deleting movie from firestore2:33
In this lecture, we will update our store to send data to firestore.

Requirements

Basic understanding of Javascript (functions, objects, promises, ES6+)

Description

By enrolling and finishing this course you will gain a clear insight into Vue and learn how to build your first Vue application. This course is primarily geared towards beginners and developers who would like a quick crash course into Vue development.

This does not mean that we will take it easy and only work with the simplest approaches!

Here are, summarized, some of the things you will learn throughout this course.

Install Vue CLI and create a new project
You will learn how to create a new project with Vue CLI (command line interface). We will explore and explain all files and folders that come created with the default project.
Create routes and learn how to manage state with Vuex
You will learn how to create and programmatically navigate through the Vue application. You will also learn how to manage the global application-level state separate it using modules.
Dive into life-cycle hooks, Vue directives, mixins
You will learn all the steps through which a component goes from its creation till the moment it is destroyed. Learn some of the Vue directives and look at how we can share similar code across multiple components.
Create CRUD with firebase
Learn how to create basic CRUD operations with Axios and Firebase and make API calls to update the global state.
You will have fun
You will have fun learning more about Vue and working on this lovely movie application.

Who this course is for:

Begginer developers looking to enhance their skills by learning Vue

Vue.js: Learning the basics by building a movie web app

What you'll learn

Explore related topics

Course content

Installing Vue CLI and creating new Vue project6 lectures • 15min

Diving deeper into Vue and creating our movie application8 lectures • 32min

Searching, filtering, adding, editing, and removing movies10 lectures • 1hr 4min

Adding Firebase7 lectures • 24min

Last words and complete project1 lecture • 1min

Requirements

Description

Who this course is for: