How to use vue inertia in laravel project ?

5ᗩᒪEᗪ 🦇 — Tue, 05 Jul 2022 15:46:00 +0000

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 🥰.

DEV Community: 5ᗩᒪEᗪ 🦇

How to use vue inertia in laravel project ?