3 Kinds of Props in Vue

One of Vue's core features is the use of props.

Props are how we pass data around in Vue, from parent to child components.

But not all props are created equal.

There are three main kinds:

1. Template Props
2. Configuration Props
3. State Props (or Data Props).

Let's dive into each and see how they differ and when to use them.

1. Template Props

Imagine you're building a Vue component. You want to pass some text into it — maybe a button label or a message. This is where Template Props come in handy.

Template Props are used directly in the component's template. They're not for methods or computed refs.

Just the template.

Here's a simple example:

<template>
  <div>{{ message }}</div>
</template>

<script setup>
defineProps({
  message: String
});
</script>

This component takes a message prop and displays it.

Simple, right?

But Template Props have a unique trait. They're similar to slots.

You can always replace a Template Prop with a slot for more flexibility.

Let's see how.

Converting to a Slot

Our example above can be rewritten using a slot:

<template>
  <div><slot /></div>
</template>

Instead of passing message as a prop, you'd use the component like this:

<MyComponent>Here's a message!</MyComponent>

Slots let you pass more than just text.

You can include HTML or other components. That's why converting a Template Prop to a slot can be a powerful move.

It makes your component so much more flexible.

However, going from a slot back to a Template Prop is trickier.

Slots can do everything Template Props can and more. But you can't pass HTML or components as props (well, at least you shouldn't).

Why Bother?

Knowing when to use Template Props or slots can help you design better components.

If you need simplicity, Template Props are great. For flexibility, slots are your friend.

In the next section, we'll explore Configuration Props and how they differ from Template Props.

2. Configuration Props

Configuration Props are all about changing how a component behaves. They don't pass data like State Props. Instead, they tweak the component's appearance or functionality.

Let's say you have a Button component.

You want it to look different based on where it's used. A variant prop could control its style:

<template>
  <button :class="`btn-${variant}`">
    Click me
  </button>
</template>

<script setup>
defineProps({
  variant: {
    type: String,
    default: 'primary'
  }
});
</script>

This variant prop is a Configuration Prop.

It changes the button's class based on its value. You could pass "primary", "secondary", or "danger" to change the button's appearance (assuming we have those styles set up, of course).

Configuration Props are also very versatile. You can use them to toggle features, adjust styles, or modify component behavior.

They're especially useful for creating reusable and adaptable components.

This is why they're the central piece of the second Level of Reusability: Configuration.

Next, we'll look at State Props and how they're used to manage data within components.

3. State Props (or Data Props)

State Props are all about passing dynamic data into a component.

They're the key to making components interactive and responsive to user input.

Imagine a list component that displays items passed to it:

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
</ul>
</template>

<script setup>
defineProps({
  items: Array
});
</script>

The items prop is a State Prop.

It contains the data the component needs to render its list. As items changes, Vue's reactivity system ensures the component updates automatically.

State Props are crucial for handling data within components. They work hand-in-hand with Vue's reactivity to keep your UI in sync with your application's state.

The Evolution of State Management in Vue

Vue's approach to state management has evolved over the years.

Early versions relied heavily on State Props and Vue's own reactivity system.

Then, solutions like Vuex and then Pinia and the Composition API have provided more structured ways to manage state. But State Props remain a fundamental part of Vue, especially for passing data down from parent to child components.

When to Use Each Type of Prop

Now that we know the three kinds of props, we need to know how to actually use them.

Choosing the right type of prop depends on what you need your component to do. Here are some basic guidelines:

• Use Template Props for simple data passing that's directly displayed in the template. Especially if that data is static and not user data.
• Opt for Configuration Props when you need to adjust a component's behavior or appearance. Often these are booleans or enums.
• State Props are best for dynamic data that changes over time. Anything that's stored in a database (or could be).

Of course, the best way to learn these is through my course, Reusable Components, where I go through these in great detail.

Conclusion

Props are a core feature of Vue, enabling components to communicate and be dynamic.

Understanding the three kinds of props — template, configuration, and state — can help you design better components. Each type has its place, depending on your component's needs.

These concepts are essential to understanding how to create more reusable components, and are crucial in the first few Levels of Reusability.

If you want to go even deeper and master the art of creating highly reusable components, check out my course Reusable Components. In it we cover all 6 Levels of Reusability:

1. Templating — Reusing code by wrapping it up inside of a component
2. Configuration — Using configuration props to allow for varying behaviour
3. Adaptability — Allowing components to become future-proof
4. Inversion — Letting other components control the process
5. Extension — Using reusability throughout our component
6. Nesting — Creating powerful hierarchies of components

Not only that, but there are other patterns and tricks in this course that you won't find anywhere else.

Check out Reusable Components to learn more.