66
Lectures
9
Hours
Watch Intro Video

What is Vue JS  ?

Javascript framework.

What is Framework(FW)/ Library ?

Environment, set of tools and guide lines build on top of the programming language(JS in case of this course). FW exposes functionalities, handles lifecycle of the application and defines set of rules how application should be written in order to follow best FW practices.

Every framework is different, but there is one thing they have in common. They are builded on top of JS so if you are familiar with JS you can learn any frontend(FE) FW very fast!

Vue -> (pronounced /vjuː/, like view) is a progressive framework for building user interfaces.

What are you going to work on ?

Understand basics and difficult parts of Vue JS 3.

In this course you are going to create application for keeping track of the resources. Resource can be anything on the internet(blog, video, book etc.). 

This application will have functionalities to create, update and delete the resource. Through the process of creating these features you will learn core concepts of each framework.

In first section we will work on most basics concepts by creating simple counter application.

Later I will explain you how FW works under the hood and how the application is rendered in your browser. You will learn it on wireframes and real examples from FW code it self. 

Next, you are going to integrate very simple layout backed by Bootstrap. You will learn how to manipulate data, how to keep track of them and how to reflect data changes in your application. Every handles data in different fashion.

In next sections you will learn how to make an API request to remote server. We will explain what is a proxy and why we need to use a proxy. You will fetch a data from a remote database and use them in your application.

In last sections we will talk about the routing. You will create multiple pages and navigation between them. Every framework has a different routing system. I will be explaining more advanced and newest concepts of each FW. 

In the end you will implement search functionality and I will be explaining patterns how to propagate data to entire application. It will be explained on a feature that can change the application settings.

As the last thing we will deploy each application on Heroku platform so you can share your application on internet.

Requirements

  • Basic JS or any programming language knowledge

Course curriculum

  • 1

    Introduction

    • Course Preview

    • How to resolve issues

    • Environment Setup

    • Folder Setup

  • 2

    Basic concepts

    • Vue Init

    • Folder Structure

    • Vue Component

    • Counter

    • Counter View

    • Props

    • Custom Events

    • Event Warning + Scss

  • 3

    Under the hood

    • Insert Before

    • How Vue JS is Loaded

  • 4

    Application getting shape

    • Initial Layout + Bootstrap

    • Moving to components

    • Resources Data

    • V-for Iteration

    • Computed vs method

    • Toggle the view

    • Add Resource

    • Ux Improvements

    • Select Resource

    • Active Item

  • 5

    Working with real data

    • Setup Node API

    • Send a Request

    • Proxy request

    • Set Resources

    • Pass Item to Resource Update

    • Watchers

    • Select Input

    • Updating Resource on Server

    • Update the view

    • Alert Feature

    • Set Alert

    • Get actual error message + timeout

    • Clear Timeout

    • Mixins

    • Delete Resource

    • Resource Delete , View Updates

    • Handle edge cases after delete

  • 6

    Routing + Search

    • Router Intro

    • Children Routes

    • Simple Navigation

    • Update Resource Refactor

    • Create resource

    • Resource Detail Page

    • Fetch resource By Id

    • Slots

    • Named Slots

    • Search Resources

    • Search Fixes

  • 7

    Vue 3 Concepts

    • Composition Start

    • Computed composition

    • Hydrate Resources in Composition

    • useSearch

    • Suspense

    • Teleport

    • Modal

    • Settings Form

    • Settings Forms Improvements, storing settings

    • Provide Inject

    • Heroku and Git Cli

    • Production Server

    • Node + Api Server

    • Deployment + Ending

Instructor(s)

Software Engineer

Filip Jerga

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains discussion where you can create a post describing an issue. Instructor responds usually within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days from the purchase you can ask for a full refund. No questions asked. Your happiness is our priority.

  • Do I need to watch every lecture of really extensive course?

    Of course not! Every lecture is committed (explained in introduction section). You can start watching at any lecture, just download correct version of project attached to lecture resources.

Eincode Access Options

  • Monthly Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $19.00 / month

    Cancel Anytime!

    Get started now
  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $190.00 / year

    Cancel Anytime!

    Get started now