Master Nuxt.js - A Vuejs framework by building projects

Name: Master Nuxt.js - A Vuejs framework by building projects
Rating: 4.5 (40 reviews)

Get excited with Vuejs by Building two projects with Nuxt & Deploy, including state management by vuex in nuxt, firebase

Created bySarthak Shrivastava

Last updated 8/2019

English

What you'll learn

How to kick start with nuxtjs
Build server-side-rendered single-page-applications (SPAs) in nuxt
Build a weather application using API in Nuxtjs
Building Quiz app with firebase in nuxt
Authentication using firebase in nuxtjs
Deploying Nuxtjs on digital ocean server
Making Nuxtjs an SEO friendly application
Including external Library
Writing effective, reusable and manageable vuejs/javascript code

Course content

7 sections • 66 lectures • 6h 7m total length

Introduction to course4:14
How to get most out of this course2:08
How to get help1:35
Find answers faster by googling exact errors, then compare your code with the code on GitHub to spot small issues; join the community to ask questions and help others.

4 Understanding express:nodejs6:01
Demonstrate setting up an express server inside a Next.js application, using npm scripts for dev, build, start, and generate, and explain development versus production configurations, including host and port.
5 Understanding Plugins in Nuxtjs5:27
Learn how nuxt.js loads plugins by using the plugins directory and nuxt.config.js to register npm packages before mounting the app, including path alias @/plugins and css assets.
6 Understanding Modules in Nuxtjs2:42
7 Understanding Nuxtjs config6:26
8 Html in nuxtjs5:19
9 Default Layout4:53
10 Custom Layout4:36
Create a custom layout in the layouts directory, override the default layout, and attach the inspire layout to a page using the layout tag, verified via view dev tool extension.
11 Custom Error Page5:06
12 Attributes of Pages6:16
13 Meta Tag Override3:09
14 Router - Nuxt Link6:19
15 Dynamic Routings6:42
Create dynamic routes in the Nuxt pages directory using underscores for blog slugs, and load the index view or a dynamic underscore blog view to render posts.
16 Route Params Validation5:45
17 Middleware11:18

18 Start Weather App3:30
19 Create Weather App Page7:07
20 Understand Weather API Website4:12
21 Fetch Weather Data3:11
22 Dynamic City Weather4:34
Demonstrates dynamic weather data by typing a city and submitting a form to fetch weather information with a get weather info method in a Nuxt.js and Vue.js project.
23 Show City with Weather Icon7:09
24 Show Temperature4:56
25 Show Weather Description3:12
26 Move to Server Side Rendering (SSR) mode7:00
discover how to enable server side rendering in a Nuxt.js app by fetching weather data for a city before rendering, using async data and route parameters.
27 Show Wind & Pressure5:42
28 Show Max and Min Temperature3:34
29 Clean-Up V-if4:07
30 Use DotEnv Module4:29

31 Intro to Vuex in Nuxtjs4:55
32 Access State from Store5:46
33 Vuex Getters2:47
Discover how to use vuex getters to derive state, such as uppercasing the course name, and learn how to access and invoke the getter from a component.
34 Weather app - move to Vuex store5:02
35 AsyncData to Fetch5:03
36 Vuex Actions in Nuxt.js3:39
Learn how to implement Vuex actions in Nuxt.js by dispatching get weather info, using context to access state, and update weather with set weather while avoiding direct state mutation.
37 Refactor and Re-use code3:03

38 Start with Quiz App7:06
39 Submit Button4:00
40 Create Question Page8:09
Create an admin questions page in nuxt.js, scaffolding the route and building a form with a question field, four options, a correct-answer radio group, and a firebase-ready submit.
41 Intro to Firebase Test Mode3:52
42 Bind Data to Question Form5:18
43 Store Question to Firebase6:41
Store questions to Firebase by creating a quiz collection with questions and options, then create and link answers to each question, handling success and errors.
44 Store Answer with Question on Firebase5:40
45 Fetch Questions from Firebase6:44
46 Show Questions7:08
47 Update Question7:18
48 Query Answer by Question Id8:40
Query firebase by question id to fetch the corresponding answers using order by, and adjust rules to return the correct answer for a specific question.
49 Update Asnwer3:54
50 Delete Answer with Question7:08
51 Refactor our Code8:53
Refactor the quiz app by extracting delete question and delete answer into dedicated methods, aligning fetch logic into a clear destroy flow with a unified base URL for API calls.
Course Section and future plans1:08
This course currently offers one Nuxt.js project, with a second quiz application planned soon; future plans include deploying the project to DigitalOcean and a domain setup.

52 Create Login Form12:13
53 Make Login Work8:26
54 Use Vux nuxtServerInit5:45
55 Auth Logout and plugins3:43
56 Protect route with Guest Middleware5:07
57 Why this Permission denied4:43
58 Show Question on FrontEnd5:44
59 Extract Questions into its Component4:59
60 Get Correct Answer5:51
61 Correct Answer Color2:08
62 Notify use on Client Side Only6:12
learn to implement a client-side only notification system using an npm library, with a notify plugin, server-side rendering avoidance via config, and triggering a success message for correct answers.

Requirements

Basics of Vuejs
Basics of Vuex
Javascript

Description

Nuxt or Nuxtjs is a framework of vuejs to build SPA and universal applications

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

You will get introduced with Nuxtjs in detiails and work on two real vuejs nuxtjs projects.

Nuxt make server side rendering like a breeze and combining every pieces of vuejs ecosystem is the fuel of nuxtjs.

In this course, I'll teach you core concepts of Nuxt.js and how exactly it works behind the scene. We will dive into the rendered .nuxt directory to see from where nuxt serve every page and how they have configured.

While this course is designed with two project and then finally deploying project on DigitalOcean, I encourage you to comment or request any specific thing you want to learn related to nuxtjs.

The course will teach you ...

Build server-side-rendered single-page-applications (SPAs)
How to use vuetify framework
Making Nuxtjs an SEO friendly application
Including external Library
Writing effective, reusable and manageable vuejs/javascript code
Deploying Nuxtjs on digital ocean server
Authentication using firebase in nuxtjs
any many more things.

Who am I?

My name is Sarthak Shrivastava and I am a full stack developer.

Why I am best for teaching nuxtjs ?

Because my own bitfumes website is build over Nuxt.js.

Along with that, i have bestselling Laravel + Vue.js course forum course here on Udemy.

Who this course is for:

Who want to learn how to write effective manageable code
Who want to create server side rendering application (SSR)
Who want to build real projects with vuejs and SSR

Master Nuxt.js - A Vuejs framework by building projects

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 8min

Say Hello to Nuxt.js3 lectures • 30min

Understanding Nuxtjs Core concepts14 lectures • 1hr 20min

Project 1 - Weather Application13 lectures • 1hr 3min

State Management - Understand Vuex Store n Nuxtjs7 lectures • 30min

Project 2 - Quiz Application with Firebase15 lectures • 1hr 32min

Firebase Authentication on Admin Side11 lectures • 1hr 5min

Requirements

Description

Who this course is for: