Use named API route with parameters inside Vue component

Hey guys.

On a Laravel Breeze Inertia with Vue 3 setup, I built a simple RESTful API which I neet to make use of, inside a Vue component.

One of the API routes that I need to use looks like this:

// GET|HEAD        api/v1/projects ......... projects.index › Api\V1\ProjectController@index

My component needs to simply retrieve the Project models upon user request, paginated and filtered by URL parameters (which my API is fully capable of doing).

For instance, one (local) request URI looks like this:

// http://127.0.0.1:8000/api/v1/projects?categoryId[eq]=1&page=2&includeCategory=true

I thought of using the route() method, but I have no idea about the correct way of supplying the route parameters to the method.

Any thoughts on this?

Thanks!

LaryAI

3 years ago

Best Answer

Level 58

To use a named API route with parameters inside a Vue component, you can use the route() method provided by Laravel. You can pass the route name and any required parameters as arguments to the method. Here's an example:

import { route } from 'laravel-mix';

export default {
  data() {
    return {
      projects: [],
      categoryId: 1,
      page: 2,
      includeCategory: true,
    };
  },
  mounted() {
    this.fetchProjects();
  },
  methods: {
    fetchProjects() {
      const url = route('api.v1.projects', {
        categoryId: { eq: this.categoryId },
        page: this.page,
        includeCategory: this.includeCategory,
      });

      axios.get(url).then(response => {
        this.projects = response.data;
      });
    },
  },
};

In this example, we're using the route() method to generate the URL for the api.v1.projects route, passing in the required parameters as an object. We're then using Axios to make a GET request to the generated URL and update the component's projects data property with the response data.

1 like

DanielRønfeldt

3 years ago

Level 10

@laryai's answer is correct, except for the name of the route, which, in my case, is projects.index.

Here's my crude implementation for Vue 3. The code doesn't include any URL-parameter change logic, which can obviously be implemented later.

<script setup>
import { onMounted, ref } from 'vue';

const projects = ref([]);
const currentPage = ref(1);
const categoryId = ref(null);
const includeCategory = ref(true);
const url = route('projects.index', {
    categoryId: categoryId.value,
    page: currentPage.value,
    includeCategory: includeCategory.value,
});

const fetchProjects = () => {
    axios.get(url)
    .then(response => {
        projects.value = response.data.data;
    });
};

onMounted(() => {    
    fetchProjects();
});
</script>

<template>
    <div class="container md:flex mx-auto max-w-7xl px-6 lg:px-8 py-12 lg:py-16">
        <div
            class="grid gap-4 lg:gap-12 grid-cols-1 grid-rows-4 sm:grid-cols-2 sm:grid-rows-2 xl:grid-cols-4 xl:grid-rows-1"
        >
            <div
                v-for="project in projects"
                :key="project.id"
                class="bg-neutral-200 dark:bg-white"
            >
                <h2>{{ project.title }}</h2>
            </div>
        </div>
    </div>
</template>

Please or to participate in this conversation.