Top 8 Recommended Nuxt.js Self-Study Materials! [November 2024]

Dive deep into the world of Nuxt 3 with this all-encompassing guide. Geared for developers eager to unlock the full power of the Nuxt 3 framework, this course offers you an intensive, project-based learning experience that will make you a full-stack Nuxt maestro.

Kick off your journey with the construction of a markdown-powered blog and portfolio. Learn how to effortlessly style it with Tailwind CSS, and get to grips with Nuxt's file-based routing to manage your content like a pro. Utilize built-in layouts to create reusable structure across different pages. Plus, level up the user experience by implementing a dark/light mode selector.

Then, escalate your skill set by developing a robust finance tracker application using Nuxt and Supabase. Master the art of creating composables and discover how to execute operations like getting, inserting, and updating data efficiently with Supabase. Explore Row Level Security (RLS) to manage data permissions and tap into Supabase Auth for seamless user authentication. Get hands-on with file uploads and make your app more interactive and functional. Integrate the NuxtUI component library to give your app a polished look and feel.

Through these projects, you'll explore best practices for Nuxt and Vue development that can be universally applied to any full-stack project. Plus, you won't have to worry about getting stuck; the course comes complete with full source code for each project. Don't miss the chance to unlock your full-stack potential. Dive in now.

1. Nuxt Setup and Basics: Getting Started Guide
2. Welcome! The Course Plan and Projects
3. Let's Understand: Why Vue and why Nuxt?
4. Let's Understand: Client vs Server vs Hybrid Rendering
5. What Can You Build With Nuxt? Real Examples!
6. Setting Up, Solving Issues, Q&A and Udemy UI
7. Current and Future Nuxt Version - Future-Proofing Projects
8. Getting Node.js
9. Build a Nuxt Blog & Portfolio: Essentials
10. Intro: Project #1 - What Are You Going to Learn?
11. Getting Nuxt 4 Ready
12. Create a Nuxt App & Understand Directory Structure
13. IMPORTANT PLEASE READ (IT'S SHORT)!
14. Enable Nuxt 4 Compatibility Mode - Essential for Nuxt 4 Users
15. Pages & Routing in Nuxt
16. Route Params & Links in Nuxt
17. Layouts
18. Setting Different Layouts
19. Build a Nuxt Blog & Portfolio: Modules, Tailwind, Components, SEO & Meta
20. Nuxt Modules & Installing Tailwind CSS
21. Styling the App with Tailwind CSS
22. Working with Components
23. SEO and Meta (And Custom Fonts)
24. Build a Nuxt Blog & Portfolio: Data Fetching Guide
25. Data Fetching
26. Data Fetching: Project List - Listing Your GitHub Projects
27. Build a Nuxt Blog & Portfolio: Dark Mode
28. Dark Mode in Your Project
29. Dark Mode Selector Button
30. Build a Nuxt Blog & Portfolio: Nuxt Content
31. Nuxt Content: Static File-Based CMS
32. Starting a Blog with Nuxt Content
33. Markdown and Typography
34. Markdown & Meta Tags (Front-Matter)
35. Custom Pages in Markdown & Typography Customization
36. Build a Nuxt Blog & Portfolio: Advanced Nuxt Content Examples
37. Nuxt Content: Images and Code Highlighting
38. Querying in Nuxt Content to Display Blog Post List
39. Vue Components in Markdown: Using MDC Syntax
40. Blog Post List Redesign #1: Building the UI
41. Blog Post List Redesign #2: Adding Logic for New UI
42. Moving Projects Page to Markdown
43. Build a Nuxt Blog & Portfolio: Adding a Table of Contents
44. Table of Contents: Using Slots
45. Table of Contents: Creating a Links Component
46. Table of Contents: Implementing Smooth Scrolling
47. Table of Contents: Highlighting Active Section
48. Build a Nuxt Blog & Portfolio: Errors, Page Transitions, Reusability
49. Handling 404 Errors: Page Not Found
50. Seamless Page Transitions
51. Designing Main Page: Reusing Components & Props in MDC
52. Build a Nuxt Blog & Portfolio: Fixes & Gotchas
53. Resolving Page Transitions & TOC Issues
54. Fixing Dark Mode & Perfecting the UI
55. Build a Nuxt Blog & Portfolio: Responsive UI & Sitemap with Server Routes
56. Adding Responsive Design
57. Generating Sitemap (Server Routes & Nitro)
58. Generating Static Site
59. Git, GitHub & Vercel: From Setup to Deployment in No Time
60. Intro: Git, GitHub & Vercel: From Setup to Deployment
61. Installing Git and Understanding Git and GitHub
62. Creating Repository, Staging, Committing and Setting Up GitHub
63. Connecting the Local & Remote Repository and Pushing Changes
64. Connecting GitHub to Vercel
65. Portfolio Deployment: Go Live with Vercel
66. Deploying the Portfolio Project on Vercel
67. Full-Stack Finance Tracking App With Nuxt and Supabase
68. Intro: Full-Stack Finance Tracking App with Nuxt & Supabase
69. IMPORTANT: Overview of Nuxt, NuxtUI Changes and Fixes
70. IMPORTANT: Nuxt 4 Compatibility
71. Creating the Finance Tracking Project!
72. Installing the NuxtUI Module
73. Adding Layout Support and Building the Header of the App
74. Summary Section and Period Selection
75. Trend Component (Icons, Spinners)
76. Trend Component (Showing Percentage Difference)
77. Currency Formatting Composable - Wrirting Reusable Code
78. Single Transaction Component
79. Creating Supabase Project
80. Using Supabase in Nuxt
81. Creating Transactions Table
82. Fetching Data - Using Supabase Client
83. Income or Expense Transaction?
84. Grouping Transactions by Date
85. Daily Summary of Transactions
86. Deleting Transactions and Toast Component
87. Refreshing View by Emitting Events
88. Transactions Totals
89. Modal Component
90. Custom Modal Component - Adding Transactions
91. IMPORTANT: Changes in NuxtUI Form Components
92. Forms: Inputs
93. Forms: State
94. Forms: Validation
95. Forms: Schema Validation with the Zod Library
96. Forms: Clearing Form Data and Errors
97. Database Seeding - Generating Fake Data
98. Sorting Transactions 2 Ways - on Backend and on Frontend
99. Forms: Saving Data (Adding Transaction)
100. Refactor Time: Composable - Transaction Fetching
101. Working With Dates - Calculate Transaction Time Periods
102. Fetching Only the Selected Transactions
103. IMPORTANT: Fixing Issues with Transaction Fetching!
104. Fixing Issues: With Hydration, Reactivity and Data
105. Authentication in Supabase
106. Authentication: Sign-In Form and Flow
107. Authentication: Sign-In Logic and Magic Links
108. Authentication: Magic Link Confirmation Page
109. Authentication: Signed In User Data & Signing Out
110. Authentication: Data Protection Setup
111. Authentication: Writing Insert/Select RLS Policies
112. Authentication: Admin Operations and Service Key (Seeder)
113. Authentication: Not Logged In? Redirect!
114. Refactor Time: Reusable App Toast Notification
115. Fixing Issues: User Menu and RLS For Delete Operation
116. User Profile: Nested Routes, Vertical Navigation and Settings Page
117. User Profile: Form
118. User Profile: Saving User Metadata & Changing Email
119. User Profile: Storing and Using App User Preferences
120. Introduction to Supabase Storage
121. Uploading Files (Avatar Image): Getting the File
122. Uploading Files (Avatar Image): Actual Upload to Storage and Access Policies
123. Uploading Files (Avatar Image): Deleting Files
124. Uploading Files (Avatar Image): Displaying User Avatar (Getting Public URL)
125. Editing Transactions - Making the Form Universal
126. Editing Transactions - Making it Work
127. Fixing Issues with Dates & Modals
128. Deploying the Finance Tracker Project
129. Configuring the Finance Tracker and Deploying on Vercel

Unleash the full power of Nuxt 3 with NuxtJS Fluency: The Premier Nuxt 3 Masterclass! This comprehensive course isn't just about learning Nuxt - it's about achieving Nuxt fluency. Become a Nuxt master and craft blazing-fast, SEO-friendly web apps with ease. Our in-depth lessons will transform you from Nuxt novice to Nuxt ninja, ready to tackle any project with confidence. Enroll now and join the Nuxt revolution!

Welcome to 'NuxtJS Fluency: The Premier NUXT 3 Masterclass', the best resource on the whole internet to learn NuxtJS, Master it, and become a professional Nuxt JS Developer! Get ready to master one of the most in-demand skills in the job market of web development.

This comprehensive masterclass covers Nuxt JS Version 3 with Node.js and Vue.js, powerful and popular programming languages and frameworks. Whether you're a beginner or have some knowledge, we'll guide you step-by-step through engaging 4K video tutorials and hands-on projects to ensure your success as a Nuxt.js developer.

Throughout the course, you'll build full-stack web applications, leveraging Nuxt.js for dynamic, interactive experiences. Covering basic concepts to advanced topics such as views, routing, styling, navigation, middleware, lazy loading, data fetching, state management, error handling, server-side, testing, authentication, and deployment, we've got you covered.

But this course goes beyond just teaching you syntax. We dive into the theory behind Nuxt JS, explaining why things are done in certain ways, so you can gain a deeper understanding of the subject matter.

Led by Noor Fakhry, an experienced software engineer and passionate instructor, this course combines his expertise with animations, real-life examples, amazing whiteboard explanations, hands-on coding 4K videos, and humor to make learning fun and engaging. Noor's goal is not only to teach you how to code but also to equip you with the skills and knowledge needed to succeed in the tech industry.

Noor's journey led him to discover his true passion for teaching programming and coding, where he finds joy in helping individuals achieve their aspirations and turn their dreams into reality. This very passion drove him to become a full-time online course creator at Programming Fluency.

By enrolling in this course, you'll save over $10,000 on bootcamps and gain access to 15+ hours of 4K video tutorials, quizzes, coding exercises, a private online classroom, and 3 major projects: Cinemate App (a full-stack movie info app like IMDB), Randoms (an API backend service) and Shopiverse (a fully functioning full-stack e-commerce web app).

In addition to learning the latest tools and technologies used by top tech companies like Apple, Google, Netflix, Microsoft, and Facebook, you'll also receive detailed animated explanation videos and a comprehensive curriculum developed based on years of experience and student feedback.

Get ready for a hands-on journey toward becoming a professional Nuxt JS developer! This comprehensive curriculum covers everything you need to know, starting from the basics and fundamentals of Nuxt JS and progressing to advanced topics and real-life projects.

Here's an overview of the topics covered in this course:

• We'll begin with the basics and fundamentals of Nuxt JS, ensuring you have a solid foundation to build upon.

• We will give you an introduction to Nuxt JS. We will learn what Nuxt JS is conceptually and technically. We'll explore what rendering a web page entails, including server-side rendering and client-side rendering, along with the pros and cons of each. We'll delve into universal rendering and its implications. Additionally, we'll differentiate between Nuxt JS and Vue JS.

• We will cover Nuxt JS fundamentals to establish a strong foundation in Nuxt. These fundamentals include views, routing, styling, navigation, lazy loading, and more.

• Then we will cover a crucial aspect of Nuxt JS and web development: Data fetching. We'll explore what it is and why it's essential. Afterward, we'll delve into Data fetching in Nuxt in detail, including the three Nuxt tools for data fetching: useFetch(), useAsyncData(), and $fetch().

• Then we will cover state management in Nuxt, which encompasses internal state, shared state, and shallow ref state.

• After that, we will explore how to handle errors effectively in Nuxt 3.

• Then we will progress to the server-side in Nuxt 3, focusing on the Nitro server component. We'll learn how to create backend applications using Nuxt 3.

• Then we will cover testing in Nuxt 3 and discuss how to test your Nuxt 3 apps.

• Then you will learn how to authenticate users in Nuxt 3 apps. We'll explore what authentication is in web development and introduce Supabase and its advantages. We'll cover using Supabase for authentication, including registration, logging in, logging out, and logging in with external providers like Google and GitHub.

• Then you will learn how to deploy any Nuxt 3 app online to showcase to potential employers.

• Then you will build and deploy a full-stack movie info web app named Cinemate (similar to IMDb) using Nuxt 3, Tailwind CSS, and Flowbite.

• After that, you will build and deploy an API backend service named Randoms using Nuxt 3. It will serve multiple data to users and be documented using a Nuxt theme called Docus.

• Then we will move on to our final and biggest project of this masterclass, which is building and deploying a fully functioning e-commerce app named Shopiverse using Nuxt 3, Tailwind CSS, Flowbite, Prisma, Supabase, and Stripe. We will then deploy it using Netlify.

• Then we will provide you with some advice and tips on what comes next for you.

In this course, Each lecture is provided as a high-quality 4K video with clear explanations.

Throughout the course, you will have access to the complete source code for every project and feature that we will build. This means you can review the code, experiment with it, and use it as a reference to deepen your understanding of Nuxt 3. Having the source code at your fingertips will empower you to explore and enhance the projects in your own unique way.

Mastering Nuxt JS version 3 is within your reach! With a commitment of just 3 to 6 months and dedicating 1 to 2 hours per day, you'll embark on a transformative journey. Each day, you'll build a new Nuxt 3 feature, immersing yourself in writing Nuxt JS code and getting your hands dirty. This active and consistent practice is the key to mastering Nuxt 3 and becoming a confident developer in this amazing technology.

By the end of this Masterclass, you'll have a comprehensive understanding of Nuxt JS version 3 and be equipped with the skills to build Full-Stack web applications, test them, deploy them, and ensure their reliability. Get ready to level up your Nuxt JS expertise and become a confident developer in this exciting field!

Whether you want to become a professional Nuxt JS developer or start your own tech startup, finishing this course and mastering Nuxt JS can be life-changing. So, why wait? Enroll now and unlock your potential as one of the best Nuxt JS web developers. Get ready to level up your coding skills and create real-world web applications with Nuxt JS version 3.

About Noor Fakhry(The Instructor):

Meet Noor Fakhry, an experienced software engineer with many years of hands-on experience working in the field. Noor is the founder and lead instructor at Programming Fluency, where he shares his expertise with aspiring programmers. With a strong background in software development, Noor brings practical knowledge and real-world insights to his teaching. He has worked on various projects and tackled complex challenges, gaining valuable experience that he now imparts to his students.

Noor's extensive experience as a software engineer enhances his ability to provide practical guidance and industry-relevant knowledge. He is currently pursuing a Master's degree in Computer Science, further deepening his understanding of the field. With a passion for both self-learning and formal education, Noor recognizes the specific needs of beginner coders and is committed to creating comprehensive and engaging programming and tech courses. His unique approach not only makes learning to code fun and interactive but also equips students with the skills they need to thrive in the tech industry. Noor goes beyond teaching coding concepts, he also emphasizes the reasoning behind certain practices, fostering a deeper understanding of the subject matter.

Being a self-taught programmer, Noor recognizes the abundance of online courses, tutorials, and books that tend to be excessively wordy and insufficient in imparting essential skills. Many individuals find themselves overwhelmed and uncertain about where to begin when learning programming and how to code. Furthermore, a considerable number of people lack the financial means to invest $20,000 in a coding bootcamp. The accessibility of programming skills should be inclusive and affordable for everyone. Educational materials ought to focus on imparting practical, up-to-date skills, ensuring they do not waste a student's precious time.

To enhance the learning experience, Noor employs animations, real-life examples, and whiteboard amazing explanations allowing students to visualize and comprehend complex concepts easily.

Noor's journey led him to discover his true passion in teaching programming and coding, where he finds joy in helping individuals achieve their aspirations and turn their dreams into reality. This very passion drove him to become a full-time online course creator at Programming Fluency.

JOIN Noor on a transformative journey towards programming fluency and a successful career in tech today!

Are you ready to become FLUENT in your favorite programming language?

1. Introduction to this Masterclass
2. What you are going to get from this Nuxt JS Masterclass
3. How to succeed in this Masterclass
4. Course Outlines
5. The tools that we are going to need in this Masterclass (All free)
6. How to download files from the Udemy Resources tab
7. How to solve the Coding Exercises
8. Join our private online classroom
9. One More Thing!!!
10. Introduction to NuxtJS
11. What is Nuxt JS Conceptually?
12. What is NuxtJS Technically?
13. What do we mean by 'Rendering a web page'?
14. Server-Side Rendering VS Client-Side Rendering
15. How Client-Side Rendering and Server-Side Rendering work?
16. A Coding Example on Server-Side Rendering
17. What is Universal Rendering? and why Nuxt uses it?
18. What do we mean by 'MORE CONTROL' in Client-Side Rendering
19. Test Your Knowledge: Server-Side Rendering vs. Client-Side Rendering Quiz
20. Nuxt VS Vue
21. NuxtJS Fundamentals [Part 1] (Installation, Views, Routing, Styling and more...)
22. What are we going to do in the upcoming sections [Labeled NuxtJS Fundamentals]
23. Installation: Setting up any Nuxt Project
24. Installing some useful VScode extensions [Optional]
25. Configuration in Nuxt JS
26. Nuxt Devtools
27. Views: app.vue file
28. Coding Exercise (Create a "Hello World" app) {Prompt}
29. Coding Exercise (Create a "Hello World" app) {SOLUTION}
30. Views: Vue Components
31. Coding Exercise (Creating a NavBar Component) {Prompt}
32. Coding Exercise (Creating a NavBar Component) {Solution}
33. Examine your understanding of Vue Components
34. Routing: Pages
35. Routing: Route groups
36. Coding Exercise (Defining Pages for NavBar Items) {Prompt}
37. Coding Exercise (Defining Pages for NavBar Items) {Solution}
38. Examine your understanding of Nuxt Pages
39. Routing: Navigation
40. Coding Exercise (Adding Navigation Links to NavBar Items) {Prompt}
41. Coding Exercise (Adding Navigation Links to NavBar Items) {Solution}
42. Routing: Route parameters
43. Routing: Route parameters ($route)
44. Routing: Route parameters (catch all routes)
45. Coding Exercise (Create a Route for Personalized Greetings) {Prompt}
46. Coding Exercise (Create a Route for Personalized Greetings) {Solution}
47. Nuxt 3 Route Parameters: A Quick Check
48. Routing: Route middleware (Part 1)
49. Routing: Route middleware (Part 2)
50. Routing: Route middleware (Part 3)
51. Routing: Route middleware (Part 4)
52. Nuxt 3 Middleware Fundamentals Quiz
53. Routing: Route validation
54. Views: Layouts
55. Lazy Loading in Nuxt 3 (Dynamic Imports)
56. Assets
57. Styling
58. SEO and Metadata
59. Transitions
60. NuxtJS Fundamentals [Part 2] (Data Fetching)
61. Data Fetching: What is Data Fetching?
62. What is an API ( A video from our YouTube Channel ) [Optional Lecture]
63. Data Fetching: useFetch() composable (How does it work?)
64. Data Fetching: useFetch() composable (Adding Dynamic URLS)
65. Data Fetching: useFetch() composable (De-Duplicating Fetch Requests)
66. Data Fetching: useFetch() composable (Adding a Base URL)
67. Data Fetching: useFetch() composable (Doing a POST Request)
68. Data Fetching: useFetch() composable (Doing a PUT Request)
69. Data Fetching: useFetch() composable (Doing a PATCH Request)
70. Data Fetching: useFetch() composable (Adding query or params)
71. Data Fetching: useFetch() composable(Avoid fetching data on the server)
72. Data Fetching: useFetch() composable (lazy option)
73. Data Fetching: useFetch() composable (immediate option)
74. Data Fetching: useFetch() composable (default option)
75. Data Fetching: useFetch() composable (transform option)
76. Data Fetching: useFetch() composable (pick option)
77. Data Fetching: useFetch() composable (watch option)
78. Data Fetching: useFetch() composable (getCachedData option)
79. Data Fetching: useFetch() composable (deep option)
80. Data Fetching: useFetch() composable (Return Values)
81. Coding Exercise (Create a currency converter App using useFetch() ) {Prompt}
82. Coding Exercise (Create a currency converter App using useFetch() ) {Solution}
83. Are You a Nuxt 3 useFetch Pro?
84. Data Fetching: $fetch() Library
85. Data Fetching: useAsyncData() composable
86. Put Your Nuxt 3 Data Fetching Skills to the Test (Multiple Select)
87. NuxtJS Fundamentals [Part 3] (State Management)
88. useState() Composable
89. Shared State
90. Creating a shared State Composable
91. shallowRef State
92. Coding Exercise (Build a Todo Web App using useState()) {Prompt}
93. Coding Exercise (Build a Todo Web App using useState()) {Solution}
94. Can You Handle Nuxt 3 useState()? Take the Quiz!
95. NuxtJS Fundamentals [Part 4] (Error Handling)
96. Error Pages
97. createError()
98. clearError()
99. Nuxt 3 Error Handling: Test Your Knowledge!
100. NuxtJS Fundamentals [Part 5] (Nitro Server)
101. The server directory
102. Server Routes
103. Server Route Parameters
104. Catching all routes on the server-side
105. Body Handling
106. Query Parameters
107. Matching HTTP Method
108. Server Middleware
109. Runtime Config and .env file
110. Request Cookies
111. Sending Redirect
112. NuxtJS Fundamentals [Part 6] (Testing in Nuxt JS)
113. Why Testing is very important?
114. Adding all test utilities and libraries
115. Using Vitest
116. Using Vue Test Utilities
117. Using Nuxt Test Utilities
118. NuxtJS Fundamentals [Part 7] ( Authentication of Users in Nuxt 3 using Supabase)
119. What is Authentication in Web Development?
120. What is supabase?
121. How does Authentication with Supabase works Conceptually
122. Establishing the connection between our Nuxt app and Supabase
123. Allowing users to Register to our Nuxt App using Supabase
124. Allowing users to Logout from our Nuxt App using Supabase
125. Allowing users to Login to our Nuxt App using Supabase
126. Allowing users to Login with their Google or GitHub Accounts
127. NuxtJS Fundamentals [Part 8] ( Deployment of Nuxt JS Apps )
128. Running the production build locally on your computer
129. Deploying any Nuxt App to the Internet
130. Build and Deploy a Movie Info App (Cinemate) using Nuxt 3 and Tailwind CSS
131. What are we going to build in this project
132. Setting up the Project
133. Exploring the Movie DB website and getting our free API key
134. Defining the Pages of our app
135. Defining the components of our app
136. Defining the layouts of our app
137. Creating the MovieCard component
138. Creating the SeriesCard component
139. Creating the default layout of the project
140. Fetching the 'Discover movies and series' data on the server-side
141. Creating the home page of the App [Discover Movies Page]
142. Fetching the 'Now Playing' data on the server-side
143. Creating the page that will display the 'Now Playing' data on the client-side
144. Fetching the 'popular' data on the server-side
145. Creating the page that will display the 'popular' data on the client-side
146. Fetching the 'search' data on the server-side
147. Creating the page that will display the search results on the client-side
148. Fetching the 'Top Rated' data on the server-side
149. Creating the page that will display the 'Top Rated' data on the client-side
150. Fetching the 'Upcoming' data on the server-side
151. Creating the page that will display the 'Upcoming' data on the client-side
152. Creating the page that will display a single item
153. Deploying Cinemate App to the Internet on Netlify
154. Fixing a Bug in Cinemate App
155. The source code for Cinemate App (on Github)
156. Build and Deploy an API Service (Randoms) with documentation using Nuxt & Docus
157. What are we going to build in this project
158. Setting up the project
159. Setting up our API endpoints
160. Exploring api ninjas and getting an API key
161. celebrities API Endpoint
162. posts API Endpoint (Get all posts)
163. posts API Endpoint (adding a new post)
164. posts API Endpoint (getting a specific post)
165. posts API Endpoint (editing a specific post)
166. posts API Endpoint (editing part of a specific post)
167. posts API Endpoint (deleting a post)
168. products API Endpoints (Get all products)
169. products API Endpoint (adding a new product)
170. products API Endpoint (getting a specific product)
171. products API Endpoint (Editing a specific product)
172. products API Endpoint (Getting all categories)
173. products API Endpoint (Getting a specific category type)
174. Writing the documentation for our APIs using markdown
175. Deploying Randoms App to Netlify
176. The source code for Randoms App (on Github)
177. Build and Deploy a fully functioning E-commerce App (Shopiverse) using Nuxt 3
178. What are we going to build in this project
179. Setting up the Project (The dependencies and the Database setup)
180. Defining the UI components of the app
181. Creating the Header Component
182. Creating the PublicNav Component
183. Creating the UserNav Component
184. Creating the ProductComp Component
185. Creating the Loading Component
186. Creating the Default Layout of the App (Including applying the dark mode)
187. Creating the shared state of the App (The Shopping Cart state)
188. Creating the home page of the App
189. Creating the API endpoint to fetch products data
190. Creating the Register Page
191. Creating the Confirm page
192. Creating the Logout Page
193. Creating the login page
194. Creating login with Google and GitHub functions
195. Creating the Search Page
196. Fetching the search results on the server-side
197. Creating the About Page using ChatGpt
198. Creating the Page to display a single item
199. Creating the 'Sell on Shopiverse' Feature (Part 1)
200. Creating the 'Sell on Shopiverse' Feature (Part 2)

This is the most comprehensive Nuxt 3 course on the market. You will learn many of Nuxt's incredible features all while build six real world projects. With each new project we will dive deep into more and more advanced Nuxt 3 concepts. By the end of the course you can proudly label yourself as a Nuxt expert!

What you'll learn

In the introduction, you will learn exactly what Nuxt is and problems it solves. You will learn about client-side rendering and compare it with universal rendering.

In the first project, we will refresh your Vue 3 knowledge by building an app with the composition API. We will also learn about TypeScript and how Nuxt handles components.

In the second project, we will dive deeper into the Nuxt ecosystem. We will learn about file-based routing, layouts, and defining page metadata.

In the third project, we will learn all about how we can globally manage state with composables.

In project number four, we will learn how to make HTTP requests by using useFetch and useAsyncData.

In the fifth project, we will leverage the powers of Nuxt to build our very own REST API and utilizing it in the client.

Lastly, in the sixth project, we will integrate our app with Supabase to leverage it's authentication and SQL database services.

1. Building The UI Elements
2. What We Will Be Building
3. Your Two Options
4. Creating a Nuxt App
5. Adding Tailwind CSS
6. Building the NavBar
7. Building the Home Hero
8. Building the Search Bar
9. Building the Side Bar
10. Building the Car Card
11. Building the Car Details Page
12. File Based Routing & Navigation
13. Intro to File Based Routing
14. Auto Importing Components
15. Dynamic and Optional Paths
16. Filling the Page With Components
17. Unique Dynamic Paths
18. The NuxtLink Component
19. Adding Programmatic Navigation
20. Implementing Nested Pages
21. Change Titles With useHead
22. Defining Page Layouts
23. Defining a Default Layout
24. Defining a Custom Layout
25. Storing Common Functionality in Composables
26. Handling Client and Server Errors
27. Adding a Page Not Found Page
28. The useError Composable
29. Dynamically Rendering the Car Cards
30. Dynamically Rendering the Car Details Page
31. Throwing a Custom Server Error
32. How Nuxt Renders Content
33. Updating the Location
34. Throwing a Client Side Error
35. NuxtErrorBoundary to Handle Client Side Errors
36. Improving Functionality With Utilities
37. Optimizing Images with NuxtImg
38. The useState Composable
39. Adding the Vueuse Module
40. Forcing Client Side Rendering
41. Revisiting the Skipped Functionality
42. Adding the Car Make Filter
43. Adding the Car Price Filter
44. Authentication and Middleware
45. Our New Feature
46. [OPTIONAL] - Assembling the Pages
47. Creating a Supabase Account
48. Connecting Supabase to Our Nuxt App
49. Enabling Google Authentication
50. Implementing Google OAuth
51. Conditionally Rendering UI Based on Auth Status
52. Implementing the Logout Functionality
53. Protecting Routes With Inline Route Middleware
54. Named Middleware For DRY Code
55. Global Middleware for DRYER Code
56. Server Endpoints and HTTP Requests
57. Intro to Server Endpoints
58. Creating a Server Endpoint
59. Extracting the Path Parameters
60. Extracting the Query Parameters
61. Fetching the Data From the Client
62. A Hacky Way of Refetching Data
63. Adding a Not Found Message for Better UI
64. Adding the Fetch Car Endpoint
65. Another Fetch Composable
66. Fixing an Issue With Error Handling
67. Utilizing Postgres for Data Transactions
68. A Small SQL Crash Course
69. Installing an ORM
70. Programmatically Creating Our Tables
71. A Perfect Endpoint
72. HTTP Verbs
73. Fetching Data From the Database
74. Deleting Data From the Database
75. Adding the Other Two Endpoints
76. Complex Filters
77. Our Last Endpoint
78. Making a POST Request From the Client
79. Making a GET Request From the Client
80. Making a DELETE Request From the Client
81. Fixing the GET Endpoints
82. A POST Message Endpoint
83. A GET Message Endpoint
84. Image Storage and Retrieval
85. Storing Images in a Bucket
86. Retrieving the Image URL
87. BEGINNING OF LEGACY COURSE. WILL DELETE IN THE FUTURE
88. Please Watch This
89. [LEGACY] - Introduction
90. Introduction to Nuxt and it's Benefits
91. Client-Side vs Server-Side vs Universal Rendering
92. Pros and Cons of Client-Side and Universal Rendering
93. Course Prerequisite
94. [LEGACY] - Diving into Nuxt
95. App Overview
96. Creating a Nuxt App
97. Exploring the Boilerplate
98. Building the Boilerplate HTML
99. Styling Our App
100. Managing State
101. A Little Bit of TypeScript
102. Updating Our State After a Click Event
103. Adding the Names Array
104. Computing Names Based on Options
105. Creating the Name Cards
106. Working with Components
107. Passing Props to the Components
108. Computing the Class Names
109. Dealing with Nested Components
110. Emitting Events to the Parent Component
111. [LEGACY] - Pages and File-Based Routing
112. App Overview
113. Adding Bootstrap Globally
114. Creating the Landing Page
115. Adding Pages into Our App
116. Building the Restaurant Page
117. Adding the Restaurant Page Logic
118. Dynamic and Nest Routes
119. Extracting Path Parameters
120. Catching the Not Found Error
121. [LEGACY] - Formatting Pages with Layouts
122. Defining the Default Layout
123. Creating a Custom Page Layout
124. Injecting Custom Elements to Layout Page
125. [LEGACY] - Defining Page Meta Data for Better SEO
126. Option 1: Using Components
127. Option 2: Using Composables
128. [LEGACY] - Global State and Composables
129. App Overview
130. Approaches to State Management
131. Creating Our First Composable
132. Using the Compasable State
133. Mutating Our Global State
134. [LEGACY] - Fetching Data and HTTP Requests
135. App Overview
136. Integrating Tailwind
137. Writing the HTML Structure
138. The Basics of HTTP Requests
139. The useFetch Composable
140. Refetching Data with useFetch
141. The useAsyncData Composable
142. Refetching Data with useAsyncData
143. [LEGACY] - Cookies and Runtime Config
144. Storing Data in the Browser with Cookies
145. The useCookie Composable
146. Storing Runtime Configs
147. Error Handling
148. [LEGACY] - Building a REST API
149. App Overview
150. Our Endpoints
151. Creating Our Server
152. GET Requests
153. POST Requests and Body
154. PUT & DELETE with Dynamic Endpoints
155. Error Handling
156. Building the HTML
157. Making POST, PUT, DELETE Requests From the Frontend
158. Organizing Code in Composable
159. [LEGACY] - Integrating with Supabase
160. App Overview
161. Building the Authentication Card
162. Conditionally Displaying Signup or Signin Form
163. Creating a Supabase Account and Project
164. Connect Nuxt to Supabase
165. [LEGACY] - Handling Authentication
166. Implementing Signup Logic
167. Implementing Signin/Login Logic
168. Implementing Signout/Logout Logic
169. Handling Authentication Errors
170. Redirecting to Profile Page
171. Creating the Nav Component
172. Conditionally Render UI Elements Based on Auth Status
173. Protecting Routes with Middleware
174. [LEGACY] - SQL and Database Transactions
175. Creating the Note Form
176. The Basics of SQL
177. Saving Data to the Database
178. Accessing Data From the Database
179. This is the Updated Course

Note: We have added an EXTRA React 18 course.

As an enhanced version of Vue, Nuxt has more functionalities and is also easier to configure. With Nuxt, you can code less but do more.

You don’t have to be a Vue expert to study Nuxt. Just basic Vue knowledge is enough.

In the first section, we will create a Vue app using Vue CLI 3.

The file structure created by Vue CLI 3 is very similar to the one used in Nuxt. They even have the same mechanism of generating pages.

We will recreate the same app using Nuxt and show you the similarities between Vue and Nuxt.

Your previous Vue knowledge can help you quickly understand the working mechanism of Nuxt. Once you have understood how Nuxt works, you can master it in no time.

Our official Nuxt study includes five sections.

1. Nuxt basics

2. Nuxt plugins and modules

3. Nuxt routing system

4. Nuxt context

5. Data exchange with the backend program (Express.js)

At the end of each section, there will be an infographic article to help you review everything you just learned.

Each review is followed by a practice session where you will practice and apply everything you have learned by creating a real app. You will also learn many new skills in this process, including how to handle cookies and create a membership system.

1. Complimentary Section: Free React 18.3 Course
2. The React Strategy Explained in 3 Minutes
3. React Introduction
4. First Component
5. Event Handler and State Setter
6. JSX
7. JSX Challenge: Creating a List from an Array or an Object
8. Always More Complicated: Creating a List in Real-life Projects
9. Sorting a List in Real-life Projects
10. Pinning a List Item to the Top
11. Controlling the Order of Every List Item
12. Opening or Closing Any List Item
13. Create a Vue App using Vue-CLI 3
14. Set up a Vue app using Vue-CLI 3
15. Project root directory analysis
16. App design
17. Create the App Part 1
18. Create the App Part 2
19. Project wrap-up
20. Get source code
21. Nuxt fundamentals
22. Set up Nuxt
23. Project file structure analysis
24. Layout
25. Custom error page
26. Mini practice: custom page layout
27. Nuxt fundamentals: review and practice
28. Reivew
29. Create the header, main and footer
30. Create the navi bar
31. Create pages
32. The error page and challenge
33. Nuxt plugins
34. Universal CSS and CDN
35. Assets VS. static
36. UI Module: bootstrap-vue
37. Vue Meta in Nuxt
38. VueX in Nuxt Part 1
39. VueX in Nuxt Part 2
40. Nuxt plugins: review and practice
41. Review
42. CDN, plugin and Nuxt module
43. Custom head information
44. Universal CSS and linkExactActiveClass
45. VueX
46. Nuxt routing system
47. Nuxt Router Introduction
48. Nested route
49. nuxt-link
50. active-link
51. Create transition effects and animate.css
52. Dynamic route Part 1
53. Dynamic route Part 2
54. Dynamic nested route
55. Validate
56. Nuxt routing system: review and practice
57. Review
58. Highlight the active button and unexpected problems
59. Nested route
60. Dynamic nested route
61. The home page and the validate method
62. Context and middleware
63. Introduction to Context
64. How to create and register middlewares
65. Middleware and Nuxt router
66. Middleware and VueX
67. The four Nuxt context methods: review and practice
68. Review
69. The Express program we use
70. Operating Cookie using Middleware
71. Cookie-universal-nuxt
72. Lock out unregistered users
73. Retrieve data from the backend program
74. Introduction to asyncData
75. Return promise
76. async await
77. axios module
78. The fetch method
79. The nuxtServerInit Action Method
80. Get Source Code
81. Retrieve data from the backend program: review and practice
82. Review
83. Retrieve data for the homepage using nuxtServerInit
84. Retrieve data for the gallery comp. using fetch
85. Retrieve data for the introduction page using asyncData
86. Final app source code

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 Vue-js 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'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!

1. Getting Started
2. Welcome & Introduction
3. What is Nuxt.js?
4. Join our Online Learning Community
5. Understanding Server Side Rendering
6. Nuxt vs "Normal" Server Side Rendering
7. Creating New Nuxt Projects & Nuxt 2
8. Creating our First Nuxt App
9. Understanding the Folder Structure
10. What can we Build with Nuxt?
11. What's Inside This Course?
12. How To Get The Most Out Of This Course
13. Where to Find the Source Code
14. Pages, Routing & Views
15. Module Introduction
16. From Folders to Routes
17. Creating a Route with a Dynamic Path
18. Adding Links & Navigating Around
19. Time to Practice - Pages & Routing
20. Validating Parameters
21. Creating Nested Routes
22. Layouts, Pages & Components - Theory
23. Adding a New Layout
24. Adding a Default Error Page
25. Working with "Normal" Components
26. Styling Nuxt Apps
27. Wrap Up
28. Useful Resources & Links
29. Project - Pages, Routing & Views
30. Module Introduction
31. Creating the Main "Sections" (Pages)
32. Adding External Fonts
33. Creating the Landing Page
34. Splitting the Page into Components
35. Adding Static Assets - The Background Image
36. Adding the Header Component
37. Vue Router vs. Nuxt Router
38. Working on the Post Page
39. Creating an Admin Section
40. Preparing the Backend
41. Improving the App
42. Adding a Separate Layout to the Admin Area
43. Useful Resources & Links
44. Handling Data
45. Module Introduction
46. Adding Dynamic Data
47. Preparing Data on the Server-Side (through Nuxt)
48. Time to Practice - Server-Side Data
49. asyncData on Client & Server
50. A Closer Look at the Context Object
51. Adding Async Data to a Single Post
52. Handling Errors with a Callback
53. Using Promises in asyncData
54. Important: Restart the dev server in next lecture!
55. Adding the Vuex Store
56. Vuex, fetch() and nuxtServerInit()
57. Wrap Up
58. Useful Resources & Links
59. Connecting our App to the Backend
60. Module Introduction
61. Executing Code on the Server
62. Adding Firebase as a Backend
63. Using Firebase to Store Data
64. Fetching Data from the Backend
65. Initializing our Store
66. Fetching all Posts
67. Time to Practice - Fetching Data
68. Editing Posts
69. Synchronizing Vuex and the Backend
70. Wrap Up
71. Useful Resources & Links
72. Nuxt - Config, Plugins & Modules
73. Module Introduction
74. The Nuxt Config File
75. The Loading Property
76. Working with Environment Variables
77. Manipulating Routing Settings
78. Animating Page Transitions
79. Adding Plugins
80. Registering a Date Filter
81. Understanding Modules
82. Wrap Up
83. Useful Resources & Links
84. Middleware & Authentication
85. Module Introduction
86. What is Middleware?
87. Adding User Signup
88. Adding User Login
89. Storing the Token
90. Using the Token for Authentication
91. Implementing a Middleware
92. Invalidating the Token
93. Persisting the Token Across Page Refreshes
94. Implementing Cookies
95. Fixing the Logout Timer
96. Adding the Logout Functionality
97. A Quick Bugfix
98. Useful Resources & Links
99. The Server Side
100. Module Introduction
101. Adding Server Side Middleware
102. Testing the Middleware
103. Starting a Project with a Server Side Template
104. Useful Resources & Links
105. Building a Nuxt App
106. Module Introduction
107. Universal vs SPA vs Static
108. Building our App as a Universal App
109. Deploying a Universal App
110. Building our App as a SPA
111. Fetching Data in the SPA
112. Building our App as a Static Website
113. Improving the Generate Process
114. Limiting the Amount of http Requests
115. Adjusting the Store
116. Deploying SPAs and Static Webpages
117. Useful Resources & Links
118. Round Up
119. Course Roundup
120. Bonus: More Content!