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

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

1<template>
2  <Button
3    :type="type"
4    :color="color"
5    :disabled="disabled"
6    :test-id="testId"
7    :icon="icon"
8    @click="onClick"
9    @custom="onCustom"
10  >
11    Login
12  </Button>
13</template>

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

1<template>
2  <Button v-bind="button">Login</Button>
3</template>
4
5<script setup lang="ts">
6const button = {
7  type: 'submit',
8  color: 'blue',
9  disabled: false,
10  testId: 'login-button',
11  icon: 'arrow-right',
12}
13</script>

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

1<template>
2  <Button v-on="buttonEventHandlers">Login</Button>
3</template>
4
5<script setup lang="ts">
6const buttonEventHandlers = {
7  onClick: () => console.log('Click'),
8  onCustom: () => console.log('Custom Event'),
9}
10</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.