How to pass dynamic route parameters as props in Vue.js?

In Vue, it is possible to pass dynamic route parameters as props. In this article, we will at how to implement them with an example.

We will begin by creating a new application using Vue CLI.

❯ vue create props-params-demo

Once, the installation is complete, we can navigate to the folder and run the server to load the application.

❯ cd props-params-demo
❯ npm run serve

This will run our server on port 8080 by default http://localhost:8080/

Next, we will install the vue-router package required for routing. We can install it using CDN, npm or yarn.

npm:

npm install vue-router@4

yarn:

yarn add vue-router@4

Once the package is installed, we can integrate it with our Vue application.

In this application, we will have a “customers” page that will list all the customers. Let’s create the component for the same.

// Terminal
❯ touch src/components/CustomerList.vue

Let’s add some code to the CustomerList.vue file.

<!-- CustomerList.vue -->
<template>
  <h1>Customers</h1>
</template>

This component can now be imported into the main.js file.

// main.js

import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";

import CustomerList from "./components/CustomerList";

const app = createApp(App);

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/customers",
      component: CustomerList,
    },
  ],
});

app.use(router);
app.mount("#app");

To display the component content, we need to add <router-view> component to the App.vue.

We will also declare the customers in the provide() option so that they will be available for the other components.

<!-- App.vue -->

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: "App",
  provide() {
    return {
      customers: [
        { id: "1", name: "Mickey Mouse", city: "New York" },
        { id: "2", name: "Donald Duck", city: "Chicago" },
        { id: "3", name: "Minnie Mouse", city: "Los Angeles" },
      ],
    };
  },
};
</script>

Let’s populate the customers in the CustomerList.vue.

<!-- CustomerList.vue -->

<template>
  <h2>Customers</h2>
  <div v-for="customer in customers" :key="customer.id">
    <router-link :to="'/customers/' + customer.id">{{
      customer.name
    }}</router-link>
  </div>
</template>

<script>
export default {
  inject: ["customers"],
};
</script>

Let’s make changes in the main.js file to add the dynamic route.

{
  path: "/customers/:id",
  component: TheCustomer,
  props: true,
}

Notice, we have mentioned props option and set its value to true. This tells the Vue router to automatically convert route parameters to props.

The entire main.js file will now contain the following code:

// main.js

import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";

import CustomerList from "./components/CustomerList";
import TheCustomer from "./components/TheCustomer";

const app = createApp(App);

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/customers",
      component: CustomerList,
    },
    {
      path: "/customers/:id",
      component: TheCustomer,
      props: true,
    },
  ],
});

app.use(router);
app.mount("#app");

We have also declared a new component TheCustomer for the dynamic route. Let’s create the component file and add the code.

<!-- TheCustomer.vue -->

<template>
  <h2>params id: {{ id }}</h2>
  <p>{{ customer.name }}</p>
  <p>{{ customer.city }}</p>
</template>

<script>
export default {
  inject: ["customers"],
  props: ["id"],
  created() {
    this.customer = this.customers.find((customer) => customer.id === this.id);
  },
};
</script>

Here, we have defined id prop.

props: ["id"]

With this, we can access the id parameter as a prop.

<h2>params id: {{ id }}</h2>

Let’s look at the output:

That’s it!😃