Inertia is a small library that allows you to Build single-page apps, without building an API.
First, use this command to create a laravel project:
composer create-project --prefer-dist laravel/laravel inertia-app
OR you can define the laravel version you need, here for example i will use laravel 8 by running this command
composer create-project --prefer-dist laravel/laravel:8.6.11 inertia-app
Sitting up the inertia is divided into two stages:
- server-side
- client-side
1- Server Side
After creating laravel project you need to install inertia using this command:
composer require inertiajs/inertia-laravel
and now, create a layout file in recourses\view\app.blade.php and add this into this file:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8" />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href=”{{ mix(‘/css/app.css’) }}” rel=”stylesheet” />
<script src=”{{ mix(‘/js/app.js’) }}” defer></script>
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
After that you need to create inertia middleware using this command:
php artisan inertia:middleware
and don't forget to register the middleware in the App\Http\Kernel by adding this :
‘web’ => [
// …
\App\Http\Middleware\HandleInertiaRequests::class,
],
2- Client-Side
First, install the dependencies by this command:
npm install @inertiajs/inertia @inertiajs/inertia-vue3
Second install vue.js:
npm install vue@next
[optional — recommended] if you use vue 3 and you need to use single-file component (SFC) which allows you to use <template>, <scripts>, and <styles> on one page, you need to run this command:
npm install -D @vue/compiler-sfc
Now in the resources\js\app.js file add this code:
import { createApp, h } from ‘vue’
import { createInertiaApp } from ‘@inertiajs/inertia-vue3’
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})
Also don’t forget to create a Pages folder inside resources\js\, this Page folder will be used to create .vue files inside it.
After that you need to update to code in (webpack.mix.js) by adding ( .vue(3) & .version() ), so it will be like that:
mix.js(‘resources/js/app.js’, ‘public/js’)
.vue(3)
.postCss(‘resources/css/app.css’, ‘public/css’, [
//
])
.version();
now install any remaining dependencies by running:
npm install
then, to pull in any required dependencies you have run this command:
npx mix
you may be asked to run npx mix again
Now, an Error may occur when you run npx mix that asks you to Use — location=global instead
in this case, run this command:
npm i vue-loader
Now run npx mix again:
npx mix
That were the steps of setting up vue inertia in laravel project, I hope it was helpful 🥰.
Top comments (0)