248
Lectures
41
Hours
Watch Intro Video

WHAT IS NUXT JS?

Nuxt.js presets all the configurations needed to make your development of a Vue.js application enjoyable.

Server Side Rendered(SSR - Universal) mode is the most popular mode for Nuxt. With SSR, also called "universal" or "isomorphic" mode, a Node.js server will be used to deliver HTML based on your Vue components to the client instead of the pure javascript. Using SSR will lead to a significant SEO boost, better UX, and more opportunities (compared to a traditional Vue SPA).

Because implementing SSR on your own can be tedious, Nuxt.js gives you full support out of the box and will take care of common pitfalls.


WHAT IS VUE JS?

Vue JS is a trendy JavaScript front-end framework explicitly designed to help you write Web apps faster and more efficiently than ever!

Used by Nintendo, Adobe, GitLab, Baidu, and Alibaba, Vue JS is rapidly increasing in popularity, so it's a great time to add it to your CV.

By the end of this course, you'll have the skills and confidence you need to use Vue JS on your projects!

So, no matter whether you're a complete beginner to Vue JS, or an experienced programmer keen to improve your skills, this course is for you!


THE COURSE

Students learn best when they're putting what they learn into practice straight away, so we've built this course around three great projects (which will look fantastic in your career portfolio!):


Project 1 - Todo Application

This project is best suitable for starting developers without minimal experience in programming. The first application covers basic concepts every developer should know. The first 20 lectures cover base concepts on practical sandboxed examples. Rest of the section, students will be working on "todo" application learning Vue JS-related concepts. This section is also covering HTML and CSS explanations. 

  • Get basic knowledge of programming (Functions, Variables, Classes...)

  • Know how to create store data into our browser Local Storage.

  • Fully understand Vue JS concepts like data binding, manipulation, event handling, state management (and much more!)


Project 2 – Post Application

Nuxt.js starting project. Base programming knowledge is required. Students should have all of the necessary expertise to work on this project once they complete the first project. Students will get familiar with Nuxt.js/Vue.js-related topics in this project. Students will be working on applications to create and manage posts in this project.

  • Get basic knowledge of Nuxt.js.

  • Learn how SSR works

  • Get familiar with Vuex

  • Learn how to persist data on Server


Project 3 – Promote Yourself Application

  • Final project students will be working on. This project is the longest and most detailed one. Students will work on tons of exciting features. Students will learn to create a beautiful self-promotion application with an admin dashboard, authentication, REST features, and other exciting stuff.

  • The last project consists of multiple sections. The instructor will explain authentication in the first section, including register and login functionality. Students will not just learn how to authenticate users, but they will also explain form validation with the Vuelidate package.

  • After authentication, students will start working on creating and managing products. Students will be working with "courses" like products, but in the end, they can choose the product of their choice. The application is customizable.

  • In the following part, students will be creating manage features for products. Students will learn how to create new custom inputs and manage data flow in forms.

  • The course is also covering features to create blogs. Students will integrate a blog editor containing different formatting options and functionalities to edit and publish blogs. Students will be working on functionality to display published and featured blogs, and they will learn how to create a pagination feature later on.

  • The instructor will explain SEO(search engine optimization) in the last sections, and students will learn how to implement SEO improvements into the application. The course is finishing with the deployment of the application to Heroku.


With over 40 hours of on-screen instruction, it doesn't matter whether you're planning to start your career as a developer or want to improve your programming skills. This is the right course for you!

So what are you waiting for? Enroll now!!

Requirements

  • No previous Nuxt JS knowledge is required!

  • No previous Vue JS knowledge is required!

  • Fundamentals in HTML and CSS helpful, but not a 'must have'

  • Basic Node JS knowledge, but not a 'must have' (Server Lessons are skippable)

Course Curriculum

  • 1

    Introduction

  • 2

    Vue for Beginners - Todo Application

    • Section introduction

      FREE PREVIEW
    • Initialization of Vue App

    • First code, Hello World

    • Introduction to variables

    • Introduction to functions part 1

    • Introduction to functions part 2

    • How web apps work part 1

    • How web apps work part 2

    • Introduction to operators

    • What is call stack

    • Introduction to objects

    • Introduction to classes

    • More about class contstructor

    • Introduction to this context

    • Introduction to inheritance part 1

    • Introduction to inheritance part 2

    • What is if statement

    • Learn more about ifs

    • Introduction to arrays

    • Map and filter array functions

    • Create custom array function

    • Difference between var, const, let

    • What is function scope

    • Initialization of todo app

    • Vue component data and methods

    • Create todo container html and css

    • Create todo items and stylings

    • Introduction to scss

    • Lets create more vue components

    • What are props

    • Explanation of v-for directive

    • Initialization of modal and stylings

    • Modal open button stylings

    • Move modal to separate component

    • Toggling of modal component

    • Implement close modal

    • Refactoring of modal component

    • Initialization of todo create form

    • What is two way data binding

    • New todo create component

    • Implementation of todo create

    • Introduction to form validation

    • Close modal after todo create

    • Learn how to handle form errors

    • Create edit and delete buttons

    • Display edit form for todo

    • Get values to edit form inputs

    • Data store architecture

    • Dispatch action from the store

    • Finishing update todo functionality

    • Implementing delete todo functionality

    • Introduction to store architecture

    • Learn how to persist data

    • Persist data improvements

    • Demystification of VUE Framework

  • 3

    Introduction to Nuxt.js - Post Application

    • Section introduction

      FREE PREVIEW
    • Initialize Project

    • Create first Pages

    • Create index page

    • SSR vs SPA

    • Post component

    • Component props

    • v-for iterations

    • Display date with Moment

    • Component methods

    • Introduction to filters

    • Scoped component styles

    • Integrate Scss in component

    • Checkbox integration

    • Vuex integration

    • Get state with computed

    • More about computed properties

    • Navbar toggling functionality

    • Let's debug our code

    • Page navigation

    • Vuex actions introduction

    • Vuex mutations introduction

    • Fetch post API

    • Post module implementation in Store

    • Async fetch of posts

    • Improve fetch check for posts

    • Vuex getters implementation

    • Modal window implementation

    • Modal form & Slots

    • Named slots

    • Post create + Vue extension

    • Data bindings

    • Learn how to emit events

    • Dispatch create post

    • Fixes of create post feature

    • Post manage form

    • Pass data to manage form

    • Let's learn about watchers

    • Post update feature styling changes

    • Update post action

    • Debugging update

    • Intro to requests

    • More about requests

    • Get JSON post data

    • Post endpoint - write to a file

    • Send a request through Axios

    • Let's move API routes

    • Update post request

    • Delete feature assignment

    • Improvements of delete feature

    • Some fixes + Local Storage intro

    • Archive items in Local Storage

    • Toggle "read" property of post

    • Present changes from Storage

    • Introduction to Markdown

    • Integrate Markdown to manage form

    • Implementation of Detail page

    • Detail page finish

  • 4

    Introduction to Project 3 - Promo App

    • Section introduction

      FREE PREVIEW
    • Create project with Github

    • Create project with CLI

    • initialization of Index Page

    • Move parts of App to components

    • Login & Register page improvements

    • DB Setup

    • Server Setup

    • Populate Data to DB

    • Fetch Courses

    • Provide courses to Card

    • Create custom Filter

  • 5

    Authentication

    • Section introduction

    • Introduction to Vuelidate

    • Let's validate inputs

    • Disable button on blur

    • Register form validation

    • Custom validators

    • Login Functionality

    • Let's learn more about sessions

    • Handle errors with Toasted

    • Display user in Navbar

    • Preserve auth state

    • Learn how to logout

    • Register functionality

    • Let's implement Middlewares

    • Guest middleware

    • Not authorized pages

  • 6

    Course create functionality

    • Section introduction

    • Let's add more pages

    • Fetch instructor courses

    • Display instructor courses

    • Course create components

    • Display one component at the time

    • Hide buttons depending on active step

    • Keep alive component

    • Emit form data from partial step

    • Fetch categories

    • Display categories in select input

    • Get selected value from an option

    • Fixes "can proceed" check

    • Validators in create form

    • Init text input with character count

    • Fixes input count validation and emit data

    • Finishes input with character counter

    • Create course - send a request

    • Display different colour for status

  • 7

    Manage Feature

    • Section introduction

    • Manage page init

    • Stepping functionality in Manage page

    • Styling improvements in step options

    • Introduction to Mixins

    • Multi line text input component

    • Fetch course by ID

    • Iterate multi line component lines

    • Add & Remove line events

    • Add & Remove Line through Store

    • Update Line in Store

    • Adds conditions to allow add or remove line

    • Update inputs on Landing Page

    • Update Status & Price component

    • Emit category value

    • Update course functionality

    • User experience improvements when updating

    • More server explanation

  • 8

    Blog Feature

    • Section introduction

    • Initialization of Blog pages

    • Blog Editor component initialization

    • Creating Bubble menu

    • More formatting options

    • Font Awesome icons

    • Creating Basic menu

    • Display placeholder in Editor

    • Emit value of blog

    • Send a request to save Blog

    • Fetch blog by ID for Edit page

    • Set initial content on Edit page

    • Successful update of Blog

    • Disable save button while saving

    • Handle publish error

    • Slugify Blog title

    • Publish blog & get editor component

    • Get publish blog working

    • Un-Publish blog functionality

    • Fetch user blogs

    • Active tab functionality

    • Display drafts and published blogs

    • Dropdown options in blogs

    • Handle dropdown commands

    • Delete blog functionality

    • Fetch blogs on Blogs page

    • Display published blogs

    • Fetch blog by Slug

    • Editor view component

    • Adds option to feature blog

    • Feature & Un-Feature functionality

    • Fetch featured blogs

    • Inject & Display featured blogs

  • 9

    Blog Pagination

    • Section introduction

    • Pagination initialization

    • Display initial data with pagination

    • Pagination functionality

    • Persistent pagination

    • Pagination improvements & fetch blogs on home page

  • 10

    Course Hero Feature

    • Section introduction

    • Create course hero modal

    • Course hero create functionality

    • Display course hero

    • Heroes page & fetch heroes

    • What are Portals ?

    • Display dynamic heroes

    • Activate hero functionality

  • 11

    UX & Functional Improvements

    • Section introduction

    • Course editor component

    • Get content to course editor

    • Finaly let's create detail page

    • Product hero component

    • Custom navlink component

    • Navbar improvements

    • Tooltip component

    • Instructor header improvements

    • Scss variables

  • 12

    SEO & Deployment

    • Section introduction

    • Introduction to SEO

    • SEO Improvements

    • Robots txt and Favicon

    • Finishing up rest of pages

    • Error Page + Footer

    • Deployment part 1

    • Deployment part 2

    • Application Testing

    • Assets Loading Improvements

    • Course outro

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

  • Single Course Access

    • Lifetime and unlimited Access to "The Complete Nuxt.js & Vue.js Course | Self Promo App"

    $29.00

    Access to this course only.

    Get started now
  • 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