Posts Learn Components Snippets Categories Tags Tools About
/

Laravel Inertia Nav Link Component

Laravel Inertia Nav Link Component that you can just copy and paste for your project

Created on Jun 14, 2022

77 views

In this short snippet, we'll be sharing Laravel Inertia Nav Link Component. This component has 2 props that you can pass to dynamically update the "href" and "class" attribute.
<script setup>
import { computed } from 'vue';
import { Link } from '@inertiajs/inertia-vue3';

const props = defineProps(['href', 'active']);

const classes = computed(() => props.active
    ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition  duration-150 ease-in-out'
    : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out'
);
</script>

<template>
    <Link :href="href" :class="classes">
        <slot />
    </Link>
</template>

You can just copy and paste the code to your project and right away use it to determine the active state of the link.

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for Laravel Inertia Nav Link Component

)