inertia-link vuetify

1. Install the required dependencies:

npm install @inertiajs/inertia @inertiajs/inertia-vue vue @vuetify/vue2 @vuetify/vuetify

1. Set up Inertia in your Vue app's entry file, typically app.js:

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.css';

const el = document.getElementById('app');

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, app, props }) {
    createApp({ render: () => h(app, props) })
      .use(Vuetify)
      .mount(el);
  },
});

1. Create your first Inertia page. For example, create a file named Welcome.vue in the Pages directory:

<template>
  <v-container>
    <v-row>
      <v-col>
        <v-card>
          <v-card-title>Welcome to my app!</v-card-title>
          <v-card-text>
            <p>This is an example Inertia page using Vuetify.</p>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'Welcome',
};
</script>

1. Update your routes file (routes/web.php for Laravel) to use Inertia:

use App\Http\Controllers\WelcomeController;
use Inertia\Inertia;

Route::get('/', [WelcomeController::class, 'index']);

1. Create a controller (WelcomeController.php):

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;

class WelcomeController extends Controller
{
    public function index()
    {
        return Inertia::render('Welcome');
    }
}

1. Run your application:

php artisan serve

1. Visit http://localhost:8000 in your browser and see the Inertia page with Vuetify components.