After getting your app set up and running you might want to add some style to it. There's many different ways to do that but we will keep it simple for now.

Use bootstrapcdn for ease In our app.blade.php we can replace the mix css with bootstrapcdn, just for ease of use

// remove 
<link href="{{ mix('/css/app.css') }}" rel="stylesheet" />

// add
<link rel="stylesheet" href="<https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css>" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

Next we will create a Layout.vue in our pages directory

This is will be a global view to be used across our app. The content from individual pages will get populated into the <slot /> tag.

<template>
    <div>
        <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
            <div class="container">
                <a class="navbar-brand" href="/">Boston Legal</a>
            </div>
        </nav>

        <div class="container">
            <slot />
        </div>
    </div>
</template>

Return to our Index.vue and ammend to the following

Instead of a <div> in our <template> we now will use <layout> and everything inside that will get slotted into the layout file. It works the same as Laravel's @extends, @yields & @section. What we will have to do is import the layout and define it as a component in order to be used.

<template>
    <layout>
        Welcome to Inertia JS!
    </layout>
</template>

<script>
    import Layout from './Layout'

    export default {
        components: {
            Layout,
        },
    }
</script>

Now we have a styled page

Lets add some links To create an Inertia link, use the Inertia link component. <inertia-link href="/">Home</inertia-link> Note, any attributes you provide will be proxied to the underlying <a> tag.

<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
    <div class="container">
        <inertia-link class="navbar-brand" href="/">Boston Legal</inertia-link>

        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <inertia-link class="nav-link" href="/">Home</inertia-link>
            </li>
            <li class="nav-item">
                <inertia-link class="nav-link" href="/team">Team</inertia-link>
            </li>
        </ul>
    </div>
</nav>

Update our Web.php to reflect the new page