Inertia.js in MattStrauss/dev_site

composer.json

{
    //
    "require": {
        //
        "inertiajs/inertia-laravel": "^0.4.5"
    },
    //
}

app/Http/Controllers/BlogController.php

Open in GitHub

use App\Models\Post;
use Inertia\Inertia;
 
class BlogController extends Controller
{
    //
    public function show($slug)
    {
        $post = Post::with('tags')
        ->live()->whereSlug($slug)->first();
 
        if (! $post) {
            return Inertia::render('Blog/Index', ['error' => true, 'posts' => $this->getBlogPosts()]);
        }
 
        return Inertia::render('Blog/Show', ['post' => $post]);
    }
 
    private function getBlogPosts()
    {
        return Post::with('tags')
            ->live()
            ->orderBy('publish_date', 'DESC')->get();
    }
}

resources/js/Pages/Blog/Show.vue

Open in GitHub

<template>
    <layout>
        <Head>
            <title>{{post.title}}</title>
            <meta name="description" :content="post.excerpt" />
            <meta name="og:description" :content="post.excerpt" />
            <meta name="og:title" :content="post.title" />
            <meta name="og:type" content="website" />
            <meta name="og:site_name" content="Matt Strauss - Software Developer" />
            <meta name="og:url" :content="'https://mattstrauss.dev/blog/' + post.slug" />
            <meta name="og:image" :content="'https://mattstrauss.dev' + post.featured_image" />
            <meta name="twitter:title" :content="post.title">
            <meta name="twitter:description" :content="post.excerpt">
            <meta name="twitter:card" content="summary_large_image">
            <meta name="twitter:image" :content="'https://mattstrauss.dev' + post.featured_image">
            <meta name="twitter:creator" content="@mstrauss_dev">
        </Head>
        <div class="bg-gray-600 p-3 md:p-10 inset-y-auto object-center">
            <div class="object-cover">
                <div class="p-4 object-center text-center pb-10">
                    <div class="md:ml-40 md:mr-40 pb-5">
                        <p v-text="post.title" class="text-3xl text-yellow-500 font-hairline"></p>
                        <div class="w-16 border-t-4 border-yellow-500 text-center ml-auto mr-auto mt-3 mb-3"></div>
 
                        <div>
                            <img :src="post.featured_image" alt="featured image of post"
                                 class="h-60 w-60 rounded-full mx-auto border-2 border-yellow-500" >
 
                            <p class="text-gray-100 text-sm tracking-widest py-2">
                                {{post.created_at}} &middot; {{post.readTime}} minute read
                            </p>
 
                            <div class="px-6 pt-4">
                                <span v-for="tag in post.tags" class="inline-block bg-gray-100 rounded-full px-3 py-1
                                        text-sm font-semibold text-gray-600 mr-2 mb-2">
                                    <span> <i class="fas fa-tags text-yellow-600"></i> {{tag.name}} </span>
                                </span>
                            </div>
 
                            <div v-html="post.body"
                                 class="text-gray-100 mt-6 prose prose-yellow prose-lg mx-auto text-left">
                            </div>
 
                        </div>
                    </div>
                </div>
            </div>
        </div>
 
    </layout>
</template>
 
<script>
import Layout from '../../Shared/Layout';
import {Head, Link} from '@inertiajs/inertia-vue3'
export default {
    name: "Show",
    components: {
        Layout,
        Head,
    },
    props: {
        post : Object,
    },
}
</script>

MattStrauss/dev_site

composer.json

app/Http/Controllers/BlogController.php

resources/js/Pages/Blog/Show.vue

We'd Love Your Feedback

Thank You!