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