Level 102
Yes. It does not have a value until your vue code is done loading.. You can give it a value as a fallback if you want
<title inertia>Loading ... </title>
Oct 17, 2022
2
Level 11
The url reloads before Page title when refresh the page
Hey. when I refresh the page, the url shows before the title, I am using laravel 9 with inertia.
in my app.blade
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia></title>
<!-- Scripts -->
@routes
@vite(['resources/css/app.css', 'resources/js/app.js'])
@inertiaHead
</head>
<body class="font-sans antialiased">
@inertia
</body>
</html>
app.js
import {createApp, h} from 'vue';
import {createInertiaApp} from '@inertiajs/inertia-vue3';
import {InertiaProgress} from '@inertiajs/progress';
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
import {ZiggyVue} from '../../vendor/tightenco/ziggy/dist/vue.m';
import axios from 'axios';
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
createInertiaApp({
title: (title) => `${title}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({el, app, props, plugin}) {
return createApp({render: () => h(app, props)})
.use(plugin)
.use(ZiggyVue, Ziggy)
.mount(el);
},
});
in Applayout.vue
<script setup>
defineProps({
title: String,
});
</script>
<template>
<div>
<Head :title="title" />
And then in Example.vue I pass the title like this:
<template>
<Head title="Example"/>
Level 11
Inertia SSR resolved the issue
Please or to participate in this conversation.