Nuxt 3 - Course for Beginners
Вставка
- Опубліковано 30 тра 2024
- Learn how to use Next 3 in this full tutorial for beginners. Nuxt.js is a progressive JavaScript framework for building user interfaces on the web. Nuxt makes it easy to create server-rendered applications, static websites, and single-page applications.
✏️ Course developed by @codewithguillaume
Contents
⌨️ (0:00:00) Intro
⌨️ (0:02:51) Create an App
⌨️ (0:11:07) Pages
⌨️ (0:22:37) Components
⌨️ (0:32:10) Layouts
⌨️ (0:37:47) Assets
⌨️ (0:48:40) Composables
⌨️ (0:55:00) Plugins
⌨️ (1:00:43) Middlewares
⌨️ (1:07:36) Modules
⌨️ (1:12:57) State Management
⌨️ (1:23:28) Server
⌨️ (1:33:42) Nitro
⌨️ (1:38:17) Rendering modes
⌨️ (1:52:04) useFetch
⌨️ (2:02:27) useAsyncData
⌨️ (2:08:16) SEO & Metas
⌨️ (2:18:57) Hooks
⌨️ (2:22:02) Nuxt.config.ts
⌨️ (2:30:14) Nuxt Content
⌨️ (2:41:29) Build Docs and API
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
Excellent tutorial! 💯Thank you! Fast paced! "Actually" I needed 8 days to absorb the 3 hrs! ☺ Keep it up Guillaume!
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
Incredibly concise lecture for beginners. Thank you.
Very nicely taught 💯 the instructor's pace, style of teaching, flow of topics was perfect!
I really appreciate this folder and file based approach from Nuxt. Thank you Guillaume !
This is such a good overview of nuxt and vue development. Very nice work please keep this up!
Great course. Love your smiles and enthusiasm. And your accent. I look forward to using my "ooks"!! :-). Great job. Thanks.
Probably the best intro what i found ... Im enjoing on next playlist from ur channel Guillaume ;)
Awesome content ❤
❤I very liked the course and se french accent😊 Merci beaucoup 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 course, you’re spending the needed amount of time on each feature. Not too much, not too less. I would recommend it for sure ✅
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
One of the best intros to Nuxt 3 ❤️
finally
i am waiting for that from long time
thanks
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.
Just when I was looking to make a project with Nuxt 👌
aweomse, i've been wanting this.
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.
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 👍🙌👌🎉🎊
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
Great..!
Thanks for this great series of chapters! what's the main difference between modules and plugins?
Goooooood tutorial!
thanks a lot bro!
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!
Yes you need to know Vuejs first
Yes. you need to know Vue 3 (with script setup) to use Nuxt 3.
Thanks!
Could you please let me know the VS code extenstions you are using with Nuxt?
Vue Volar extension Pack, Nuxtr, Vue 3 Support - All In One, Javascript (ES6) snippets, npm Intellisense, DotENV, ESlint, Vitest. Eventually Iconyify Intellisense, Tailwind CSS Intellisense
Thank you so much for this course. Kindly upload a tutorial for Shopify development with next js
does anyone know how to use the auto complete function when typing "vsetup"?
vue 3 snippets
Which template do you use in vscode?
There is a nuxt module for tailwind, saves you some files, some time
🎯 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
thank you 😊
@codewithguillaume, thank you so much for such an excellent job!
Danke!
❤❤❤❤❤❤
I can't find the repository sir.
What's the difference between NextJs, NuxtJs and NestJs?
Nextjs and Nuxtjs are fullstack javascript framework which built on top of virtual DOM UI framework or library, such as React and Vue.
Nestjs is battery-included backend framework, widely support different recipes for building web server, everything you need you will find in doc and the syntax is very likely inspired by Angular or Java spring-boot.
You cannot even google it. 😂
Next = React, Nuxt = Vue, Nestjs = backend
Next js is the frame work of react library
Nuxt is a framework based on vue for frontend
Nest js is a backend framework based on node
@@lihinfei8334 nest js was primarily inspired by asp net core and its predecessor project owin
Hi, I'm from São Paulo!
Nice
I don't see the nuxt3-tailwindcss-starter repository on your github...
Nuxt 💪💪
Great tutorial! Can you share the code of this tutorial?
unfortunately nuxt does not have developer community like next has, it has to be improved, i am fan of nuxt
Until this moment, I didn't find any course which provides the right configuration of nuxt :(
I don't see your next3-tailwindcss-starter repository on your github...
❤
I am want to learn Vue js please recommend a tutorial
Codevolution
@@walidaguib3944 thanks 👍
The docs. Are very tutorial like, easy to follow and understand, even with code examples, and a playground.
@@AngelHdzMultimediathanks let me try to learn and understand
First, you need to learn how to google.
Waiting for nest
Where's the timestamp?
Just added. :)
@@freecodecamp thanks
Nuxt😍 #first
Great video. The ext time take a bottle of water, please
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
exactly
If you're totally new to the web development world, learning frameworks comes waaay later. You need to learn the fundamentals first: HTML, CSS, JavaScript, the DOM and Web APIs. Then you can jump into a framework like Vue or React and then its server-side rendering counter-part like Nuxt or Next etc.
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.
I also feel Nuxt is a wast of time.
Please, Suggest the best way to develop frontend.
@@namangupta1817 Actor Model.
@@aammssaamm If I am not wrong, you are referring to concept followed by XState and other state machines right?
@@namangupta1817 No, if something is called an "actor", it doesn't mean it actually is. It's still the same hardcoded HTML and "state" nightmare. Why would you need to mess with "states" if you can read the value of any field in real time? All you need is a unique message and a tree of all elements/actors. An application bus will take care of the queue for you. You may try to google "Carl Hewitt Actor Model" or ''Javascript Actor Model".
Thanks