Nuxt 3 - Course for Beginners

Поделиться
HTML-код
  • Опубликовано: 7 сен 2024

Комментарии • 105

  • @josephastrahan6403
    @josephastrahan6403 7 месяцев назад +6

    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

  • @dhimanbhattacharya
    @dhimanbhattacharya 6 месяцев назад +13

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

    • @wardsuppers802
      @wardsuppers802 11 дней назад

      it was not the best tutorial somtimes it was unclear

  • @yashguma
    @yashguma 9 месяцев назад +10

    Incredibly concise lecture for beginners. Thank you.

  • @hxxzxtf
    @hxxzxtf 8 месяцев назад +8

    🎯 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

  • @josefournier9272
    @josefournier9272 9 месяцев назад +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.

  • @FunnyVideos-ni4iu
    @FunnyVideos-ni4iu 6 месяцев назад +1

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

  • @FacundoColombier
    @FacundoColombier 4 месяца назад +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

  • @user-ir7uv8vm3o
    @user-ir7uv8vm3o Месяц назад

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

  • @F4LZ0N
    @F4LZ0N 6 месяцев назад

    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 ✅

  • @justinreeves8336
    @justinreeves8336 5 месяцев назад +1

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

  • @ercanyilmaz8108
    @ercanyilmaz8108 Месяц назад

    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.

  • @javierfernandez6030
    @javierfernandez6030 2 месяца назад

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

  • @___Kevin
    @___Kevin 5 месяцев назад

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

  • @samhaze9688
    @samhaze9688 11 месяцев назад +14

    Awesome content ❤

  • @MrCC-hx8xr
    @MrCC-hx8xr 3 месяца назад

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

  • @dhimanbhattacharya
    @dhimanbhattacharya 6 месяцев назад +2

    Thanks!

  • @samchiu3756
    @samchiu3756 4 месяца назад

    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.

  • @m.aviscad
    @m.aviscad 11 месяцев назад +3

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

  • @sonny5497
    @sonny5497 3 месяца назад

    One of the best intros to Nuxt 3 ❤️

  • @ludwingguate
    @ludwingguate 19 дней назад

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

  • @shajahankattoor
    @shajahankattoor 3 месяца назад +1

    Great..!

  • @winns.x
    @winns.x 2 месяца назад

    Thanks for this Course! Amaizing framework

  • @devfasil4810
    @devfasil4810 10 месяцев назад +6

    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.

  • @meiseswicki9673
    @meiseswicki9673 10 месяцев назад +1

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

  • @christopher5731
    @christopher5731 7 месяцев назад

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

  • @Munk-tt6tz
    @Munk-tt6tz 5 месяцев назад +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

  • @jasonryu4495
    @jasonryu4495 6 месяцев назад

    Goooooood tutorial!

  • @amrwery5403
    @amrwery5403 11 месяцев назад +1

    finally
    i am waiting for that from long time
    thanks

  • @maximeetundi
    @maximeetundi 9 месяцев назад +1

    Thank you so much for this course

  • @andrewshorts1198
    @andrewshorts1198 11 месяцев назад +1

    aweomse, i've been wanting this.

  • @user-ps4wl2df2r
    @user-ps4wl2df2r 3 месяца назад

    Nice explanation...

  • @user-ry7uf2vo8d
    @user-ry7uf2vo8d 8 месяцев назад

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

  • @thesparkdev6665
    @thesparkdev6665 7 месяцев назад

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

  • @LaminarRainbow
    @LaminarRainbow 5 месяцев назад

    Thank you 🙏

  • @troyharris279
    @troyharris279 11 месяцев назад +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 11 месяцев назад +3

      Yes you need to know Vuejs first

    • @AngelHdzMultimedia
      @AngelHdzMultimedia 11 месяцев назад +4

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

  • @sadiasarfarazkhan
    @sadiasarfarazkhan 11 месяцев назад +1

    Good thank you sir

  • @marcoscoelhodev
    @marcoscoelhodev 6 месяцев назад

    thanks a lot bro!

  • @mahendranath2504
    @mahendranath2504 11 месяцев назад

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

  • @cuti9114
    @cuti9114 11 месяцев назад

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

  • @meiseswicki9673
    @meiseswicki9673 10 месяцев назад +1

    Danke!

  • @vincecyriac8507
    @vincecyriac8507 10 месяцев назад +1

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

    • @pierre-jeanchancellier8955
      @pierre-jeanchancellier8955 8 месяцев назад +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

  • @chxsac
    @chxsac 11 месяцев назад +1

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

  • @lynnvillacorta6351
    @lynnvillacorta6351 7 месяцев назад +1

    I can't find the repository sir.

  • @GlobalYoung7
    @GlobalYoung7 11 месяцев назад +1

    thank you 😊

  • @user-un4qf4ls6k
    @user-un4qf4ls6k 8 месяцев назад +2

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

  • @moisesespiritosanto2195
    @moisesespiritosanto2195 11 месяцев назад +1

    Hi, I'm from São Paulo!

  • @sergey_llal6897
    @sergey_llal6897 6 месяцев назад

    ❤❤❤❤❤❤

  • @user-un4qf4ls6k
    @user-un4qf4ls6k 8 месяцев назад +2

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

  • @xiaoshen194
    @xiaoshen194 11 месяцев назад +11

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

    • @lihinfei8334
      @lihinfei8334 11 месяцев назад +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 11 месяцев назад +1

      You cannot even google it. 😂

    • @KuroManX
      @KuroManX 11 месяцев назад +6

      Next = React, Nuxt = Vue, Nestjs = backend

    • @freddiemounir855
      @freddiemounir855 10 месяцев назад

      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 5 месяцев назад

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

  • @Sebeklis
    @Sebeklis 11 месяцев назад +2

    Nuxt 💪💪

  • @test-se6pi
    @test-se6pi 5 месяцев назад

    Which template do you use in vscode?

  • @ghadad
    @ghadad 6 месяцев назад

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

  • @fabianrigo4168
    @fabianrigo4168 Месяц назад

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

  • @saab0009
    @saab0009 9 месяцев назад

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

  • @nbshikki
    @nbshikki 11 месяцев назад +1

    Nice

  • @zensukai
    @zensukai Месяц назад +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.

  • @shergohasan4803
    @shergohasan4803 6 месяцев назад

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

  • @agamurat3019
    @agamurat3019 11 месяцев назад +2

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

  • @adenugbamicheal2140
    @adenugbamicheal2140 11 месяцев назад +1

    Waiting for nest

  • @akashlmp
    @akashlmp 11 месяцев назад +3

    I am want to learn Vue js please recommend a tutorial

    • @walidaguib3944
      @walidaguib3944 11 месяцев назад +1

      Codevolution

    • @akashlmp
      @akashlmp 11 месяцев назад

      @@walidaguib3944 thanks 👍

    • @AngelHdzMultimedia
      @AngelHdzMultimedia 11 месяцев назад +4

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

    • @akashlmp
      @akashlmp 11 месяцев назад +1

      @@AngelHdzMultimediathanks let me try to learn and understand

    • @aammssaamm
      @aammssaamm 11 месяцев назад

      First, you need to learn how to google.

  • @soumadip_skyy_banerjee
    @soumadip_skyy_banerjee 11 месяцев назад +1

  • @jonnhybravo
    @jonnhybravo 9 месяцев назад

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

  • @gomesbruno201
    @gomesbruno201 21 день назад

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

  • @joshbarros1995
    @joshbarros1995 11 месяцев назад +1

    Nuxt😍 #first

  • @sreejishnair5922
    @sreejishnair5922 11 месяцев назад +1

    Where's the timestamp?

  • @DarkestSoulsBand
    @DarkestSoulsBand 11 месяцев назад

    deez nuxt

  • @grabatar
    @grabatar 11 месяцев назад +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 10 месяцев назад

      exactly

    • @mrgalaxy396
      @mrgalaxy396 10 месяцев назад +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.

  • @Kid-vr6zf
    @Kid-vr6zf 6 месяцев назад

    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 8 месяцев назад +2

    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 11 месяцев назад +2

    Waste of time. Same state nightmare like everywhere else.

    • @zmdev8465
      @zmdev8465 11 месяцев назад

      I also feel Nuxt is a wast of time.

    • @namangupta1817
      @namangupta1817 10 месяцев назад +1

      Please, Suggest the best way to develop frontend.

    • @aammssaamm
      @aammssaamm 10 месяцев назад

      @@namangupta1817 Actor Model.

    • @namangupta1817
      @namangupta1817 10 месяцев назад

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

    • @aammssaamm
      @aammssaamm 10 месяцев назад

      @@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 10 месяцев назад

    Thanks