Тёмный

SvelteKit Layouts Explained (Nested, Groups, Resets) 

Huntabyte
Подписаться 25 тыс.
Просмотров 21 тыс.
50% 1

Опубликовано:

 

20 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 72   
@michaelpotter9006
@michaelpotter9006 2 года назад
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 Год назад
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!
@mmkamalraj8931
@mmkamalraj8931 2 года назад
😄😁😁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 Год назад
Keep up the great work! I'm glad you're here to be my speaking + animating svelte documentation!
@aaronmorgan4466
@aaronmorgan4466 Год назад
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.
@Huntabyte
@Huntabyte Год назад
Thank you!
@Giuseppecarusoplus
@Giuseppecarusoplus Год назад
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 Год назад
Thank you for that feedback, I will do my best to improve in future videos!
@omargalal9004
@omargalal9004 2 года назад
Wow you are a life saver, Keep these Svelte tuts coming!
@matthiaslangbart9841
@matthiaslangbart9841 Год назад
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 Год назад
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!!!
@Huntabyte
@Huntabyte Год назад
Thank you!
@it-s-me-mohit
@it-s-me-mohit 2 года назад
Awesome as always. The resets are a bit weird but apart from that everything feels intuitive.
@Huntabyte
@Huntabyte 2 года назад
Thank you!
@SRG-Learn-Code
@SRG-Learn-Code 2 года назад
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!
@BunniesAI
@BunniesAI Год назад
This was REALLY good!! I'm *so* going bull on Svelte! Thanks for great content 🙏🏻
@theIbraDev
@theIbraDev Год назад
Thanks! I thought i knew what i needed around routing already but this teached me alot more! Thank you so much!
@Huntabyte
@Huntabyte Год назад
I'm glad to hear that!
@KiranNagaraj
@KiranNagaraj Год назад
Very succinctly mentioned. Awesome. Thanks
@Huntabyte
@Huntabyte Год назад
You’re welcome!
@justinoneill2837
@justinoneill2837 Год назад
Good stuff! I'm about to try this with my Turborepo Sveltekit combo 🙂
@Huntabyte
@Huntabyte Год назад
Let me know how it goes!
@brunofrancosentis5148
@brunofrancosentis5148 2 года назад
thanks for this brother.
@Huntabyte
@Huntabyte 2 года назад
You're very welcome!
@MOUNIROU60
@MOUNIROU60 2 года назад
thank you for the great explanation
@Huntabyte
@Huntabyte 2 года назад
You're welcome!
@zzej
@zzej 2 года назад
Good timing on this video XD thanks!
@Huntabyte
@Huntabyte 2 года назад
My pleasure!
@MrRe-sj2iv
@MrRe-sj2iv Год назад
Thank you so much!
@Huntabyte
@Huntabyte Год назад
You're very welcome!
@johntierney3353
@johntierney3353 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 Год назад
@@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?
@RicardoCamisa
@RicardoCamisa Год назад
Thanks Sir.
@Huntabyte
@Huntabyte Год назад
You’re welcome!
@deogratiassaidi2874
@deogratiassaidi2874 Год назад
What a weird way to do it but thanks for the demo
@nushankodikara
@nushankodikara Год назад
This is awesome!
@Huntabyte
@Huntabyte Год назад
Thank you!
@A-R-TWORLD
@A-R-TWORLD 2 года назад
now i am in a good mood
@Huntabyte
@Huntabyte 2 года назад
I'm glad to hear that!
@guneyh
@guneyh 11 месяцев назад
Great video 👍
@justmoeee
@justmoeee Год назад
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 Год назад
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
@sefpai424
@sefpai424 2 года назад
well explained!
@Huntabyte
@Huntabyte 2 года назад
Thank you!
@omedjamal1056
@omedjamal1056 2 года назад
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 👌
@fer.barrios
@fer.barrios Год назад
Great vid!
@Huntabyte
@Huntabyte Год назад
Thank you!
@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?
@zhanezar
@zhanezar 2 года назад
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 года назад
It would merge all the data from the load functions in the +page.svelte file!
@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
@sound4me1
@sound4me1 2 года назад
thx!
@Huntabyte
@Huntabyte 2 года назад
You're welcome!
@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 Год назад
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!
@gorilla-san
@gorilla-san Год назад
Yuge W thx
@amkamn1886
@amkamn1886 Год назад
vscode Extension name ? 13:34
@sennlich
@sennlich 26 дней назад
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. 4 месяца назад
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!
Далее
SvelteKit Authentication with PocketBase
31:50
Просмотров 32 тыс.
Svelte 5's Secret Weapon: Classes + Context
18:14
Просмотров 23 тыс.
Борщ в стиле высокой кухни!
00:57
Павел Дедищев - «Как кайф»
42:08
Просмотров 469 тыс.
Better SvelteKit Forms via Progressive Enhancement
19:17
This Folder Structure Makes Me 100% More Productive
24:36
Form Actions Made Simple
29:04
Просмотров 36 тыс.
Protect SvelteKit Routes with Hooks
21:10
Просмотров 58 тыс.
React visually explained: 'use client'
15:57
Просмотров 53 тыс.
Svelte 5 Surprised Me
6:06
Просмотров 67 тыс.
Being Competent With Coding Is More Fun
11:13
Просмотров 97 тыс.