Send meta data to layout with Laravel and Vue 3

[Livijn]

I am trying to make it easier for myself to specify title and meta tags. Right now, the docs recommends using <teleport> but I don't want to clutter my template with that in every single page. I'd rather send my meta data from my controller so that I can use it as suggested here. That way I can reuse the same data in the root template and my pages components.

Maybe something like this:

Controllers:

return Inertia::render('Home', [
    // ...
])->withMeta(['title' => 'blabla']);

Layout:

<template>
  <teleport to="head">
    <title>{{ meta && meta.title || '' }}</title>
    <!-- and more meta tags -->
  </teleport>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { usePage } from '@inertiajs/inertia-vue3'

export default defineComponent({
  setup() {
    const meta = computed(() => usePage().props.meta || '')
    // meta listens 
    return { meta }
  },
});
</script>

[Livijn]

Right now I just pass the meta as a prop and then listen for it from the layout as above. However, by omitting meta as a prop in the pages components, I get an annoying error:

Extraneous non-props attributes (errors, meta) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

[Livijn]

I realized I can use transformProps to set this up. Eg:

    transformProps: (props) => {
      if ("meta" in props) {
        window.meta = props.meta;
        delete props.meta;
      }

      return props;
    },