SvelteKit Layouts Explained (Nested, Groups, Resets)

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

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

  • @michaelpotter9006
    @michaelpotter9006 2 года назад +26

    Excellent as always. Keep making them and I'll keep watching. Perhaps a short one on setting up SvelteKit with tailwind/daisyUI + (dark/light & theming)

    • @Huntabyte
      @Huntabyte  2 года назад

      Thank you, I will certainly consider that!

  • @Mauaka
    @Mauaka Год назад +2

    I am so grateful I found your channel. I am trying to upskill with SvelteKit during our company shutdown, and I am just eating up your guide like candy.
    I think the biggest challenge for me was looking for a UI kit for SvelteKit. I had to try and piece together the how-to setup DaisyUI with SvelteKit, and I found some of the answers in this video.
    Again, thanks heaps!

  • @matthiaslangbart9841
    @matthiaslangbart9841 Год назад +1

    Fantastic video! The biggest takeaway for me is this: "Nesting happens inside slots". It's like Russian Matryoshka dolls. Every +layout must have a somewhere, and every slot contains its own Matryoshka +layout which in turn contains ... Thank you so much!

    • @Huntabyte
      @Huntabyte  Год назад

      You’re very welcome! Slots are phenomenal, especially when constructing your own components.

  • @blujedis903
    @blujedis903 Год назад +1

    Hadn't needed to tinker with the new-ish layout structure, disclosure I skipped through ha ha but the 2/3 min there were quite helpful. Thx for your time. Done plenty of these over years, peeps don't get how much time they actually take!!!

  • @aaronmorgan4466
    @aaronmorgan4466 Год назад +1

    I'm new to these layout changes in Svelte and was looking for how to 'opt out' or not use them, e.g. on /login and behold, in 18 minutes I've learned that and so much more. Love the format and delivery, subscribed.

  • @mmkamalraj8931
    @mmkamalraj8931 2 года назад +8

    😄😁😁I broke everything I built trying the last part, that is nesting the layouts... But hey, what is the fun if you can't break what you build. Awesome examples.
    In less than 2 hours Svelte-Kit can be mastered by completing Hunter's tutorial. Coming from Vanilla JS world, I first thought Svelte is awesome. Now I have to accept, people using Svelte are more Awesome... 😊😊

    • @Huntabyte
      @Huntabyte  2 года назад

      Thank you! Yes it can be a bit tricky but with practice you will have the best layouts in no time.

    • @maskman4821
      @maskman4821 Год назад

      you are so right !

  • @SuperElephant
    @SuperElephant Год назад +1

    Keep up the great work! I'm glad you're here to be my speaking + animating svelte documentation!

  • @Giuseppecarusoplus
    @Giuseppecarusoplus 2 года назад +5

    I am really loving your videos. There is a lot of preparation behind them.
    They are making me save a lot of time, they are clear and straight to the point. 💯
    I only have one little feedback, if I may.
    I understand that removing pauses and keeping videos short is essential to create and keep engagement, but sometimes the speaking feels too quick, at least for me as a non-native speaker.
    I can "fix" them by pausing, slowing them down, etc., but I find it fundamental that in the most important moments, you take a little pause to let the watcher realize what you are doing. If you also speak a little slower, that would be great. Low-pitch voices are not that great when you set a low playback speed. 😄
    In any case, very, very, very good job.

    • @Huntabyte
      @Huntabyte  2 года назад

      Thank you for that feedback, I will do my best to improve in future videos!

  • @omargalal9004
    @omargalal9004 2 года назад +4

    Wow you are a life saver, Keep these Svelte tuts coming!

  • @it-s-me-mohit
    @it-s-me-mohit 2 года назад +4

    Awesome as always. The resets are a bit weird but apart from that everything feels intuitive.

  • @SRG-Learn-Code
    @SRG-Learn-Code 2 года назад +1

    I'll watch it again, as you said, it's quite complex yet so simple.

    • @Huntabyte
      @Huntabyte  2 года назад

      Don't forget to practice practice practice. Try to replicate some popular websites' layouts within your own application!

  • @KiranNagaraj
    @KiranNagaraj Год назад +1

    Very succinctly mentioned. Awesome. Thanks

  • @theIbraDev
    @theIbraDev Год назад +1

    Thanks! I thought i knew what i needed around routing already but this teached me alot more! Thank you so much!

  • @BunniesAI
    @BunniesAI Год назад +1

    This was REALLY good!! I'm *so* going bull on Svelte! Thanks for great content 🙏🏻

  • @justinoneill2837
    @justinoneill2837 Год назад +1

    Good stuff! I'm about to try this with my Turborepo Sveltekit combo 🙂

    • @Huntabyte
      @Huntabyte  Год назад +1

      Let me know how it goes!

  • @brunofrancosentis5148
    @brunofrancosentis5148 2 года назад +2

    thanks for this brother.

    • @Huntabyte
      @Huntabyte  2 года назад +1

      You're very welcome!

  • @omedjamal1056
    @omedjamal1056 2 года назад +1

    thx. what was the name for the extension you used to quickly create routes?

    • @Huntabyte
      @Huntabyte  2 года назад

      It’s the Svelte for VSCode extension! The feature was released in an update a few weeks ago 👌

  • @zzej
    @zzej 2 года назад +1

    Good timing on this video XD thanks!

  • @MrRe-sj2iv
    @MrRe-sj2iv Год назад +1

    Thank you so much!

  • @MOUNIROU60
    @MOUNIROU60 2 года назад +1

    thank you for the great explanation

  • @FernandoMirabile
    @FernandoMirabile Год назад

    What is the recommended practice in order to layout auth user/non auth users
    I've seen a lot of people (and documentation) saying you can handle that from the server hook, but I'm also noticing this is a possible way of handling it. What would you say it is the best in order to have an easier maintainable web?

  • @deogratiassaidi2874
    @deogratiassaidi2874 Год назад +1

    What a weird way to do it but thanks for the demo

  • @RicardoCamisa
    @RicardoCamisa 2 года назад +2

    Thanks Sir.

  • @justmoeee
    @justmoeee Год назад +1

    hello Huntabyte, can you please tell me what extension you're using for the files icons? I've downloaded some of them but the folders icons never changed

    • @Huntabyte
      @Huntabyte  Год назад +1

      It's called Material Icons, if you check the "10X Developer Experience" video on my channel, I walk through how to change the icon colors!

    • @justmoeee
      @justmoeee Год назад

      @@Huntabyte much thanks

  • @zhanezar
    @zhanezar 2 года назад +1

    if you have a load function on the layout at the root, and need to access it in +pages using export data, does this mean you cant have a +page.js file to call another load function? or would it merge all the data from all the load functions in the +page.svelte file?

    • @Huntabyte
      @Huntabyte  2 года назад +1

      It would merge all the data from the load functions in the +page.svelte file!

  • @A-R-TWORLD
    @A-R-TWORLD 2 года назад +1

    now i am in a good mood

    • @Huntabyte
      @Huntabyte  2 года назад

      I'm glad to hear that!

  • @johntierney3353
    @johntierney3353 2 года назад +2

    Two questions.
    1. It looks like you can only do a 'reset layout' inside of a (group).
    2. If you have a +layout.js and a +page.js that both have a export load function, then in the +page.svelte does the 'export let data' contain all of the data from +layout.js and +page.js

    • @Huntabyte
      @Huntabyte  2 года назад

      I honestly haven't reset a layout without groups in the latest version of SvelteKit. Data does contain all the data from the layouts and the page.

    • @v333b
      @v333b 2 года назад

      @@Huntabyte I might be a little late here, but for your example at 3:33, if +page.js also exports an object called user, will it overwrite the user set by +layout.js?

  • @nushankodikara
    @nushankodikara Год назад +1

    This is awesome!

  • @guneyh
    @guneyh Год назад

    Great video 👍

  • @sefpai424
    @sefpai424 2 года назад +1

    well explained!

  • @sunsenan7590
    @sunsenan7590 Год назад

    Hello🎉 I just wonder is it possible for sveltekit to do routing base on Active Theme? For example
    Themes/
    theme-one/
    routes/
    page.svelte
    theme-two
    routes/
    page.svelte
    And then it would find the current page base on active theme.
    I am planning to build something with sveltekit but currently stuck with the setup

  • @fer.guitar
    @fer.guitar Год назад

    Great vid!

  • @zombieallen
    @zombieallen Год назад

    When I try to use groups as described here and in the docs, I get an error saying "/" and "/(app)" conflict with each other. Any thoughts on why?

    • @Huntabyte
      @Huntabyte  Год назад +1

      Hey Allen, ensure that you don't have a root route (/+page.svelte) in both the 'routes' directory and the '(app)' directory. If you want the root route (example.com) to have the (app) layout, you will move the root +page.svelte to that directory. Otherwise, you'll need to create an additional route within that (app) directory.

    • @zombieallen
      @zombieallen Год назад

      Thank you!

  • @sound4me1
    @sound4me1 2 года назад +1

    thx!

  • @gorilla-san
    @gorilla-san Год назад

    Yuge W thx

  • @amkamn1886
    @amkamn1886 Год назад

    vscode Extension name ? 13:34

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

    so tiny to read why?

  • @devmeta1478
    @devmeta1478 Год назад

    Documentation is not really good...

  • @amanuelelhanan4716
    @amanuelelhanan4716 Год назад

    Thanks, You're a little bit too fast.

  • @Jeff-co.
    @Jeff-co. 5 месяцев назад

    Ok, everything up to layout groups with (app) and (auth)... awesome... brilliant... beautiful... innovative. Everything else after that? Horrible... confusing... useless... unnecessary... a total mess. It gets too segregated and all over the place and complicated.

  • @bobbyLovesTech
    @bobbyLovesTech Год назад

    Thank you so much!