An Easy Vue 3 Skeleton Loading Screen with Suspense

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

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

  • @colingregurich2950
    @colingregurich2950 2 года назад +3

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

  • @samuelcatlow
    @samuelcatlow 3 года назад +11

    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 😃

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

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

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

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

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

  • @AbdulBasit-kx3ju
    @AbdulBasit-kx3ju 3 года назад +2

    To the point tutorial, really helpful. Thanks man

  • @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 3 года назад

    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?

  • @ericjunior105
    @ericjunior105 3 года назад

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

  • @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 !!

  • @ronnynestares3831
    @ronnynestares3831 3 года назад +1

    with vue router?

  • @SusanthCom
    @SusanthCom 3 года назад +1

    Thank you for this beautiful solution ❤️❤️

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

    how to create custom animation every time onscroll page

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

    This is very useful and can increase the user experience

  • @basiorbb3
    @basiorbb3 3 года назад

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

  • @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 :)

  • @Awesome奥深
    @Awesome奥深 3 года назад +1

    Cool, it helps to create the vue page.

    • @LearnVue
      @LearnVue  3 года назад

      glad you think so!

  • @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

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

    can i use this with laravel?

  • @furkanulutas
    @furkanulutas 3 года назад

    Great video. Thank you!

  • @9gager87
    @9gager87 2 года назад

    Awesome awesome video!

  • @Jacky-rc6mu
    @Jacky-rc6mu 2 года назад

    This video should not have this less amount of like

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

    Quality content.

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

    Nice

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

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

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

  • @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).

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

    Goat

  • @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 3 года назад

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