Laravel, Jetstream, Inertia and Vuetify

Laravel Jetstream is the new application scaffolding for Laravel. Inertia allows you to create fully client-side rendered, single-page apps, without much of the SPA complexity. Vuetify is a Vue UI library with beautifully handcrafted components.

Here is a tutorial to use Vuetify in a Laravel project, integrated via Inertia. The screenshot above shows a Vuetify Card inside a Laravel app. The source code can be found on github:

horaceho/laravel-inertia-vuetify-skeleton

Install Laravel Jetstream and Inertia, with Teams

laravel new skeleton --jet --stack=inertia --teams

Setup Laravel

cd skeleton
# setup database in .env
php artisan migrate

Install Vuetify

npm install vuetify
npm install

Create resources/js/Plugins/vuetify.js:

import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
export default new Vuetify();

Update resources/js/app.js:

import vuetify from './Plugins/vuetify'
new Vue({
 vuetify,
 render: (h) =>
 h(InertiaApp, {
  props: {
   initialPage: JSON.parse(app.dataset.page),
    resolveComponent: (name) => require(`./Pages/${name}`).default,
   },
 }),
}).$mount(app);

Create a SkeletonController and a route

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Inertia\Inertia;
class SkeletonController extends Controller
{
  public function myself(Request $request)
  {
    return Inertia::render('Skeleton/Myself', [
      'user' => $request->user(),
      'team' => $request->user()->currentTeam,
    ]);
  }
}

Create a route in web.php:

use App\Http\Controllers\SkeletonController;
Route::middleware(['auth:sanctum', 'verified'])
  ->get('/myself', [SkeletonController::class, 'myself'])
  ->name('skeleton.myself');

Setup and start the server:

npm install & npm run dev
php artisan serve

Open the Jetstream registration page in a browser and register a user:

http://127.0.0.1:8000/register

Open the Vuetify page about with the current user information:

http://127.0.0.1:8000/myself

A Vuetify Card component in Myself.vue