Reusable Form Input Components With Vue 3

แชร์
ฝัง
  • เผยแพร่เมื่อ 6 ม.ค. 2025

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

  • @hafizjavaid
    @hafizjavaid 2 ปีที่แล้ว +5

    Really helpful as always. Please create the fully functional project using vue 3 set-up api, vuex / pinia and typescript

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

    This video just cleared a confusion I had for quite some time! Thx for the superb explanation 👏🏻

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

    Great content, hope to see a nuxt 3 tutorial soon

    • @JohnKomarnicki
      @JohnKomarnicki  2 ปีที่แล้ว +1

      Yes, I’ll be creating some content with nuxt soon!

  • @_the_one_1
    @_the_one_1 2 ปีที่แล้ว +6

    Pro tip: if you use `type: [Boolean, String]` for the label prop you don't need to specify `default: false` because that would be set by default

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

      I think the whole boolean isn't necessary, just make the string not required. An empty string is falsy..

  • @Al-Misanthropic-Bundy
    @Al-Misanthropic-Bundy 2 ปีที่แล้ว +1

    These damn bots commenting on every video now.
    Thanks a lot for the video! I love Vue3 and you always slow us nice and easy stuff about it!

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

      Yeah, lol. I’ve seen these a lot recently 😂 thanks glad you’re enjoying and finding them valuable!

  • @kookoo6128
    @kookoo6128 หลายเดือนก่อน

    very good useful tutorial, about a very specific thing.

  • @tanzimibthesam5861
    @tanzimibthesam5861 6 หลายเดือนก่อน

    What to do if i want to make whole form resuable?

  • @ReturnMeVoid
    @ReturnMeVoid 2 หลายเดือนก่อน

    what about passing v-model.lazy.number???

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

    Hello is this also applicable for ionic vue project? Thank you

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

    when i import the Modal to my parent component, the child component is shown in the script (Modal gets green) and not in the template (Modal is shown as plain text ). As a result i cant reuse the child component.
    Can someone help me plz

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

    Thanks this is what I need.

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

    You could make it even simpler by using the useVModel function from the VueUse library

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

      Yeah, I wanted to show how to do this without that, to understand how it worked under the hood. But vueUse is definitely a viable option!

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

    Thank you for video, this is useful

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

    Thank you. Will you tell us about how to validate these components?

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

      I’m going to create a follow up video for validation on forms!

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

    Thanks for the video John!
    I have a question, the $attrs key binded can be used for any other html tag? Is there another using for this key?

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

      $attrs holds all the attribute values pass from the parent for you to access within the template itself. You can use it on any element you want to inherit the attributes on

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

      @@JohnKomarnicki Awesome!! Thank you
      Also, idk why I can’t use defineEmmits or defineProps() without importing them, the editor shows an error, or I’m not sure if it’s a vetur or volar error

    • @Al-Misanthropic-Bundy
      @Al-Misanthropic-Bundy 2 ปีที่แล้ว +1

      @@DanielTamesMake sure you are using

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

    Thanks for this tutorial. Its helpful but Getting following error. Can you please help me here? =>
    E:\...\customelement\src\components\BaseInput.vue
    14:3 error 'defineProps' is not defined no-undef
    ✖ 1 problem (1 error, 0 warnings)

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

      try importing defineProps from vue

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

    Would be great if you can share, how the same BaseInput can be used with other types like (number, email, password, etc)

  • @karthikm.1804
    @karthikm.1804 2 ปีที่แล้ว

    Tutorial on Product feedback app with vue

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

    Great vid, but it be way better using pinia, just a comment