InertiaJs Link Component

In this Tutorial, we will create a Vue Component which will be responsible for the design and display of all the InertiaJs Links in our App. We will be able to change the CSS of all the links from within this component. It will also have support for displaying different type of links. Below is the sample output of the Component.

While creating a link in InertiaJs, you need to use <inertia-link /> tag to generate all the links. This will make sure that all the links will open up without reloading the Browser and give you a feel of Single Page Application (SPA).

<inertial-link :href="/departments/create">Add</inertia-link>

So above will create a link with text as "Add" and would link to "/departments/create", which on clicking would open up the link in SPA mode. Additionally, InertiaJs also allows you to pass Laravel Routes to create such links.

<inertial-link :href="route('departments.create')">Add</inertia-link>

This will generate a Link. We can use some TailwindCss Classes to provide some styling to it.

<inertial-link 
  :href="route('departments.create')"
  classes="px-3 py-2 mr-2 rounded text-white text-sm 
font-bold whitespace-no-wrap 
bg-blue-600 hover:bg-blue-800"
>Add</inertia-link>

This will design our Anchor Tag as Blue Button which would become darker as the User hovers over it.

However, since you have multiple of these Links in your App and you do not want to be repeating all the CSS Classes, it is best to extract our logic into a Component.

I prefer to keep all my UI Components in resources/js/Components Directory and I am going to call it AnchorLink.vue. We will use slot for the Anchor Text and we are going to use props to pass the href.

<template>
  <inertia-link
    :href="href"
    class="px-3 py-2 mr-2 rounded text-white text-sm 
font-bold whitespace-no-wrap 
bg-blue-600 hover:bg-blue-800"
  >
    <slot />
  </inertia-link>
</template>

<script>
export default {
  props: {
    href: {
      type: String,
      required: true,
    },
  },
};
</script>

Now we can import this UI Component into any of our Vue Component and simplify our earlier code to display the Anchor Link as follows:

<anchor-link
    :href="route('departments.create')"
>Add
</anchor-link>

Now we can use this AnchorLink Component to display all the Links in our App. And if we want to change any CSS Property for Links we only need to make changes in a single File.

However, currently all our links display as Blue Button. And you might want to display different color in case the link points to Edit or Delete Functionality. So let us update our AnchorLink Component.

We are going to introduce a new Prop called as mode and we will give it a default value of add.

    mode: {
      type: String,
      default: "add",
    },

Additionally we are going to move our classes bg-blue-600 hover:bg-blue-800 out of the template and move to a computed property which would be calculated based on mode value and then assigned to the template using :classes.

<template>
  <inertia-link
    :href="href"
    class="px-3 py-2 mr-2 rounded text-white text-sm 
font-bold whitespace-no-wrap"
    :class="classes"
  >
    <slot />
  </inertia-link>
</template>

<script>
export default {
  props: {
    href: {
      type: String,
      required: true,
    },
    mode: {
      type: String,
      default: "add",
    },
  },
  computed: {
    classes() {
      if (this.mode == "add") {
        return "bg-blue-600 hover:bg-blue-800";
      }
      return "";
    },
};
</script>

We can now add support for other modes like edit, delete and view by changing our computed property method classes.

    classes() {
      if (this.mode == "add") {
        return "bg-blue-600 hover:bg-blue-800";
      }
      if (this.mode == "edit") {
        return "bg-yellow-600 hover:bg-yellow-800";
      }
      if (this.mode == "delete") {
        return "bg-red-600 hover:bg-red-800";
      }
      if (this.mode == "view") {
        return "bg-green-600 hover:bg-green-800";
      }
      return "";
    },

Now we can call our AnchorLink Component and pass mode to it to display various kind of links. If we do not pass any mode, default value of add will be used to display Blue Buttons.

<anchor-link
    :href="route('departments.create')"
>Add
</anchor-link>

<anchor-link
    mode="edit"
    :href="route('departments.edit', id)"
>Edit
</anchor-link>

<anchor-link
    mode="delete"
    :href="route('departments.destroy', id)"
>Delete
</anchor-link>

<anchor-link
    mode="view" 
    :href="route('departments.show', id)"
>View
</anchor-link>

The above code will display the same output as the image shown at the start of the Tutorial. Now we can use the AnchorLink Component to display all the Links in our App.

Hope you have enjoyed this tutorial. For similar articles, you can follow me on Twitter