Adocasts Adocasts
Adocasts Adocasts
Sign In Sign Up

Ready to get started?

Join Adocasts Plus for $8/mo, or sign into an existing Adocasts Plus account, to get access to all of our lessons.

Join for $8/mo Sign in
robot mascot smiling
Building with AdonisJS & Inertia

Creating A FormInput Vue Component

@tomgobich
Published by
@tomgobich
In This Lesson

We'll create a reusable FormInput Vue Component using our current form field as a starting point.

Chapters

00:00 - Creating our component file
00:55 - Defining our FormInput props
02:40 - Using our prop values
04:37 - Using our FormInput component
06:00 - Doing some cleanup

Join the Discussion 2 comments

Share your thoughts!
Create a free account to join in on the discussion
  1. @gribbl
    @gribbl

    Hello. I believe that with recent versions of Vue, it is possible to handle things more easily.

    The recommended approach to implement two-way binding on a component with v-model is to use the defineModel() macro.

    const model = defineModel()

<Input v-model="model" />
    
  
    
    
    
      Copied!

    Prop destructuring is now supported and allows to declare default values.

    const { type = 'text' } = defineProps<{...}>()
    
  
    
    
    
      Copied!

    Lastly, there is a shorthand for attribute bindings with same name.

    <Input :type :disabled :required />
    
  
    
    
    
      Copied!
    2
    1. Responding to gribbl
      @tomgobich
      @tomgobich Adocasts Plus

      Hi gribbl! Thank you for sharing! Yeah, I had missed a number of Vue 3.4's enhancements. I apologize we didn't use any of them in this series. As for 3.5's enhancements, this codebase is still on 3.4 - I don't want to update any packages mid-series until we get to the end where we'll focus on Inertia v2's changes.

      0