Nuxt.js 2 - Vue.js on Steroids

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.

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?

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.

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

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.

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

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

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

Find out where you can get the course source code.

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

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

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).

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.

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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!

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

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

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

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

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

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

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()!

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

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

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.

Time to add a backend - time for Firebase!

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

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

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

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

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

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

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

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

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.

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

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.

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

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

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

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

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

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

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

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

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

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

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

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 can be tricky since some of our code runs on the server. Let's "fix" this by using Cookies for storage.

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

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

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

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