Reusable Components and Vue Router [VueJS]
Tags: vue, javascript, tutorial
Published: 2018-02-01 22:05:06

---
title: Reusable Components and Vue Router [VueJS]
published: true
description: Learn how to create reusable components that can be configured with Vue Router. 
tags: vue, javascript, tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/z4uqiy4e7nl9pkm66bpg.png
---

> Subscribe to my YouTube channel for [more tutorials on working with VueJS and AdonisJS -- an MVC framework for NodeJS](https://www.youtube.com/channel/UCF5w1QdWroWOoxxXMgp88AQ?sub_confirmation=1)!

Passing props from parent components to child components is a common setup, and it’s not too difficult to grasp how this makes child components reusable.

Well, what if we want to reuse a component across multiple routes and have the route change drive the component properties and behavior?

## Watch the Video + Fork the Pen

{% youtube UIu-7qOdki4 %}

Check out the CodePen here:

{% codepen https://codepen.io/patrickodacre/pen/jwXJOE %}


## Some other notes:

* make sure your route definition objects allow for props `props: true`
* make sure your components are setup to receive those props

```javascript

const routes = [
  { path: '/', 
    name: 'home', 
    components: {
        content: Home
    }
  },
  { path: "/one", 
    name: 'one', 
    components: {
        header: Foo, 
        content: contentOne
    }, 
    props: {header: true, content: false} },
  { path: "/two", 
    name: 'two', 
    components: {
        header: Foo, 
        content: contentTwo
    }, 
    props: {header: true, content: false} },
  { path: "/three", 
    name: 'three', 
    components: {
        header: Foo, 
        content: contentThree
    }, 
    props: {header: true, content: false} },
  { path: "/four", 
    name: 'four', 
    components: {
        header: Foo,
        content: contentFour
    }, 
    props: {header: true, content: false} },
  { path: "/five", 
    name: 'five', 
    components: {
        header: Foo, 
        content: contentFive
    }, 
    props: {header: true, content: false} },
]

```

Here I want to use Foo as my header component, but I want my header to be slightly different for each page.

I want Foo to show different titles, different text, and even different callable methods.

Fortunately, Vue Router supports passing route params as props. This feature makes it really easy to customize any component to a given context.

## Props: Types, Required, Defaults

The great thing about props is how easy it is to flag them as required, create default values and setup type hinting.

When using props between routes, you can set all values, some values, or none.

It’s a very flexible feature that is easy to read and understand with a little practice.

## Use defaults Where Possible, or...

be sure to use v-if / v-show in your templates to avoid errors.

Default values help you avoid a problem with missing props, but where defaults are not set, and a prop is not required, you have to be careful to avoid undefined errors from your template.

You may not realize there’s a problem until you try and navigate to a route where you failed to set a certain prop. The more props you allow for, the easier it is to miss this potential error.

## Found this helpful?

Be sure to subscribe to the YouTube channel. I have many more tutorials in the works for VueJS, AdonisJS and more.