W3docs
en
Log in

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.

Start course

Vue.js is an amazing JavaScript framework which you can use to build highly engaging user interfaces and single page applications.

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

Course content

Section 1Getting Started

  • Welcome & Introduction
    1:54
  • What is Nuxt.js?
    2:59
  • Understanding Server Side Rendering
    4:02
  • Nuxt vs "Normal" Server Side Rendering
    1:33
  • Join our Online Learning Community
    1:00
  • Creating our First Nuxt App
    5:07
  • Understanding the Folder Structure
    5:38
  • What can we Build with Nuxt?
    2:34
  • What's Inside This Course?
    2:06
  • How To Get The Most Out Of This Course
    1:57
  • Where to Find the Source Code
    1:00

Section 2Pages, Routing & Views

  • Module IntroductionPremium
    0:55
  • From Folders to RoutesPremium
    6:32
  • Creating a Route with a Dynamic PathPremium
    5:24
  • Adding Links & Navigating AroundPremium
    6:21
  • Assignment - Pages & Routing (Problem)Premium
    1:34
  • Assignment - Pages & Routing (Solution)Premium
    4:32
  • Validating ParametersPremium
    5:57
  • Creating Nested RoutesPremium
    3:11
  • Layouts, Pages & Components - TheoryPremium
    1:30
  • Adding a New LayoutPremium
    3:52
  • Adding a Default Error PagePremium
    1:23
  • Working with "Normal" ComponentsPremium
    7:51
  • Styling Nuxt AppsPremium
    5:35
  • Wrap UpPremium
    1:03
  • Useful Resources & LinksPremium
    1:00

Section 3Project - Pages, Routing & Views

  • Module IntroductionPremium
    1:13
  • Creating the Main "Sections" (Pages)Premium
    7:58
  • Adding External FontsPremium
    3:49
  • Creating the Landing PagePremium
    5:50
  • Splitting the Page into ComponentsPremium
    8:28
  • Adding Static Assets - The Background ImagePremium
    2:33
  • Adding the Header ComponentPremium
    5:54
  • Vue Router vs. Nuxt RouterPremium
    1:29
  • Working on the Post PagePremium
    4:33
  • Creating an Admin SectionPremium
    12:36
  • Preparing the BackendPremium
    10:20
  • Improving the AppPremium
    2:37
  • Adding a Separate Layout to the Admin AreaPremium
    2:50
  • Useful Resources & LinksPremium
    1:00

Section 4Handling Data

  • Module IntroductionPremium
    1:00
  • Adding Dynamic DataPremium
    5:52
  • Preparing Data on the Server-Side (through Nuxt)Premium
    9:08
  • Assignment - Server-Side Data (Problem)Premium
    0:40
  • Assignment - Server-Side Data (Solution)Premium
    2:31
  • asyncData on Client & ServerPremium
    3:17
  • A Closer Look at the Context ObjectPremium
    2:45
  • Adding Async Data to a Single PostPremium
    5:31
  • Handling Errors with a CallbackPremium
    1:55
  • Using Promises in asyncDataPremium
    3:17
  • Important: Restart the dev server in next lecture!Premium
    1:00
  • Adding the Vuex StorePremium
    7:59
  • Vuex, fetch() and nuxtServerInit()Premium
    9:26
  • Wrap UpPremium
    3:12
  • Useful Resources & LinksPremium
    1:00

Section 5Connecting our App to the Backend

  • Module IntroductionPremium
    0:45
  • Executing Code on the ServerPremium
    3:36
  • Adding Firebase as a BackendPremium
    2:06
  • Using Firebase to Store DataPremium
    4:55
  • Fetching Data from the BackendPremium
    4:17
  • Initializing our StorePremium
    2:54
  • Fetching all PostsPremium
    5:09
  • Assignment - Fetching Data (Problem)Premium
    1:24
  • Assignment - Fetching Data (Solution)Premium
    3:42
  • Editing PostsPremium
    4:32
  • Synchronizing Vuex and the BackendPremium
    10:37
  • Wrap UpPremium
    1:59
  • Useful Resources & LinksPremium
    1:00

Section 6Nuxt - Config, Plugins & Modules

  • Module IntroductionPremium
    0:57
  • The Nuxt Config FilePremium
    6:28
  • The Loading PropertyPremium
    3:28
  • Working with Environment VariablesPremium
    5:37
  • Manipulating Routing SettingsPremium
    4:34
  • Animating Page TransitionsPremium
    3:17
  • Adding PluginsPremium
    5:16
  • Registering a Date FilterPremium
    2:10
  • Understanding ModulesPremium
    8:08
  • Wrap UpPremium
    0:46
  • Useful Resources & LinksPremium
    1:00

Section 7Middleware & Authentication

  • Module IntroductionPremium
    0:44
  • What is Middleware?Premium
    6:46
  • Adding User SignupPremium
    6:49
  • Adding User LoginPremium
    2:53
  • Storing the TokenPremium
    5:59
  • Using the Token for AuthenticationPremium
    3:21
  • Implementing a MiddlewarePremium
    4:10
  • Invalidating the TokenPremium
    2:52
  • Persisting the Token Across Page RefreshesPremium
    9:53
  • Implementing CookiesPremium
    9:33
  • Fixing the Logout TimerPremium
    6:19
  • Adding the Logout FunctionalityPremium
    5:03
  • A Quick BugfixPremium
    0:48
  • Useful Resources & LinksPremium
    1:00

Section 8The Server Side

  • Module IntroductionPremium
    1:13
  • Adding Server Side MiddlewarePremium
    6:18
  • Testing the MiddlewarePremium
    2:11
  • Starting a Project with a Server Side TemplatePremium
    3:09
  • Useful Resources & LinksPremium
    1:00

Section 9Building a Nuxt App

  • Module IntroductionPremium
    0:31
  • Universal vs SPA vs StaticPremium
    3:01
  • Building our App as a Universal AppPremium
    2:02
  • Building our App as a SPAPremium
    5:44
  • Deploying a Universal AppPremium
    1:00
  • Fetching Data in the SPAPremium
    1:00
  • Building our App as a Static WebsitePremium
    3:21
  • Improving the Generate ProcessPremium
    4:43
  • Limiting the Amount of http RequestsPremium
    3:04
  • Adjusting the StorePremium
    2:33
  • Deploying SPAs and Static WebpagesPremium
    1:00
  • Useful Resources & LinksPremium
    1:00

Section 10Round Up

  • Course RoundupPremium
    0:55

Course instructor

Photo of Maximilian Schwarzmüller

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.