Vue Router, Inertia in Laravel

▶

In our projects, we automatically have SPA (Single Page Application) type navigation in Laravel Inertia, which, let's remember, uses Vue by default for client-side rendering in the view. Therefore, typical HTML links (<a>) should not be used for internal navigation, as these cause complete page reloads.

We can easily check this: if we place a traditional link and click on it, we'll see the entire page reload, which is not what we want. Internal navigation should be internal to the application container, which is usually defined in Vue as <div id="app">. In our case, the reload should only happen in the corresponding section, not the entire application:

import { Link } from "@inertiajs/vue3"

When to Use Traditional Links

This doesn't mean that links are forbidden. They can be used for external cases, such as links to third-party pages or websites that are not part of our application. However, for internal navigation, we must use the mechanism provided by Inertia.

Inertia Replaces Vue Router

In basic Vue, we would normally use Vue Router to handle SPA navigation. However, when working with Inertia, Vue Router is not necessary, as Inertia internally implements navigation and URL changes.

If we were to combine Vue Router with Inertia, both processes would overlap, causing conflicts. That's why Inertia provides its own component called Link, which is part of the Inertia core.

Importing the Link Component

In Vue 3, we import the Link component in the following way:

import { Link } from "@inertiajs/vue3"

This is a named import, so we must respect the name Link exactly as it is. We cannot assign it an arbitrary alias like Link2, as it won't be recognized:

// Incorrect import { Link2 } from "@inertiajs/vue3" // This will throw an error

Once imported, we can use it in our components:

import AppLayout from "@/Layouts/AppLayout.vue"

Basic Usage of the Link Component

Using Link is very simple, similar to an <a> in HTML, but it maintains SPA navigation:

<Link class="text-sm text-purple-400 hover:text-purple-700" :href="route('category.edit', c.id)"> Edit </Link>

:href="route('category.edit', c.id)" generates the route URL.

When clicked, the entire page is not reloaded; only the corresponding component is updated.

It even changes the URL and the page title, respecting the behavior of an SPA.

We can also create links for other actions, such as creating a new record:

<Link class="link-button-default my-3" :href="route('category.create')"> Create </Link>

Conclusion

With Inertia, we have:

• SPA navigation without reloading the entire page.
• Simple and secure handling of routes and URLs.
• Elimination of the need for Vue Router for internal navigation.

This allows us to efficiently integrate the navigation of our modules and components, keeping the application fast and fluid.