Updated version for Laravel 10 / Twill 3 on Apr 14, 2023
Laravel comes with a default package.json file to build the front-end assets and already integrates Vite and the Laravel Vite packages.
We can now install all the needed dependencies via yarn, but you can of course use npm if you prefer.
yarn add vue
yarn add vite @vitejs/plugin-vue --dev
yarn add typescript --dev
yarn add @inertiajs/vue3
Configurations
Inertia
We need a TypeScript file to boot our Inertia application, so let's create app.ts file in /resources/js/ (you can rename the previous default app.js - or name it like you want and adapt the other files accordingly - and delete the bootstrap.js file).
You can refer to the official documentation for more details.
For an easy start, we will just create and mount a basic Vue / Inertia app:
import { createApp, h, type DefineComponent } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
createInertiaApp({
resolve: async (name: string) => {
let page = await resolvePageComponent(`../views/Pages/${name}.vue`, import.meta.glob<DefineComponent>('../views/Pages/**/*.vue'))
return page
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})
What it does
Import Vue and Inertia packages
Create the application, looking for Pages Vue Components (that replace standard Laravel Blade files) in /views/Pages when rendering from Laravel Controller
Vite
Laravel comes with a default vite.config.ts file in our project root folder with laravel plugin configured that we are going to edit:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.ts'],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
What it does
TypeScript
We create a tsconfig.json in our project root folder:
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"useDefineForClassFields": true,
"jsx": "preserve",
"noImplicitThis": true,
"strict": true,
"isolatedModules": true,
"preserveValueImports": true,
"importsNotUsedAsValues": "error",
"target": "ESNext",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"skipLibCheck": true,
"types": ["vite/client", "node"],
"baseUrl": ".",
"paths": {
"@/*": ["resources/*"]
},
"include": [
"resources/js/**/*.ts",
"resources/js/**/*.d.ts",
"resources/**/*.vue"
]
}
}
What it does
Use default compiler options given by Vue
Defines the include folders: all .ts, .d.ts and .vue files in our resources folders
Scripts definition
All the configuration is set, let's have a look at the Vite scripts in our package.json
"scripts": {
"dev": "vite",
"build": "vite build"
},
What it does
Of course, you can name them like you want and adapt the scripts according to your build process.
We can now start our development environment:
yarn dev
Or build for production:
yarn build
Root View set up
To integrate Inertia and load our assets on the first page visit, we need a standard view Blade file. So we create app.blade.php in /resources/views/ folder (you can use and rename the default welcome.blade.php).
app.blade.php is the default view used by Inertia, you can change it in the Inertia Middleware or call Inertia::setRootView() in your code.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@vite('resources/js/app.ts')
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
What it does
Add the @vite() Blade directive in the head to reference our Vite entry point
Add the @inertiaHead Blade directive in the head
Add the @inertia() Blade directive in the body
Time to play and display our first Page
All that remains to do is:
Laravel
We will create a simple Controller, its only task is to render the Index Page (that Inertia will resolve in our /resources/js/app.ts and that will look for /resources/views/Pages/Index.vue file).
/app/Http/Controllers/IndexController.php
<?php
namespace App\Http\Controllers;
use Inertia\Inertia;
use Inertia\Response as InertiaResponse;
class IndexController extends Controller
{
public function __invoke(): InertiaResponse
{
return Inertia::render('Index');
}
}
/routes/web.php
<?php
use App\Http\Controllers\IndexController;
use Illuminate\Support\Facades\Route;
Route::get('/', IndexController::class)->name('index');
Vue
We will start displaying a welcome message and write something in the console.
/resources/views/Pages/Index.vue
<template>
<div>
<h1>Welcome</h1>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
console.log('Page - Index')
},
})
</script>
Or with the SFC <script setup> (compile-time syntactic sugar for using Composition API inside Single File Components: https://vuejs.org/api/sfc-script-setup.html)
<script setup lang="ts">
console.log('Page - Index')
</script>
<template>
<h1>Welcome</h1>
</template>
RUUUUUUN
Start Vite
yarn dev
Go to the web root of your project in a browser (probably http://localhost)
and...
And maybe should we validate the production build
First we build our assets.
yarn build
Now refresh your browser and you can see that the production JavaScript files are loaded
We'll do our best to provide source code of the serie on GitHub
