​
Intro

resources/js/Components/AppHead.vue

This component is already included with the layouts.

​
Props

None of the props is required.

  • title: Page title. Defaults to pageTitle global prop if not set.
  • description: Page description.
  • url: Page canonical URL.
  • image: Image URL.
  • imageWidth: Image width in pixels.
  • imageHeight: Image height in pixels.
  • imageAlt: Image title.
  • author: Author of the page. Defaults to global author.
  • twitterCard: Twitter/X card type. Defaults to global twitter card value.
  • twtterCreator: Twitter/X username of the author of the page.
  • createdAt: Date when page was created.
  • updatedAt: Date when page was last updated.
  • pagination: Pagination data.

​
How to use it?

Pass the props from Controller.

return Inertia::render('MyPageIndex', [
    // other props for this page...
    'meta' => [
        'title' => __('Meta title'),
        'description' => __('Meta description'),
        'image' => 'https://this-is-path-to-the-image.com',
        // other meta props...
    ],
]);

Wrap your page in PageLayout and meta data will be automatically rendered.

MyPageIndex.vue
<PageLayout>
  <div>Page content...</div>
</PageLayout>

​
Meta title

Meta title can be set in three different ways:

  1. Pass the title in meta prop as in example above.
  2. Set pageTitle (without title in meta) and this value will be used.
  3. Override title (or any other meta tag) in your page components, right after the layout

Meta title is generated via title format. Default title format is %page_title% | %app_name%. You can update the format via Admin panel or by updating the APP_TITLE_FORMAT in .env file.

Placeholder %page_title% is the meta title you set, and %app_name% is placeholder for your application name.

I highly recommend to use meta prop for public pages.

​
Tab title

Tab title (browser) will be automatically set from meta title.

You can also set or override tab title using Head component.

<PageLayout>
  <Head :title="$t('Tab title')" />
</PageLayout>

​
Title format

By default, meta title will be formatted as %page_title% | %app_name% where page_title is the title your set, and app_name is the name of your application. You can update the format by updating the APP_TITLE_FORMAT in .env file or via admin panel under admin/meta.

You can also override the format per page by passing the titleFormat prop.
Overriding the title format is useful when you add the app name in your title and want to avoid duplicated strings.

return Inertia::render('MyPageIndex', [
    'meta' => [
        'title' => __('What is :name?', ['name' => config('app.name')]),
        // This will render only the title, without app name behind it
        'titleFormat' => '%page_title%',
    ],
]);

In this specific case, instead of “What is Butchr? | Butchr” we will have “What is Butchr?” title.

​
Pagination

Pagination has three required parameters.

export interface MetaPagination {
  total: number;
  perPage: number;
  currentPage: number;
}

You can generate such array in PHP using this helper function.

$data = Model::->paginate();

// This will return array with total, perPage and currentPage
get_pagination_data($data);

Then you should use this data to render pagination component.

<Pagination :data="meta.pagination" />

Check out modules/Blog/app/Http/Controllers/PublicBlogController.php for real example using pagination.

InvoicesSocial links