Part 1 - Get Things Running!

The following is a basic introduction to Getting started with Laravel and Inertia JS.

You may want to have the following open for references:

Create a new Laravel app laravel new inertia-app

After the app is built move into the app directory cd inertia-app

Add our required packages composer require inertiajs/inertia-laravel npm install @inertiajs/inertia @inertiajs/inertia-vue npm install vue npm install

Rename our welcome.blade.php to app.blade.php and add the following to app.blade.php app.blade.php is the default name required by Inertia but can be changed.

<!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>
</head>
<body>
    @inertia
</body>
</html>

Add the following to app.js This is the heart of our inertia app.

import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'

Vue.use(InertiaApp)

const app = document.getElementById('app')

new Vue({
  render: h => h(InertiaApp, {
    props: {
      initialPage: JSON.parse(app.dataset.page),
      resolveComponent: name => require(`./Pages/${name}`).default,
    },
  }),
}).$mount(app)

Create a Pages directory in resourses/js

This is where our vue pages will live for our app. This is the default based on the code above but can be changed.