Inertia.js is a robust framework that allows you to build single-page applications (SPAs) using server-side routing and your favorite front-end stack. Ziggy is a package that makes it easy to generate named routes in JavaScript applications, which works seamlessly with Inertia.js. In this tutorial, we will walk through the steps to integrate Ziggy into your Vue.js application using Inertia.js.

Prerequisites: Before starting, make sure you have the following set up:

1. A working Vue.js application with Inertia.js has already been implemented.
2. Laravel backend with the Ziggy package installed.

Step 1: Install Ziggy Package In your Laravel backend project, install the Ziggy package using Composer:

composer require tightenco/ziggy

Step 2: Configure vite.config.js. In your Vue.js project, configure the vite.config.js file to import the Ziggy package. Open the vite.config.js file and add the following:

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
    vue({
      template: {
        base: null,
        includeAbsolute: false,
      },
    }),
  ],
  resolve: {
    alias:{
      ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue.es.js'),
    },
  },
})

Step 3: Import Ziggy into app.js Open the app.js file of your Vue.js application and import the ZiggyVue from Ziggy:

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import MainLayout from '@/Layouts/MainLayout.vue'
import { ZiggyVue } from 'ziggy'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    let page = pages[`./Pages/${name}.vue`]
    page.default.layout = page.default.layout || MainLayout
    return page
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(ZiggyVue)
      .mount(el)
  },
})

Step 4: Run the Application Now, run your Vue.js application and ensure that everything is working as expected:

npm run dev

Step 5: Use <Link> in Your Components You can now use <Link> in your Vue components as a shorthand for <InertiaLink>. For example:

<template>
  <div>
    <table class="table">
      <thead>
        <tr>
          <th>Asset Tag</th>
          <th>Item Name</th>
          <th>Item Status</th>
          <th>Inventory In By</th>
          <th>Inventory In Date</th>
          <th>Inventory In Time</th>
          <th> Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in inventoryItems.data" :key="item.id">
          <td>
            <Link :href="route('inventory.item', item.id)">
              {{ item.asset_tag }}
            </Link>
          </td>
          <td>{{ item.item.name }}</td>
          <td>{{ item.item.item_status ? item.item.item_status.name : 'N/A' }}</td>

          <td>{{ item.user ? item.user.first_name + ' ' + item.user.last_name : 'N/A' }}</td>
          <td>{{ formatDate(item.created_at) }}</td>
          <td>{{ formatTime(item.created_at) }}</td>
          <Link :href="route('inventory.item', item.id)"> View</Link>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { Link } from '@inertiajs/vue3'

defineProps({ 
  inventoryItems: Object, 
})

// Function to format date in YYYY-MM-DD format
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toISOString().slice(0, 10)
}

// Function to format time in HH:MM:SS format
const formatTime = (dateString) => {
  const date = new Date(dateString)
  return date.toISOString().slice(11, 19)
}
</script>

Congratulations! You have successfully integrated Ziggy with Inertia.js in your Vue.js application. Now you can use Ziggy’s route generation capabilities to easily navigate your Inertia. js-powered SPA. With server-side routing and Ziggy’s convenience, you can build a smooth and performant front-end experience while leveraging Laravel’s backend capabilities.
I hope this guide helps you effectively use Ziggy with Inertia.js. Happy coding!