Vue Tip: Use v-bind to Pass Multiple Props to Components

It's totally valid to bind multiple props to a Vue component:

<template> <Button :type="type" :color="color" :disabled="disabled" :test-id="testId" :icon="icon" @click="onClick" @custom="onCustom" > Login </Button> </template>

For a cleaner template you can also v-bind to bind an object including all your property information to your component:

<template> <Button v-bind="button">Login</Button> </template> <script setup lang="ts"> const button = { type: 'submit', color: 'blue', disabled: false, testId: 'login-button', icon: 'arrow-right', } </script>

If you need to handle a lot of events you might want to group them using v-on:

<template> <Button v-on="buttonEventHandlers">Login</Button> </template> <script setup lang="ts"> const buttonEventHandlers = { onClick: () => console.log('Click'), onCustom: () => console.log('Custom Event'), } </script>

Info

v-bind and v-on works with Vue 2 and Vue 3.

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

Vue Tip: Watch Nested Values

The watch options support a dot-delimited path as key to watch nested values.

Vue Tip: Animate Child Component Before Route Leave

Vue Router provides a way to use transitions on route components and animate the navigations. But sometimes, you might want to animate a specific (sub-)component before a route is left.