Laravel, Jetstream, Inertia and Vuetify

Horace Ho
Oct 21, 2020

--

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:

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

<?phpnamespace 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 devphp 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

--

--