Nuxt.js - Vue.js on Steroids
4.7 (2,233 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
9,903 students enrolled

Nuxt.js - Vue.js on Steroids

Build highly engaging Vue JS apps with Nuxt.js. Nuxt adds easy server-side-rendering and a folder-based config approach.
Bestseller
4.7 (2,233 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
9,903 students enrolled
Last updated 2/2019
English
English [Auto-generated], Indonesian [Auto-generated], 5 more
  • Italian [Auto-generated]
  • Polish [Auto-generated]
  • Portuguese [Auto-generated]
  • Romanian [Auto-generated]
  • Spanish [Auto-generated]
Current price: $11.99 Original price: $144.99 Discount: 92% off
30-Day Money-Back Guarantee
This course includes
  • 6.5 hours on-demand video
  • 14 articles
  • 49 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build server-side-rendered single-page-applications (SPAs)
  • Build normal, optimized SPAs with minimal effort

  • Generate a static webpage from Vuejs code

Course content
Expand all 105 lectures 06:43:17
+ Getting Started
10 lectures 27:50

Let me welcome you to this course and walk you through it and what you'll learn :)

Preview 01:53

So what is Nuxt.js? What does it add to Vue.js? Let's take a closer look and set these basics in this lecture.

Preview 02:58

Server-side-rendering is one of the core assets Nuxt.js adds to Vue development. But what does that actually mean, what is it about?

Preview 04:01

Nuxt.js is not are only way of rendering Vue apps on the server-side. Let's take a closer look at the alternative and why Nuxt wins.

Preview 01:32

Enough of the theory, let's create our first Nuxt app!

Preview 05:07

We created our first Nuxt app and saw it in action. But what did we actually create? Time to take a closer look at the folder structure.

Preview 05:37

With the app created and analyzed - let's explore which possible app types we can build with Nuxt in general!

Preview 02:33

Now that we saw Nuxt in action, let me give you a detailed walkthrough of the course content.

Preview 02:06

I want you to succeed in this course, here's how you will :)

Preview 01:57

Find out where you can get the course source code.

Where to Find the Source Code
00:06
+ Pages, Routing & Views
13 lectures 49:38

Let me introduce you to this module and explain what you will learn in it.

Module Introduction
00:55

Let's dive into one of the coolest features of Nuxt.js - the automatically generated route setup.

From Folders to Routes
06:32

We had a look at static routes/ pages, in this lecture we'll now dive into creating dynamic ones (i.e. routes with route parameters).

Creating a Route with a Dynamic Path
05:24

We got a lot of pages, that's great! Would be even great if users could reach them from within the app. So let's add some links and navigate around.

Adding Links & Navigating Around
06:21
Now that the basics about pages and routing are set, it's your turn to practice it!
Time to Practice - Pages & Routing
1 question

When working with dynamic parameters, you often want to validate them. Learn how that's done in this lecture.

Validating Parameters
05:57

Sometimes, you need to nest routes. This is possible in Nuxt apps, too. Let's dive into the details!

Creating Nested Routes
03:11

With the basics set, let's dive into the different types of Vue components you typically use in Nuxt.js apps.

Layouts, Pages & Components - Theory
01:30

With the theory out of the way, let's create a new layout to see how that works.

Adding a New Layout
03:52

Things don't always go as planned, errors can occur. In this lecture, I'll explain how you may add an error file (an error page to be precise) to your app.

Adding a Default Error Page
01:23

We also have these "normal" Vue components which we can use in our pages. Let's learn more about them!

Working with "Normal" Components
07:51

When it comes to styling Nuxt apps, you got plenty of options. Let's explore them!

Styling Nuxt Apps
05:35

Let me wrap this module up and summarize what we learned thus far.

Wrap Up
01:03

Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.

Useful Resources & Links
00:04
+ Project - Pages, Routing & Views
14 lectures 01:10:12

Let me introduce you to this module and to what you'll learn inside of it.

Module Introduction
01:13

Let's start by creating the main sections of our app. With that, I mean the main "page areas".

Creating the Main "Sections" (Pages)
07:58

Our fonts are not really looking that nice. Learn how to include external web fonts in this lecture.

Adding External Fonts
03:49

Let's start working on the most important page of our app: The landing page.

Creating the Landing Page
05:50

Having all the UI logic in one component (page) is not really that good. Time to split it up!

Splitting the Page into Components
08:28

We can also use static assets (like images) in Nuxt apps. Learn how that works in this lecture.

Adding Static Assets - The Background Image
02:33

What would our app be without a header? Not worth that much! So let's add one!

Adding the Header Component
05:54

How are Vue and Nuxt router connected? The answer may (or may not) surprise you!

Vue Router vs. Nuxt Router
01:29

Let's continue working on the content pages. Next up: The "Posts" page!

Working on the Post Page
04:33

What would a blog be without an admin? Not that useful, would it? So let's add an admin section now!

Creating an Admin Section
12:36

Let's add a backend to our app and prepare it.

Preparing the Backend
10:20

The app is taking shape but it can still use some finetuning. Let's improve it!

Improving the App
02:37

Let's practice that "multiple layouts" thing by adding a separate one to the admin area.

Adding a Separate Layout to the Admin Area
02:50

Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.

Useful Resources & Links
00:02
+ Handling Data
13 lectures 53:38

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
01:00

Thus far, we only output hard-coded content. Time to work on this and make it a bit more dynamic.

Adding Dynamic Data
05:52

Nuxt.js is not just about pages but mainly about creating universal Vue apps. That means "server-side-rendering". Learn how that affects our data-fetching capabilities!

Preparing Data on the Server-Side (through Nuxt)
09:08
It's your turn now to prepare data on the server-side!
Time to Practice - Server-Side Data
1 question

asyncData is really special. In this lecture you'll find out why!

asyncData on Client & Server
03:17

There's this strange context object which is passed to asyncData. Time for a closer look!

A Closer Look at the Context Object
02:45

Let's use the asyncData knowledge we gather to load a single post.

Adding Async Data to a Single Post
05:31

Things sometimes go wrong. Learn how to handle such cases.

Handling Errors with a Callback
01:55

You can also return Promises in asyncData (instead of using callbacks). Let's dive into that feature.

Using Promises in asyncData
03:17
Important: Restart the dev server in next lecture!
00:13

Thus far, we haven't used Vuex. It's super-easy to use though, let's dive in!

Adding the Vuex Store
07:59

asyncData is great to load data into a page. What if you need to load data into the store? You can use fetch() for that.

But you might also be highly interested in nuxtServerInit()!

Vuex, fetch() and nuxtServerInit()
09:26

Let me wrap this module up and summarize what you learned thus far.

Wrap Up
03:12

Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.

Useful Resources & Links
00:03
+ Connecting our App to the Backend
11 lectures 40:51

Let me introduce you to this module and to what you'll learn in it!

Module Introduction
00:45

Isn't Nuxt.js about server-side-rendering? Can we directly reach out to a database from our Vue code therefore? Let's explore these questions in this lecture.

Executing Code on the Server
03:36

Time to add a backend - time for Firebase!

Adding Firebase as a Backend
02:06

We want to fetch data of course but for that, we need data on the backend first. Let's store some posts on Firebase!

Using Firebase to Store Data
04:55

With data being stored on the backend, let's now fetch it!

Fetching Data from the Backend
04:17

Let's now initialise our Vuex store with the server-side data we now got.

Initializing our Store
02:54

Time to not just fetch pieces put all the posts we got.

Fetching all Posts
05:09
We already started fetching data from the backend, it's now your turn again.
Time to Practice - Fetching Data
1 question

We're able to store and fetch posts, let's now add the capabilities to edit them.

Editing Posts
04:32

We're updating the data on our backend but our frontend Vuex store is not reflecting these changes. Time to do something about that!

Synchronizing Vuex and the Backend
10:37

Let me wrap this module up and summarize what we learned thus far.

Wrap Up
01:59

Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.

Useful Resources & Links
00:01
+ Nuxt - Config, Plugins & Modules
11 lectures 40:47

Let me introduce you to this module and to what we'll learn in it.

Module Introduction
00:57

We only had a brief look at it thus far - time to change that. Let's investigate the Nuxt config file.

The Nuxt Config File
06:28

Sharing feedback with the user can vastly improve the user experience you're offering - let's dive into a key feature that helps you with this. The loading property.

The Loading Property
03:28

Environment variables are another cool feature that make our life as a developer easier.

Working with Environment Variables
05:38

Even though Nuxt infers all routes for you, you can manipulate the route settings and even add more routes. Learn more about this in this lecture.

Manipulating Routing Settings
04:34

Learn how to easily animate page transitions by setting some configuration property!

Animating Page Transitions
03:17

What are plugins? How do you add them? Let's answer these questions in this lecture!

Adding Plugins
05:16

Do you know Vue filters? They can be handy in some situations. Learn how to use them in Nuxt apps in this lecture.

Registering a Date Filter
02:10

We had a look at plugins - what are modules then? Let's dive in...

Understanding Modules
08:08

Let me wrap this module up and summarize what you learned thus far.

Wrap Up
00:46

Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.

Useful Resources & Links
00:05
+ Middleware & Authentication
14 lectures 01:05:11

Let me introduce you to this module and to what you'll learn in it!

Module Introduction
00:44

So what is middleware in a Nuxt app? Let's dive in and start using it in this lecture.

What is Middleware?
06:46

Let's implement authentication in our app and let's start by allowing users to sign up.

Adding User Signup
06:49

We're able to sign users up, it's now time to also support user login.

Adding User Login
02:53

We got this strange token - it's now time to store it safely.

Storing the Token
05:59

We stored the token, the goal is to now use it to authenticate ourselves towards the Firebase backend.

Using the Token for Authentication
03:21

This course module also is about middleware, isn't it? Let's explore how we may use on to do authentication.

Implementing a Middleware
04:10

The token only has a limited lifetime, so let's now also add a functionality to invalidate it after that lifetime.

Invalidating the Token
02:52

The token currently is lost whenever we refresh the page. This is something that should be changed, so let's work on this.

Persisting the Token Across Page Refreshes
09:53

Persisting the token can be tricky since some of our code runs on the server. Let's "fix" this by using Cookies for storage.

Implementing Cookies
09:33

The logout timer has had its best times - let's implement a better solution in this video.

Fixing the Logout Timer
06:19

Currently, users can't log out. Let's change that.

Adding the Logout Functionality
05:03

We got some bug in our code. Let's fix it before wrapping this module up.

A Quick Bugfix
00:48

Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.

Useful Resources & Links
00:01
+ The Server Side
5 lectures 12:52

Let me introduce you to this module and to what you'll learn in it.

Module Introduction
01:13

Here's how to add server-side middleware to achieve a bit of a "closer integration" of your Nuxt/ Vue app into your backend.

Adding Server Side Middleware
06:18

Let's see if everything works as it should :)

Testing the Middleware
02:11

Don't want to implement middleware as shown in this module? You can also start with a different template if you want...

Starting a Project with a Server Side Template
03:09

Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.

Useful Resources & Links
00:01
+ Building a Nuxt App
12 lectures 26:37

Let me introduce you to this module and to what you'll learn in it.

Module Introduction
00:32

You actually got three different options regarding the type of app you're building. Let's explore which these are.

Universal vs SPA vs Static
03:01

Option number 1: Let's build our app as a universal app.

Building our App as a Universal App
02:02

You learned how to build your app as a Universal app - let's now have a look at how you deploy it.

Deploying a Universal App
00:45

Option number 2: Let's build a "normal" SPA

Building our App as a SPA
05:44

The SPA is a bit broken since it doesn't fetch data correctly. Learn how that could be fixed.

Fetching Data in the SPA
00:30

That's probably the coolest option: Let's build our app as a static web page!

Building our App as a Static Website
03:21

Generating a static page is pretty nice but also difficult if we got dynamic routes. Let's fix the issues!

Improving the Generate Process
04:43

We can optimize our generation process and limit the amount of Http requests that get sent.

Limiting the Amount of http Requests
03:04

We need to implement some adjustments on our store to prevent errors.

Adjusting the Store
02:33

You chose to create a SPA or statically pre-rendered app? Check out how to deploy it in this lecture.

Deploying SPAs and Static Webpages
00:20

Attached to this lecture, you find the module source code. Inside of the lecture, you can find some helpful links.

Useful Resources & Links
00:01
+ Round Up
2 lectures 01:21

Good job, you completed the course! You're a true Nuxt.js developer now! :) Let me round this course up.

Course Roundup
00:55
Bonus: More Content!
00:26
Requirements
  • Vuejs knowledge is required, though you don't need to be an expert at all
  • That's actually all, you'll learn the rest in the course :)
Description

Vue.js is an amazing JavaScript framework which you can use to build highly engaging user interfaces and single page applications. You can join my bestselling course on Vue.js, here on Udemy, if you want to learn more about this awesome framework!

Nuxt.js takes it to the next level!

It's a library for Vue.js (kind of a "framework for a framework") and it adds two major things to Vue.js:

  • Server-side-rendering of your Vue app out of the box
  • Easy Vue app configuration via folders and files

You'll of course learn all the details in this course but the most important takeaway is that Nuxt.js makes the creation of better, more optimized and more capable Vue apps much easier - and all of that whilst adding pretty much no overhead.

In this course, I'll teach you how to create Nuxt/ Vue apps from scratch! We'll build an entire course project and dive into the core features Nuxt.js offers.

By the end of the course, you'll have a complete Vue app, built with Nuxt.js, which can be rendered on the server (or as a static website!) and which is highly optimized.

The course will teach you ...

  • ... what Nuxt.js exactly is and how it's connected to Vue.js
  • ... how you use Nuxt.js to build better Vue apps
  • ... everything you need to know about the "configure via folders & files" approach taken by Nuxt
  • ... different build possibilities like SSR apps, SPAs or a static webpage
  • ... how you build an entire project, including authentication, via Nuxt.js
  • And way more!

Who am I?

My name is Maximilian Schwarzmüller and I built my company's (Academind) webpage with Nuxt.js.

Besides that, I'm the instructor of the 5* rated, bestselling Vue.js course here on Udemy. I worked with Vue since it's beta, the same is true for Nuxt.js.

I absolutely love these two frameworks and I can't wait to dive into them together with you!

Who this course is for:
  • Anyone who wants to build engaging, (optionally) server-side-rendered Vue JS apps
  • Anyone who wants to work with Vuejs and follow a minimal-configuration approach
  • Anyone who wants to create static websites with Vuejs (Nuxt as a static page generator!)