The Complete Nuxt.js & Vue.js Course | Self Promo App
Complete Developer Guide covering Vue.js and Nuxt.js basic to advance concepts. Get your hands on real projects.
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!!
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)
Section introduction
FREE PREVIEWInitialization 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
Section introduction
FREE PREVIEWInitialize 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
Section introduction
FREE PREVIEWCreate 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
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
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
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
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
Section introduction
Pagination initialization
Display initial data with pagination
Pagination functionality
Persistent pagination
Pagination improvements & fetch blogs on home page
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
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
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
Filip Jerga
Every video contains discussion where you can create a post describing an issue. Instructor responds usually within 1 business day.
Within 30 days from the purchase you can ask for a full refund. No questions asked. Your happiness is our priority.
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.
Single Course Access
$29.00
Access to this course only.
Get started nowMonthly Membership
$19.00 / month
Cancel Anytime!
Get started nowAnnual Membership
$190.00 / year
Cancel Anytime!
Get started now