An Easy Vue 3 Skeleton Loading Screen with Suspense

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 ก.ย. 2024

ความคิดเห็น • 38

  • @samuelcatlow
    @samuelcatlow 3 ปีที่แล้ว +10

    The best Vue blog I've found, now with videos... fantastic 😁

    • @LearnVue
      @LearnVue  3 ปีที่แล้ว +2

      Thanks! Can't wait to keep making awesome Vue content for you all 😃

  • @colingregurich2950
    @colingregurich2950 ปีที่แล้ว +3

    Great video! Didn't even know Suspense components existed before today, and now I have a good understanding of how to use them

  • @yudilokhande8915
    @yudilokhande8915 3 ปีที่แล้ว +8

    Great video! You're explanations are always so clear

    • @LearnVue
      @LearnVue  3 ปีที่แล้ว

      Thanks for your support - it really means a lot.

  • @AbdulBasit-kx3ju
    @AbdulBasit-kx3ju 2 ปีที่แล้ว +2

    To the point tutorial, really helpful. Thanks man

  • @imtanuki4106
    @imtanuki4106 ปีที่แล้ว

    Nicely done! Moves along at a good clip, good post-production, kudos!

  • @shshannon6909
    @shshannon6909 ปีที่แล้ว

    This is very useful and can increase the user experience

  • @ericjunior105
    @ericjunior105 2 ปีที่แล้ว

    God bless you man, I love your channel and your website.

  • @SusanthCom
    @SusanthCom 3 ปีที่แล้ว +1

    Thank you for this beautiful solution ❤️❤️

  • @hackwithharsha5228
    @hackwithharsha5228 3 ปีที่แล้ว +1

    Thank You, content and editing looks too good.. few questions..
    1. 00:07:03 - This syntax looks different than what we usually see in Vue community,, what it is ?
    2. 00:07:03 - Looks like you are not registering these local components in App.vue, still it works without any issues.. how it happens ?
    3. Finally, how about creating another folder for skeletons rather than keeping them in components folder.. share your opinion for large-scale projects..
    Thank you once again !!

    • @LearnVue
      @LearnVue  3 ปีที่แล้ว +6

      Hey! Thanks for the kind words.
      The answer to your first 2 questions is the same. The Vite template (at least right now), is using an experimental feature with where your whole script essentially acts as the setup method, and everything is auto exported. It's still an active RFC that you can read here: github.com/vuejs/rfcs/pull/227
      As for the the last question, I think that's definitely a solid option to have a skeleton folder that mirrors your component's folder. There are definitely some other options such as just using custom directives in the component's themselves and writing a custom renderer to handle skeletons, but for simplicity and precision, the idea you suggested sounds great.

    • @hackwithharsha5228
      @hackwithharsha5228 3 ปีที่แล้ว

      @@LearnVue Thank You !!

  • @basiorbb3
    @basiorbb3 2 ปีที่แล้ว

    Man you are beast. Keep doing that please. Good job

  • @Awesome奥深
    @Awesome奥深 2 ปีที่แล้ว +1

    Cool, it helps to create the vue page.

    • @LearnVue
      @LearnVue  2 ปีที่แล้ว

      glad you think so!

  • @dragon3602010
    @dragon3602010 3 ปีที่แล้ว +3

    that's super but can you use tailwind css with the same example

    • @LearnVue
      @LearnVue  3 ปีที่แล้ว +1

      Videos with Tailwind will be coming in the near future :)

  • @markbalazo1914
    @markbalazo1914 2 ปีที่แล้ว

    This is cool and much more nice looking!

    • @LearnVue
      @LearnVue  2 ปีที่แล้ว

      i'm not sure what you mean. are you talking about setting up auth? because i just do that in the supabase console...i've been looking into ways to automatically pass the current supabase user to prisma queries github.com/prisma/prisma/issues/5128#issuecomment-921179713 this looks promising, but haven't tried it yet

  • @furkanulutas
    @furkanulutas 2 ปีที่แล้ว

    Great video. Thank you!

  • @rajikkali2381
    @rajikkali2381 ปีที่แล้ว

    Why use a span if you’re just going to convert it to a div with block display?

  • @ronnynestares3831
    @ronnynestares3831 3 ปีที่แล้ว +1

    with vue router?

  • @sarahhold9556
    @sarahhold9556 2 ปีที่แล้ว

    Hi, I'm a bit struggled. How can I add more users and photos? I mean this is only one, but if I need three of this with different photos, how I can add it to the code?

  • @diegognoatto8706
    @diegognoatto8706 2 ปีที่แล้ว

    isnt a good idea to set the height of the skeleton line to 1em or even 1ch as its inherinting the font stiles from the original card?

  • @dibbyo456
    @dibbyo456 2 ปีที่แล้ว

    Quality content.

  • @WorldRankMoba
    @WorldRankMoba ปีที่แล้ว

    Nice

  • @9gager87
    @9gager87 2 ปีที่แล้ว

    Awesome awesome video!

  • @myomyintaung1516
    @myomyintaung1516 2 ปีที่แล้ว

    how to create custom animation every time onscroll page

  • @Jacky-rc6mu
    @Jacky-rc6mu 2 ปีที่แล้ว

    This video should not have this less amount of like

  • @zergzerg4844
    @zergzerg4844 ปีที่แล้ว

    Did you see the animation of the skeleton? I didn't

  • @kudaliar7732
    @kudaliar7732 2 ปีที่แล้ว

    can i use this with laravel?

  • @Jpk45
    @Jpk45 2 ปีที่แล้ว

    Goat

  • @robertmoravek6047
    @robertmoravek6047 ปีที่แล้ว

    Great information but especially the coding part is WAY too fast if you're new to the subject or if you actually want to code along (even with pausing the video).

  • @hbibbekir
    @hbibbekir 2 ปีที่แล้ว

    why not just use a v-if on data wherenver it is loaded

    • @LearnVue
      @LearnVue  2 ปีที่แล้ว

      i think suspense cleans it up because in our setup method, we have an asynchronous component. if we made it a synchronous component and used a v-if, we'd need a helper method to load the data.

  • @bm2085
    @bm2085 2 ปีที่แล้ว

    Thanks for the video, I have found it interesting, but man, that styling part... its like from 2010... You have mentioned responsive design, than you set min-height, and started to float things around... maybe its just me, but I find this discusting... (I'm a front-end dev). Don't get me wrong the meaningful part of this video is fine, but the styling part is unnecessary and quite bad.

  • @mclotos
    @mclotos 2 ปีที่แล้ว

    too much useless blah-blah-blah and style descriptions.