Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I already have a route to edit an article and to see a list of articles. But I want to show a single article frontend. So I uncommented the route I tried to make work before:
Route::get('/articles/{article}', ArticleShowController::class)->name('articles.show');
and when I load http://localhost:81/articles/10 I get this error
Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating '_ctx.article.title')
logError — app.js:7901
handleError — app.js:7887
callWithErrorHandling — app.js:7841
flushJobs — app.js:8068
promiseReactionJob
http://localhost:81/js/index.js.map
and some warnings like
Vue warn]: Failed to resolve component: Head
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. (18)
and that is based on resources/js/Pages/Article/Show.vue
<template>
<Layout>
<Head title="Welcome" />
<h1>Welcome</h1>
<p>Hello {{ article.title }}, welcome to your first Inertia app!</p>
</Layout>
</template>
<script>
import AppLayout from '@/Layouts/AppLayout'
export default {
components: {
AppLayout,
},
props: {
articles: Object,
},
}
</script>
and controller
<?php
namespace App\Http\Controllers;
use App\Models\Article;
use Illuminate\Http\Request;
use Inertia\Inertia;
class ArticleShowController extends Controller
{
/**
* Handle the incoming request.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function __invoke(Request $request, Article $article)
{
$article->load('user');
return Inertia::render('Article/Show', compact('article'));
}
}
The articles database does have a column title. Shooting blanks here. What am I doing wrong?
See the props, it should be singular:
props: {
article: Object, // not articles
}
And, regarding the warning about Head, you need to import it and register inside components.
import { Head } from '@inertiajs/inertia-vue3'; // or 2
// ....
// ....
components: {
AppLayout,
Head,
}
@Niush On importing head using vue2 or vue3 - i.e.
import { Head } from '@inertiajs/vue3'
I get
ERROR in ./resources/js/Pages/Article/Show.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Article/Show.vue?vue&type=script&lang=js) 2:0-39
Module not found: Error: Can't resolve '@inertiajs/vue3' in '/Users/me/code/larastudio/resources/js/Pages/Article'
so it seems I am missing something. In devDependencies I have
"devDependencies": {
"@inertiajs/inertia": "^0.9.1",
"@inertiajs/inertia-vue3": "^0.4.2",
"@inertiajs/progress": "^0.2.5",
"@tailwindcss/forms": "^0.2.1",
"@tailwindcss/typography": "^0.3.0",
"@vue/compiler-sfc": "^3.0.5",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"tailwindcss": "^2.0.1",
"vue": "^3.0.5",
"vue-loader": "^16.1.2"
},
so Vue 3 should work.. so odd as well.
`import { Head } from '@inertiajs/inertia-vue3'`
works.
Now need to see the loading and issue Error: Cannot find module './article/Show' loading http://localhost:81/articles/9
<?php
namespace App\Http\Controllers;
use App\Models\Article;
use Illuminate\Http\Request;
use Inertia\Inertia;
class ArticleShowController extends Controller
{
/**
* Handle the incoming request.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function __invoke(Request $request, Article $article)
{
$article->load('user');
return Inertia::render('Article/Show', compact('article'));
}
}
works and titel also loads now. Only stil see warning
[Vue warn]: Failed to resolve component: Head
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. (18)
"
"
" at <Show"
"jetstream="
{canCreateTeams: true, canManageTwoFactorAuthentication: true, canUpdatePassword: true, canUpdateProfileInformation: true, hasEmailVerification: false, …}
"user="
{id: 21, name: "User Name", email: "[email protected]", email_verified_at: null, current_team_id: 1, …}
"errorBags="
[] (0)
and relates to terminal building error
WARNING in ./resources/js/Pages/Article/Show.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Article/Show.vue?vue&type=script&lang=js) 5:10-14
export 'Head' (imported as 'Head') was not found in '@inertiajs/inertia-vue3' (possible exports: App, Link, app, createInertiaApp, link, plugin, useForm, usePage, useRemember)
while I already import it..
Ran npm install @inertiajs/vue3 and now I can import head.
<template>
<Layout>
<Head title="Welcome" />
<h1>Welcome</h1>
<p>Hello {{ article.title }} welcome to your first Inertia app!</p>
</Layout>
</template>
<script>
import AppLayout from '@/Layouts/AppLayout.vue'
import { Head } from '@inertiajs/vue3';
export default {
components: {
Head,
AppLayout,
},
props: {
article: Object,
},
}
</script>
Think my Jetstream setup is still a mix of the old and new causing some issues. But now I still have this warning
Vue warn]: Failed to resolve component: Layout
Might just start this pilot project from scratch again..
@rhand <Layout> ... </Layout> probably need to be <AppLayout> ?
@Niush Yes, how silly of me! Thanks a lot for your help. Closing this thread now as I do have an article display partly working and all thanks to you. Really appreciate it!
Please or to participate in this conversation.