Nuxt 3 - Course for Beginners

Поділитися
Вставка
  • Опубліковано 16 гру 2024

КОМЕНТАРІ • 115

  • @hxxzxtf
    @hxxzxtf 11 місяців тому +14

    🎯 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

  • @josephastrahan6403
    @josephastrahan6403 10 місяців тому +11

    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

  • @justinreeves8336
    @justinreeves8336 8 місяців тому +5

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

  • @dhimanbhattacharya
    @dhimanbhattacharya 9 місяців тому +5

    Thanks!

  • @dhimanbhattacharya
    @dhimanbhattacharya 9 місяців тому +17

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

    • @wardsuppers802
      @wardsuppers802 3 місяці тому

      it was not the best tutorial somtimes it was unclear

  • @yashguma
    @yashguma Рік тому +10

    Incredibly concise lecture for beginners. Thank you.

  • @TheodoreRavindranath
    @TheodoreRavindranath Місяць тому +1

    Amazing tutorial.. I like the approach of teaching the bullet-point features and quirks in detail while not jumping immediately into the app building. This is useful because with traditional video tutorials, following the sample app goes well, but when we jump to our own app, it gets stuck if we don't have better understanding of fundamentals and quirks.

  • @FunnyVideos-ni4iu
    @FunnyVideos-ni4iu 10 місяців тому +2

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

  • @samchiu3756
    @samchiu3756 7 місяців тому +1

    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.

  • @___Kevin
    @___Kevin 8 місяців тому

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

  • @AbyssEdge-x6w
    @AbyssEdge-x6w 5 місяців тому +1

    Thank you very much! I now understand well how Nuxt works in general. Thanks for the free course!

  • @albertvaldez2669
    @albertvaldez2669 2 місяці тому

    After watching the whole video, I am now convinced to use NuxtJS on my next project! Hopefully I'll succeed.

  • @jmeaulnes9272
    @jmeaulnes9272 Рік тому +5

    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.

  • @samhaze9688
    @samhaze9688 Рік тому +14

    Awesome content ❤

  • @F4LZ0N
    @F4LZ0N 9 місяців тому

    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 ✅

  • @MrCC-hx8xr
    @MrCC-hx8xr 7 місяців тому

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

  • @javierfernandez6030
    @javierfernandez6030 5 місяців тому

    Amazing content, very concise and covering a lot of topics. Perfect for a first overview of Nuxt 3!

  • @sonny5497
    @sonny5497 7 місяців тому

    One of the best intros to Nuxt 3 ❤️

  • @devfasil4810
    @devfasil4810 Рік тому +7

    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.

  • @christopher5731
    @christopher5731 10 місяців тому

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

  • @ercanyilmaz8108
    @ercanyilmaz8108 5 місяців тому

    This is a very good and complete tutorial for a beginner like me. Thank you very much for explaining everything in detail. 🙂
    Thanks to this video I found my way with Nuxt. Now I try to create my own project. It looks like it is handy for my project to use Shadcn. I see that you have another video about this topic, which is nice. So I will watch them.

  • @RahulDhole7
    @RahulDhole7 10 днів тому

    Very nice articulation ❤

  • @ludwingguate
    @ludwingguate 3 місяці тому

    1:57:00 Transform API Response from Ref to Proxy to Raw Data

  • @FacundoColombier
    @FacundoColombier 8 місяців тому +1

    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

  • @winns.x
    @winns.x 6 місяців тому

    Thanks for this Course! Amaizing framework

  • @m.aviscad
    @m.aviscad Рік тому +3

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

  • @meiseswicki9673
    @meiseswicki9673 Рік тому +1

    Danke!

  • @meiseswicki9673
    @meiseswicki9673 Рік тому +1

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

  • @amrwery5403
    @amrwery5403 Рік тому +1

    finally
    i am waiting for that from long time
    thanks

  • @Munk-tt6tz
    @Munk-tt6tz 9 місяців тому +1

    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

  • @okmylifeday
    @okmylifeday 10 місяців тому

    Goooooood tutorial!

  • @andrewshorts1198
    @andrewshorts1198 Рік тому +1

    aweomse, i've been wanting this.

  • @JW-hf9ev
    @JW-hf9ev Місяць тому

    Any early profits might miss the it going into mainstream while that takes years, I’m just happy to keep adding as much as possible monthly.

  • @troyharris279
    @troyharris279 Рік тому +3

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

    • @brahim_boussadjra
      @brahim_boussadjra Рік тому +4

      Yes you need to know Vuejs first

    • @angelhdzdev
      @angelhdzdev Рік тому +5

      Yes. you need to know Vue 3 (with script setup) to use Nuxt 3.

  • @maximeetundi
    @maximeetundi Рік тому +1

    Thank you so much for this course

  • @2u841r
    @2u841r 19 днів тому

    10:55 link changed / not available

  • @thesparkdev6665
    @thesparkdev6665 11 місяців тому

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

  • @adedot2938
    @adedot2938 2 місяці тому +1

    Cool

  • @xiaoshen194
    @xiaoshen194 Рік тому +13

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

    • @lihinfei8334
      @lihinfei8334 Рік тому +20

      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.

    • @aammssaamm
      @aammssaamm Рік тому +1

      You cannot even google it. 😂

    • @KuroManX
      @KuroManX Рік тому +9

      Next = React, Nuxt = Vue, Nestjs = backend

    • @freddiemounir855
      @freddiemounir855 Рік тому

      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

    • @mythbuster6126
      @mythbuster6126 9 місяців тому

      ​@@lihinfei8334 nest js was primarily inspired by asp net core and its predecessor project owin

  • @chxsac
    @chxsac Рік тому +1

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

  • @MdBillalHossain-w6n
    @MdBillalHossain-w6n 6 місяців тому

    Nice explanation...

  • @bukki007
    @bukki007 Місяць тому

    Is the project GitHub repo now named nuxt3-shadcn or is it deleted/archived/private?

  • @test-se6pi
    @test-se6pi 9 місяців тому

    Which template do you use in vscode?

  • @vincecyriac8507
    @vincecyriac8507 Рік тому +1

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

    • @pierre-jeanchancellier8955
      @pierre-jeanchancellier8955 11 місяців тому +2

      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

  • @shajahankattoor
    @shajahankattoor 6 місяців тому +1

    Great..!

  • @lynnvillacorta6351
    @lynnvillacorta6351 10 місяців тому +1

    I can't find the repository sir.

  • @SiNEALabs
    @SiNEALabs 11 місяців тому

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

  • @LaminarRainbow
    @LaminarRainbow 9 місяців тому

    Thank you 🙏

  • @mahendranath2504
    @mahendranath2504 Рік тому

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

  • @sadiasarfarazkhan
    @sadiasarfarazkhan Рік тому +1

    Good thank you sir

  • @marcoscoelhodev
    @marcoscoelhodev 10 місяців тому

    thanks a lot bro!

  • @ghadad
    @ghadad 9 місяців тому

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

  • @dffhhfhdifh
    @dffhhfhdifh Рік тому

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

  • @sergey_llal6897
    @sergey_llal6897 9 місяців тому

    ❤❤❤❤❤❤

  • @EugenioMartinez-t5w
    @EugenioMartinez-t5w 11 місяців тому +2

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

  • @Sebeklis
    @Sebeklis Рік тому +2

    Nuxt 💪💪

  • @zensukai
    @zensukai 4 місяці тому +1

    Good course, thanks for that.
    Some feedback -- slow down! I don't get why people need to flick back and forth on their screens and talk like they just drank 12 cups of coffee. He has a strong accent (which is fine), but when you combine that with moving too quickly, it is not helpful. Again, this feedback is because this is a course for beginners, so if people want to come back with, "just slow down the video", well, you know my response to that would be.

  • @gomesbruno201
    @gomesbruno201 4 місяці тому +1

    how tf it took me the whole day to just install tailwind?

  • @EugenioMartinez-t5w
    @EugenioMartinez-t5w 11 місяців тому +2

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

  • @GlobalYoung7
    @GlobalYoung7 Рік тому +1

    thank you 😊

  • @saab0009
    @saab0009 Рік тому

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

  • @AlaminHossain-q2m
    @AlaminHossain-q2m Місяць тому

    Wow

  • @moisesespiritosanto2195
    @moisesespiritosanto2195 Рік тому +1

    Hi, I'm from São Paulo!

  • @akashlmp
    @akashlmp Рік тому +3

    I am want to learn Vue js please recommend a tutorial

    • @walidaguib3944
      @walidaguib3944 Рік тому +1

      Codevolution

    • @akashlmp
      @akashlmp Рік тому

      @@walidaguib3944 thanks 👍

    • @angelhdzdev
      @angelhdzdev Рік тому +4

      The docs. Are very tutorial like, easy to follow and understand, even with code examples, and a playground.

    • @akashlmp
      @akashlmp Рік тому +1

      @@angelhdzdevthanks let me try to learn and understand

    • @aammssaamm
      @aammssaamm Рік тому

      First, you need to learn how to google.

  • @theyruinedyoutubeagain
    @theyruinedyoutubeagain 21 день тому +1

    If you keep pressing '0' it sounds like the dude keeps saying "nut"

  • @agamurat3019
    @agamurat3019 Рік тому +2

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

  • @fabianrigo4168
    @fabianrigo4168 4 місяці тому

    this guys accent makes me miss the Indians. besides that, good tutorial!

  • @adenugbamicheal2140
    @adenugbamicheal2140 Рік тому +1

    Waiting for nest

  • @SportProgramming
    @SportProgramming Рік тому +1

    Nice

  • @jonnhybravo
    @jonnhybravo Рік тому

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

  • @soumadip_banerjee
    @soumadip_banerjee Рік тому +1

  • @sreejishnair5922
    @sreejishnair5922 Рік тому +1

    Where's the timestamp?

  • @joshbarros1995
    @joshbarros1995 Рік тому +1

    Nuxt😍 #first

  • @grabatar
    @grabatar Рік тому +6

    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

    • @starlord7526
      @starlord7526 Рік тому

      exactly

    • @mrgalaxy396
      @mrgalaxy396 Рік тому +3

      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.

  • @DarkestSoulsBand
    @DarkestSoulsBand Рік тому

    deez nuxt

  • @Kid-vr6zf
    @Kid-vr6zf 10 місяців тому

    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.

  • @kareemazohra432
    @kareemazohra432 11 місяців тому +3

    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.

  • @aammssaamm
    @aammssaamm Рік тому +2

    Waste of time. Same state nightmare like everywhere else.

    • @zmdev8465
      @zmdev8465 Рік тому

      I also feel Nuxt is a wast of time.

    • @namangupta1817
      @namangupta1817 Рік тому +1

      Please, Suggest the best way to develop frontend.

    • @aammssaamm
      @aammssaamm Рік тому

      @@namangupta1817 Actor Model.

    • @namangupta1817
      @namangupta1817 Рік тому

      @@aammssaamm If I am not wrong, you are referring to concept followed by XState and other state machines right?

    • @aammssaamm
      @aammssaamm Рік тому

      @@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".

  • @kedimnvfjnnvfjffurju
    @kedimnvfjnnvfjffurju Рік тому

    Thanks

  • @v.lavrinovics1970
    @v.lavrinovics1970 Місяць тому

    Thanks