Vue Laravel Meta Title Issues
### 1. **Install and Configure Inertia Head**
The “ component in Inertia.js requires the `@inertiajs/vue3` library, which includes support for managing meta tags. Make sure you have it installed.
Run this command:
npm install @inertiajs/vue3Then, register the plugin in your Vue application:
import { createApp, h } from 'vue';
import { createInertiaApp, Head } from '@inertiajs/vue3';
createInertiaApp({
resolve: name => require(`./Pages/${name}`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.component('Head', Head)
.mount(el);
},
});### 2. **Use the “ Component Correctly**
Make sure you are using the “ component in your Vue components. For example:
<template>
<div>
<Head title="Log in" />
<h1>Login Page</h1>
</div>
</template>The `title` attribute sets the page's meta title.
### 3. **Check Your Layout**
Ensure that your base layout includes the necessary boilerplate for Inertia.js to manage the “ tag dynamically. For example, in your `resources/views/app.blade.php` file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title inertia></title>
@vite(['resources/js/app.js', 'resources/css/app.css'])
</head>
<body>
@inertia
</body>
</html>The `inertia` attribute on the “ tag is necessary for Inertia.js to update the title dynamically.
### 4. **Ensure No Conflicting Libraries or Components**
If you are using other libraries (e.g., Vue Meta), they might override the “ tag. Ensure only one library is responsible for managing the document head.
### 5. **Test for JavaScript Errors**
Open your browser's developer console and check for any errors. Missing imports or configuration issues might prevent the “ component from working correctly.
### 6. **Clear Cache**
If you have caching enabled (like `vite` or browser cache), ensure you clear it to see the updated changes.
### 7. **Verify Page Transition**
Ensure the Inertia page is fully loaded. If the meta title update depends on async data loading, make sure you update the title after the data is loaded. For example:
<script>
import { Head } from '@inertiajs/vue3';
export default {
components: { Head },
props: ['title'],
setup(props) {
return { title: props.title || 'Default Title' };
},
};
</script>Then pass the title dynamically:
Inertia.visit('/login', {
title: 'Log in'
});This setup ensures the meta title works dynamically in your Laravel + Vue + Inertia.js application.
import './bootstrap';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createI18n } from 'vue-i18n';
import { createApp, h } from 'vue';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import en from './i18n/en.json';
import es from './i18n/es.json';
const savedLang = localStorage.getItem('lang') || 'en';
const i18n = createI18n({
locale: savedLang, // set default local
fallbackLocale: 'en', // fallback locale in case the current locale is not available
messages: {
en,
es
}
})
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
createInertiaApp({
title: (title) => `${appName}`,
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob('./Pages/**/*.vue'),
),
setup({ el, App, props, plugin }) {
const app = createApp({ render: () => h(App, props) });
// Use plugins
app.use(i18n);
app.use(plugin);
app.use(ZiggyVue);
app.config.globalProperties.t = (…args) => i18n.global.t(…args);
// Register global components
//app.component('NavBar', NavBar);
// Mount the app
app.mount(el);
},
progress: {
color: '#4B5563',
},
});
Let's address it step-by-step and ensure proper integration:
—
### 1. **Update the Title Property**
Currently, the `title` function in your `createInertiaApp` is set as:
title: (title) => `${appName}`,This is static and will not include the dynamic page title provided in “ components. To dynamically append the page title, update it to:
title: (title) => (title ? `${title} - ${appName}` : appName),This ensures:
– If a title is provided (via “), it will be prefixed.
– If no title is set, it defaults to the app name.
—
### 2. **Verify Your Layout**
Ensure your `app.blade.php` includes the following in the “ section:
<title inertia></title>The `inertia` attribute allows Inertia.js to dynamically control the “ tag. Without this, the title changes will not reflect.
—
### 3. **Check the “ Component Usage**
Ensure you’re correctly using the “ component in your Vue pages. For example:
<template>
<div>
<Head title="Log in" />
<h1>Login Page</h1>
</div>
</template>
<script>
import { Head } from '@inertiajs/vue3';
export default {
components: {
Head,
},
};
</script>—
### 4. **Check for JavaScript Errors**
If the title is still not updating:
1. Open the browser console and check for JavaScript errors.
2. Ensure all dependencies (`@inertiajs/vue3`, `laravel-vite-plugin`, etc.) are properly installed and up-to-date.
—
### 5. **Ensure Plugins Are Loaded Correctly**
Your app is using `createI18n` and `ZiggyVue`. If these plugins interfere with `Inertia.js`'s reactivity, verify they are initialized correctly. Specifically:
– `app.use(plugin)` should happen before using global properties like `t`.
—
### 6. **Testing**
After making the changes:
1. Restart your dev server.
2. Navigate to a page and verify if the meta title updates.
3. If it doesn't, clear browser cache and local storage, then test again.
This should resolve your meta title issue. Let me know if the issue persists!