248
Lectures
41
Hours
Watch Intro Video

WHAT IS NUXT JS?

Nuxt.js presets all the configuration 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 large SEO boost, better UX and more opportunities (compared to a traditional Vue SPA).

Because implementing SSR on your own can be really 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 very popular JavaScript front-end framework that was designed specifically to help you write Web apps faster and more easily than ever before!

Used by companies such as 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 own 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 in to practice straight away, so we’ve build this course around three really great projects (which will look fantastic in your career portfolio!):


Project 1 - Todo Application

This project is best suitable for starting developers without any or minimal experience of programming. First application is covering basic concepts every developer should know. First 20 lectures are covering base concepts on practical sandboxed examples. Rest of the section students will be working on  "todo" application learning Vue JS related concepts. The section is covering also 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, data 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 required knowledge needed to work on this project once they complete first project . In this project students will get familiar with Nuxt.js/ Vue.js related topics. In this project students will be working on application to create and manage posts.

  • Get basic knowledge of Nuxt.js

  • Learn how SSR works

  • Get familiar with Vuex

  • Lean how to persist data on Server


Project 3 – Promote Yourself Application

  • Final project students will be working on.  This project is longest and most detailed one. Students be working on tons of interesting features. Students will lean how to create beautiful , self promotion application with admin dashboard, authentication, REST features and other interesting stuff.

  • Last project consist of multiple sections. In first section instructor will be explaining authentication including register and login functionality. Students will not just learn how to authenticate users but they will also find explanation of form validation with Vuelidate package.

  • After authentication students will start working on functionality to create and manage products. Students will be working with "courses" as products but in the end they can choose product of their choice. Application is customisable.

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

  • Course is also covering feature 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 learn how to create pagination feature later on.

  • In last sections instructor will be explaining  SEO(search engine optimization) and students will lean how to  implement SEO improvements into the application. Course is finishing with 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 just want to improve your programming skills, this is the right course for you!

So what are you waiting for? Enrol 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