Nuxt.js - Vue.js on Steroids
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.
More
- 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 :)
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
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!
- 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!)
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
Watch Online Nuxt.js - Vue.js on Steroids
| # | Title | Duration |
|---|---|---|
| 1 | Welcome & Introduction | 01:54 |
| 2 | What is Nuxt.js? | 02:59 |
| 3 | Understanding Server Side Rendering | 04:02 |
| 4 | Nuxt vs "Normal" Server Side Rendering | 01:33 |
| 5 | Creating our First Nuxt App | 05:08 |
| 6 | Understanding the Folder Structure | 05:39 |
| 7 | What can we Build with Nuxt? | 02:34 |
| 8 | What's Inside This Course? | 02:07 |
| 9 | How To Get The Most Out Of This Course | 01:58 |
| 10 | Module Introduction | 00:56 |
| 11 | From Folders to Routes | 06:33 |
| 12 | Creating a Route with a Dynamic Path | 05:25 |
| 13 | Adding Links & Navigating Around | 06:22 |
| 14 | Validating Parameters | 05:58 |
| 15 | Creating Nested Routes | 03:12 |
| 16 | Layouts, Pages & Components - Theory | 01:31 |
| 17 | Adding a New Layout | 03:53 |
| 18 | Adding a Default Error Page | 01:24 |
| 19 | Working with "Normal" Components | 07:52 |
| 20 | Styling Nuxt Apps | 05:36 |
| 21 | Wrap Up | 01:04 |
| 22 | Module Introduction | 01:14 |
| 23 | Creating the Main "Sections" (Pages) | 07:59 |
| 24 | Adding External Fonts | 03:50 |
| 25 | Creating the Landing Page | 05:51 |
| 26 | Splitting the Page into Components | 08:29 |
| 27 | Adding Static Assets - The Background Image | 02:34 |
| 28 | Adding the Header Component | 05:55 |
| 29 | Vue Router vs. Nuxt Router | 01:30 |
| 30 | Working on the Post Page | 04:34 |
| 31 | Creating an Admin Section | 12:37 |
| 32 | Preparing the Backend | 10:21 |
| 33 | Improving the App | 02:38 |
| 34 | Adding a Separate Layout to the Admin Area | 02:51 |
| 35 | Module Introduction | 01:01 |
| 36 | Adding Dynamic Data | 05:53 |
| 37 | Preparing Data on the Server-Side (through Nuxt) | 09:09 |
| 38 | asyncData on Client & Server | 03:18 |
| 39 | A Closer Look at the Context Object | 02:46 |
| 40 | Adding Async Data to a Single Post | 05:32 |
| 41 | Handling Errors with a Callback | 01:56 |
| 42 | Using Promises in asyncData | 03:18 |
| 43 | Adding the Vuex Store | 08:00 |
| 44 | Vuex, fetch() and nuxtServerInit() | 09:27 |
| 45 | Wrap Up | 03:13 |
| 46 | Module Introduction | 00:46 |
| 47 | Executing Code on the Server | 03:37 |
| 48 | Adding Firebase as a Backend | 02:07 |
| 49 | Using Firebase to Store Data | 04:56 |
| 50 | Fetching Data from the Backend | 04:18 |
| 51 | Initializing our Store | 02:55 |
| 52 | Fetching all Posts | 05:10 |
| 53 | Editing Posts | 04:33 |
| 54 | Synchronizing Vuex and the Backend | 10:38 |
| 55 | Wrap Up | 02:00 |
| 56 | Module Introduction | 00:58 |
| 57 | The Nuxt Config File | 06:29 |
| 58 | The Loading Property | 03:29 |
| 59 | Working with Environment Variables | 05:39 |
| 60 | Manipulating Routing Settings | 04:35 |
| 61 | Animating Page Transitions | 03:18 |
| 62 | Adding Plugins | 05:17 |
| 63 | Registering a Date Filter | 02:11 |
| 64 | Understanding Modules | 08:09 |
| 65 | Wrap Up | 00:47 |
| 66 | Module Introduction | 00:45 |
| 67 | What is Middleware? | 06:47 |
| 68 | Adding User Signup | 06:50 |
| 69 | Adding User Login | 02:54 |
| 70 | Storing the Token | 06:00 |
| 71 | Using the Token for Authentication | 03:22 |
| 72 | Implementing a Middleware | 04:11 |
| 73 | Invalidating the Token | 02:53 |
| 74 | Persisting the Token Across Page Refreshes | 09:54 |
| 75 | Implementing Cookies | 09:34 |
| 76 | Fixing the Logout Timer | 06:20 |
| 77 | Adding the Logout Functionality | 05:04 |
| 78 | A Quick Bugfix | 00:49 |
| 79 | Module Introduction | 01:14 |
| 80 | Adding Server Side Middleware | 06:19 |
| 81 | Testing the Middleware | 02:12 |
| 82 | Starting a Project with a Server Side Template | 03:10 |
| 83 | Module Introduction | 00:32 |
| 84 | Universal vs SPA vs Static | 03:02 |
| 85 | Building our App as a Universal App | 02:03 |
| 86 | Building our App as a SPA | 05:45 |
| 87 | Building our App as a Static Website | 03:22 |
| 88 | Improving the Generate Process | 04:44 |
| 89 | Limiting the Amount of http Requests | 03:05 |
| 90 | Adjusting the Store | 02:34 |
| 91 | Course Roundup | 00:57 |
Similar courses to Nuxt.js - Vue.js on Steroids
Full-Stack Vue with GraphQL - The Ultimate Guide
Using Vue 2 to Create Beautiful SEO-Ready Websites
Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)
A “Wordle” on Test Driven Development in Vue.js
