Reusable Components and Vue Router [VueJS]

Subscribe to my YouTube channel for more tutorials on working with VueJS and AdonisJS -- an MVC framework for NodeJS!

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

Check out the CodePen here:

Some other notes:

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

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.