Vue developers
You’re comfortable building with Vue, but you want a clear next step to create engaging apps that hold up when SEO and production readiness become non-negotiable.
Nuxt.js 2 - 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.
Course Overview
About This Course
You already know Vue, but you’re hitting the same wall: your app feels fast locally, yet SEO and performance questions keep coming up the moment you think about real users and production.
This course shows you how to move beyond “just a Vue SPA” by using Nuxt.js as a Vue meta-framework. You’ll work with Nuxt’s folder-based configuration so you can build apps with minimal setup while still getting the benefits of server-side rendering and static site generation.
By the end, you’ll be able to choose the right Nuxt approach for a given project, ship server-side-rendered and optimized SPAs to production, and generate static websites from your Vue code. You’ll also have experience building a real Nuxt project that includes authentication and data storage, so you’re not left guessing how the pieces fit together in practice.
What You'll Learn
You’ll use Nuxt’s conventions to build and ship universal apps, optimized SPAs, and statically generated sites—plus the production steps that make them real.
Nuxt in Vue workflows
Explain what Nuxt.js is and how it relates to Vue.js, so you can confidently decide when Nuxt is the right tool for a project instead of forcing everything into a plain SPA.
Folder-based configuration
Configure Nuxt apps using the special Nuxt.js folder structure, letting the framework handle setup through conventions so you can focus on building features with minimal manual configuration.
Server-side-rendered SPAs
Build server-side-rendered Single Page Applications and understand how to run them in production, so your Vue apps can deliver better performance and SEO where it matters.
Optimized Nuxt SPAs
Create “normal” optimized SPAs with Nuxt.js and deploy them to production, choosing this mode when you want a classic SPA experience while still benefiting from Nuxt’s tooling.
Static site generation
Generate static websites from Vue
.jscode by using Nuxt as a static page generator, so you can ship fast, static output without giving up your Vue-based development flow.Production optimization habits
Apply tips and tricks to optimize Nuxt apps and deploy them correctly, so you avoid common production pitfalls and ship a setup that’s built for real traffic.
Ready to get started?
See enrollment optionsPrerequisites
Basic Vue.js knowledge is required (you don’t need to be an expert).
Who Is This Course For?
Low-config builders
You like Vue, but you’re tired of stitching together lots of setup by hand. You want a framework that gives you structure and sensible defaults so you can move faster.
Static site creators
You want to publish static websites using Vue, but you don’t want to abandon your existing skills. This course is for you if you want Nuxt as a practical static page generator.
Curriculum Overview
Start NowPreview the structure and pacing of this course before you begin.
Getting Started27m
- 01Welcome & Introduction1:53 min
- 02What is Nuxt.js?2:58 min
- 03Understanding Server Side Rendering4:01 min
- 04Nuxt vs "Normal" Server Side Rendering1:32 min
- 05Join our Online Learning Community0:00 min
- 06Creating New Nuxt Projects & Nuxt 20:00 min
- 07Creating our First Nuxt App5:06 min
- 08Understanding the Folder Structure5:37 min
- 09What can we Build with Nuxt?2:33 min
- 10What's Inside This Course?2:06 min
- 11How To Get The Most Out Of This Course1:57 min
- 12Where to Find the Source Code0:00 min
- 13The Academind Pro Referral Program0:00 min
Pages, Routing & Views55m
- 01Module Introduction0:55 min
- 02From Folders to Routes6:32 min
- 03Creating a Route with a Dynamic Path5:24 min
- 04Adding Links & Navigating Around6:21 min
- 05Assignment - Pages & Routing (Problem)1:34 min
- 06Assignment - Pages & Routing (Solution)4:32 min
- 07Validating Parameters5:57 min
- 08Creating Nested Routes3:11 min
- 09Layouts, Pages & Components - Theory1:30 min
- 10Adding a New Layout3:52 min
- 11Adding a Default Error Page1:23 min
- 12Working with "Normal" Components7:51 min
- 13Styling Nuxt Apps5:35 min
- 14Wrap Up1:03 min
- 15Useful Resources & Links0:00 min
Project - Pages, Routing & Views1h 10m
- 01Module Introduction1:13 min
- 02Creating the Main "Sections" (Pages)7:58 min
- 03Adding External Fonts3:49 min
- 04Creating the Landing Page5:50 min
- 05Splitting the Page into Components8:28 min
- 06Adding Static Assets - The Background Image2:33 min
- 07Adding the Header Component5:54 min
- 08Vue Router vs. Nuxt Router1:29 min
- 09Working on the Post Page4:33 min
- 10Creating an Admin Section12:36 min
- 11Preparing the Backend10:20 min
- 12Improving the App2:37 min
- 13Adding a Separate Layout to the Admin Area2:50 min
- 14Useful Resources & Links0:00 min
Handling Data56m
- 01Module Introduction1:00 min
- 02Adding Dynamic Data5:52 min
- 03Preparing Data on the Server-Side (through Nuxt)9:08 min
- 04Assignment - Server-Side Data (Problem)0:40 min
- 05Assignment - Server-Side Data (Solution)2:31 min
- 06asyncData on Client & Server3:17 min
- 07A Closer Look at the Context Object2:45 min
- 08Adding Async Data to a Single Post5:31 min
- 09Handling Errors with a Callback1:55 min
- 10Using Promises in asyncData3:17 min
- 11Important: Restart the dev server in next lecture!0:00 min
- 12Adding the Vuex Store7:59 min
- 13Vuex, fetch() and nuxtServerInit()9:26 min
- 14Wrap Up3:12 min
- 15Useful Resources & Links0:00 min
Connecting our App to the Backend45m
- 01Module Introduction0:45 min
- 02Executing Code on the Server3:36 min
- 03Adding Firebase as a Backend2:06 min
- 04Using Firebase to Store Data4:55 min
- 05Fetching Data from the Backend4:17 min
- 06Initializing our Store2:54 min
- 07Fetching all Posts5:09 min
- 08Assignment - Fetching Data (Problem)1:24 min
- 09Assignment - Fetching Data (Solution)3:42 min
- 10Editing Posts4:32 min
- 11Synchronizing Vuex and the Backend10:37 min
- 12Wrap Up1:59 min
- 13Useful Resources & Links0:00 min
Nuxt - Config, Plugins & Modules40m
- 01Module Introduction0:57 min
- 02The Nuxt Config File6:28 min
- 03The Loading Property3:28 min
- 04Working with Environment Variables5:37 min
- 05Manipulating Routing Settings4:34 min
- 06Animating Page Transitions3:17 min
- 07Adding Plugins5:16 min
- 08Registering a Date Filter2:10 min
- 09Understanding Modules8:08 min
- 10Wrap Up0:46 min
- 11Useful Resources & Links0:00 min
Middleware & Authentication1h 5m
- 01Module Introduction0:44 min
- 02What is Middleware?6:46 min
- 03Adding User Signup6:49 min
- 04Adding User Login2:53 min
- 05Storing the Token5:59 min
- 06Using the Token for Authentication3:21 min
- 07Implementing a Middleware4:10 min
- 08Invalidating the Token2:52 min
- 09Persisting the Token Across Page Refreshes9:53 min
- 10Implementing Cookies9:33 min
- 11Fixing the Logout Timer6:19 min
- 12Adding the Logout Functionality5:03 min
- 13A Quick Bugfix0:48 min
- 14Useful Resources & Links0:00 min
The Server Side12m
- 01Module Introduction1:13 min
- 02Adding Server Side Middleware6:18 min
- 03Testing the Middleware2:11 min
- 04Starting a Project with a Server Side Template3:09 min
- 05Useful Resources & Links0:00 min
And 2 more sections in the full course.
Ready to Get Started?
Choose the option that works best for you.
Single Course
Nuxt.js 2 - Vue.js on Steroids
One Payment. Lifetime Access.
$69one-time
- One-time payment
- All future updates for this course
- Downloadable resources & code
- Certificate of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Lifetime access
Most Popular
All-Access Membership
Everything we teach. One subscription.
$25/mo
$4,729+ worth of courses
- Full access to all courses
- All future courses included
- Downloadable resources & code
- Certificates of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Cancel anytime