Mokkapps Logo

Vue Tip: Detailed Prop Definitions

11/12/2021

cover

Your Vue prop definitions should always be as detailed as possible, specifying at least type(s):

Good
props: {
  status: {
    type: String,
    required: true,
    validator: value => { return [ 'syncing', 'synced', 'version-conflict', 'error' ].includes(value) }
  }
}

Bad
props: {
  status: String
}

This has two advantages:

  • API documentation: It’s easy to see how the component is meant to be used.
  • Development Warnings: In development mode, you will get warnings if you pass incorrectly formatted props to a component.


If you liked this tip, follow me on Twitter to get notified about new tips, blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

Du hast einen Fehler in diesem Artikel gefunden? Du möchtest gerne etwas klarstellen, aktualisieren oder hinzufügen?

Alle meine Artikel können auf Github editiert werden. Jeder Fix ist willkommen, egal wie klein er sein mag!

Ändern auf Github
Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)

Michael Hoffmann

Senior Frontend Developer (Freelancer) aus München mit Fokus auf Vue.js