Nuxt 3 - Course for Beginners 

Excellent tutorial! 💯Thank you! Fast paced! "Actually" I needed 8 days to absorb the 3 hrs! ☺ Keep it up Guillaume!

Incredibly concise lecture for beginners. Thank you.

What I didn't see covered was running this under a typical hosted server, after some research I found that the .ouput folder is where the nitro server file for production is needed to be run. This is important because I run this in docker containers. Good tutorial otherwise :), great work! To support SSL in this server you need to create an init function server: { async init(server) { in the nuxt.config.js file

Very nicely taught 💯 the instructor's pace, style of teaching, flow of topics was perfect!

Probably the best intro what i found ... Im enjoing on next playlist from ur channel Guillaume ;)

Great course. Love your smiles and enthusiasm. And your accent. I look forward to using my "ooks"!! :-). Great job. Thanks.

This is such a good overview of nuxt and vue development. Very nice work please keep this up!

I really appreciate this folder and file based approach from Nuxt. Thank you Guillaume !

Thank you for this course; complete coverage, perfect rhythm, excellent diction perhaps also because your incomparable French accent helped me quite a bit. Everything seems clear to me now and this is your success as a teacher.

Awesome content ❤

❤I very liked the course and se french accent😊 Merci beaucoup Guillaume

Awesome course, you’re spending the needed amount of time on each feature. Not too much, not too less. I would recommend it for sure ✅

One of the best intros to Nuxt 3 ❤️

excellent tutorial, thanks for the effort! please keep in mind that one package manager should be used and seems that you have yarn and npm in this project

Just when I was looking to make a project with Nuxt 👌

02:01:39 For anyone who can't see the data rendered properly, you should remove the `transform` option since the API no longer returns an object with the `data` key.

finally i am waiting for that from long time thanks

aweomse, i've been wanting this.

There is a component missing on the new version of the tailwind installation on their website. To fix, add "./nuxt.config.{js,ts}", to the tailwind config file.

Thank you so much for this course

Thank you so much, for such awesome content, I subscribed and liked your channel, this video is much helpful 👍🙌👌🎉🎊

Thanks for this great series of chapters! what's the main difference between modules and plugins?

Thank you so much for this amazing tutorial!!! Could you please help which extensions are you using in VS Code? I have problem my custom components are not highlighting in template so it's like regular html tags

Goooooood tutorial!

thanks a lot bro!

Thank you so much for this course. Kindly upload a tutorial for Shopify development with next js

Good thank you sir

Thank you 🙏

Very interesting, does one need to learn VueJS first before jumping into this tutorial? Thanks again for another excellent video!

Thanks!

There is a nuxt module for tailwind, saves you some files, some time

Which template do you use in vscode?

Could you please let me know the VS code extenstions you are using with Nuxt?

does anyone know how to use the auto complete function when typing "vsetup"?

thank you 😊

I can't find the repository sir.

Great tutorial! Can you share the code of this tutorial?

@codewithguillaume, thank you so much for such an excellent job!

Danke!

🎯 Key Takeaways for quick navigation: 00:00 Nuxt *3 introduction.* 00:54 Course *program overview: creating apps, pages, routing, components, layouts, images, composable, plugins, middlewares, modules, state management, rendering modes (SSR, SWR, eBread), servers, and more.* 03:42 Nuxt *3 installation and project structure.* 05:07 Project *structure differences from Vue 3, auto-import of components, and CSS setup.* 08:32 Tailwind *CSS integration.* 10:49 Creating *and understanding routes using the file system in Nuxt 3.* 14:08 Dynamic *routes and parameter handling in Nuxt 3.* 18:14 Using *`useRoute` for dynamic route parameters and accessing context with `useNuxtApp`.* 21:19 Navigating *between routes using Nuxt Link component.* 22:36 Brief *overview of middleware in Nuxt for handling authentication and user entry URL validation.* 23:29 Auto-import *feature in Nuxt 3 for components, eliminating the need for explicit imports.* 23:59 Components *in Nuxt 3.* 24:56 Simplified *component usage.* 25:48 Nuxt *component organization.* 26:40 Creating *a deeper component tree.* 27:33 Importing *nested components.* 28:55 Tips *for component architecture.* 31:28 Nuxt3's *auto import feature for components.* 32:44 Layouts *in Nuxt.js.* 34:31 Defining *and using custom layouts.* 36:39 Managing *styles with layouts.* 38:05 Nuxt's *public and assets directories.* 39:57 Purpose *of the assets directory.* 43:55 Purpose *of the public directory.* 46:29 Efficient *use of SVG icons in Nuxt.* 48:57 Introduction *to composables in Vue 3.* 49:47 Composeables *for reusability.* 53:01 Vue *use library benefits.* 55:21 Nuxt *plugins for global functions.* 01:01:39 Nuxt *middlewares for route operations.* 01:08:05 Nuxt *modules for enhanced functionality.* 01:13:44 Nuxt *3 user state for shared state management.* 01:14:58 User *demonstrates creating shared state in Nuxt 3 using a composable called `states.ts`.* 01:18:29 User *considers using either Nuxt 3's user state or Pinya for state management, referencing an article for guidance.* 01:20:19 User *decides to explore Pinya as a state manager, demonstrates installation, and compares it with user state.* 01:21:13 User *creates a Pinya store, explains the structure, and contrasts it with the Vue 2 way of using options API.* 01:23:47 Introduction *to Nuxt 3's server directory for backend functionality, with emphasis on API handling and server middleware.* 01:25:06 User *demonstrates creating a simple endpoint in the server API folder and explains the purpose of integrating backend logic.* 01:27:15 User *talks about the hybrid mode in Next 3, emphasizing the ability to have both frontend and backend in the same application.* 01:34:15 Brief *overview of Nitro, the new server engine powering Next 3, highlighting features like cache API support and serverless capabilities.* 01:37:51 User *discusses the importance of understanding Nitro for backend operations in Next.js 3, mentions deployment options and its role in the course.* 01:39:08 User *transitions to the most crucial lesson, rendering options in Next.js 3, mentioning its significance for SEO and the upcoming exploration of both old and new documentation.* 01:40:02 SSR *vs. static site* SSR: Server *renders on each request.* Static site: *Renders at build time, no server needed.* SSR essential *for SEO, ensures fresh data for search engines.* 01:41:55 Client-side *rendering pros and cons* Pros: Development *speed, cost, offline functionality.* Cons: Performance, *requires good internet, poor SEO.* 01:45:20 Universal *rendering with SSR* Browser requests *URL with universal rendering enabled.* Server returns *fully rendered HTML page to the browser.* Hydration completes *static page interactivity in the browser.* 01:47:04 SSR *pros and cons* Pros: SEO, *immediate access to page content.* Cons: Developer *constraints, cost of running a server.* 01:49:04 Nuxt *3 features - eBread rendering* eBread rendering *allows different caching rules per route.* Specify rendering *mode (client, universal, server) per page.* Caching intervals *for fresh data, leveraging Nitro engine.* 01:51:50 Root *rules in Nuxt 3* Root rules *enable specifying rendering mode for each page.* Hybrid rendering *allows both SSR and static rendering.* Fine-grained control *over caching and rendering strategy.* 01:53:14 useFetch *and useLazyFetch in Nuxt 3* useFetch: Freezes *app until data is received.* useLazyFetch: Displays *loader while waiting for data.* Enhances developer *experience for asynchronous calls.* 01:56:00 Integrating *useFetch with SSR in Nuxt 3* SSR mode *works seamlessly with useFetch.* Demonstrates asynchronous *data fetching in Nuxt 3.* 02:03:07 useAsyncData *and useLazyAsyncData in Nuxt 3* useAsyncData: Resolves *asynchronously with more complex logic.* useLazyAsyncData: Allows *displaying the app immediately with a loader.* Enables efficient *handling of asynchronous operations.* 02:06:50 Universal *data fetching with `useFetch` composable in Nuxt 3.* 02:07:47 Nuxt *3 handles caching with `clearNuxtData` function and addresses client headers using `useRequestHeader`.* 02:08:36 SEO *optimization in Nuxt 3 achieved through the built-in `useHead` composable, providing flexibility in configuring SEO for the entire app or specific pages.* 02:09:28 Configuring *SEO in Nuxt 3 through `nuxt.config.ts` and `useHead` in `app.view`, allowing customization for the entire app with limitations on reactive data.* 02:11:42 Fine-tuning *SEO on a per-page basis using the `useHead` composable and dynamic data injection, or utilizing built-in components like `title`, `meta`, and others.* 02:16:06 Leveraging *Nuxt 3's built-in components, such as `head`, `title`, and `style`, to easily manage metadata and styling on a per-page basis.* 02:17:24 Incorporating *reactivity into SEO by using dynamic data and reactivity-supported properties like `computed`, `ref`, and `reactive` in Nuxt 3.* 02:19:35 Understanding *Nuxt 3's lifecycle hooks for various aspects, like modules and build context, and utilizing them through plugins for custom operations during initialization.* 02:22:13 Exploring *Nuxt 3's extensive configuration options in `nuxt.config.ts`, including aliases, app settings, build configurations, debugging, dev server customization, and more.* 02:28:56 Managing *file extensions and resolving them in Nuxt 3's configuration, especially useful when certain extensions are not automatically recognized.* 02:30:24 Nuxt *Content, a powerful module for handling static content, simplifies creating websites with markdown, making it especially beneficial for documentation sites.* 02:31:48 Nuxt *3 allows creating static websites using Nuxt content module.* 02:36:42 Tailwind *CSS can be added to Nuxt projects as a module for styling.* 02:38:28 Nuxt *content simplifies creating static websites and is beneficial for SEO.* 02:43:09 Nuxt *themes like Docuus help quickly set up documentation websites.* 02:46:11 Demonstrated *creating API endpoints in Nuxt using Nitro and handling requests.* 02:51:06 Illustrated *creating documentation pages for API endpoints in Nuxt content.- **02:32:14** Nuxt 3 allows easy creation of static websites with markdown using Nuxt Content module.* 02:37:10 Adding *Tailwind CSS to a Nuxt Content project for styling and design flexibility.* 02:41:18 Nuxt *Content simplifies the creation of static websites, ideal for SEO and content-focused projects.* 02:43:32 Exploring *the integration of Nuxt themes, specifically Docuus, for efficient documentation website creation.* 02:51:06 Demonstrating *the creation of API endpoints using Nitro in a Nuxt 3 project, including handling GET and POST requests.* 02:56:11 Gson *usage for country search.* 02:58:48 Documentation *creation process.* 03:04:18 API *endpoints demonstration.* 03:08:33 Overview *of using Nuxt.js for API and documentation creation.* Made with HARPA AI

❤❤❤❤❤❤

Nuxt 💪💪

Until this moment, I didn't find any course which provides the right configuration of nuxt :(

Nice

Hi, I'm from São Paulo!

❤

unfortunately nuxt does not have developer community like next has, it has to be improved, i am fan of nuxt

Waiting for nest

I don't see the nuxt3-tailwindcss-starter repository on your github...

I am want to learn Vue js please recommend a tutorial

I don't see your next3-tailwindcss-starter repository on your github...

What's the difference between NextJs, NuxtJs and NestJs?

Where's the timestamp?

Great video. The ext time take a bottle of water, please

Nuxt😍 #first

deez nuxt

its not a course for beginners, when you need to already know other languages/frameworks to use it. At least write pre-required knowledge. This goes for all the good but flawed courses on this channel. Its a great resource i bet, but most of them require you to already be a developer even if on a starting level, and to have studied at least if not also got experience with other languages/frameworks. Thats... not "for beginners" unless you state this :(. Was so looking forward to this, and then i find out i need to have already learned VueJS to make good use of this. DEPENDENSIES MAN!! why dont you list dependencies. That seems like a basic information for a developer no? Even i with very limited experience in *nix and coding knows thats the first and most important part. Thanks still for making the content free and available to improve the world. Just disappointed at all the great classes i cant really make use of yet due to false titles and no info in description

Good course but the accent is hard to understand. When he says alert, it sounds like he is saying a layout, which are both Nuxt terms, so it is very confusing to listen to. He also calls it a root, rather than a route, both are technical terms, again, makes it hard to understand.

screen is cut on the upper side. so necessary urls are not shown. a big thumb down for this. had to leave the course half way.

Waste of time. Same state nightmare like everywhere else.

Thanks