nuxt / vue-meta

Manage HTML metadata in Vue.js components with SSR support
https://vue-meta.nuxtjs.org
Other
4.08k stars 247 forks source link

Vue 3: `titleTemplate` no longer working #783

Open xaddict opened 2 years ago

xaddict commented 2 years ago

Working in Vue 3 with the options API and vue-meta 3.0.0-alpha.10.

It seems there's no longer a way to set a titleTemplate?

Any other ideas on how to do nested routes with nested title? Example: Start Page: 'Application Name' Module Page: 'Module Name - Application Name' Everything inside the module: 'Page Name - Module Name - Application Name'

DengSihan commented 2 years ago
<metainfo>
    <template v-slot:title="{ content, metainfo }">
        {{
            metainfo.titleTemplate
                ? metainfo.titleTemplate.replace('%s', content)
                : content
        }}
    </template>
</metainfo>

works for me


then, you can use it in vue3 just like vue2

in <script setup>

// with titleTemplate
import { useMeta } from 'vue-meta';
useMeta({
    title: 'Nuxt',
    titleTemplate: '%s - A SSR JavaScript Framework',
});

// without titleTemplate
import { useMeta } from 'vue-meta';
useMeta({
    title: 'Nuxt',
    titleTemplate: false,
});
xaddict commented 2 years ago

@DengSihan Yes and No.

Because all meta stuff gets injected into the dom the document so you end up with: <titletemplate>%s - Level in between - Our Application</titletemplate>

Which is not optimal?

tripflex commented 9 months ago

For anybody showing up later searching, this project is no longer maintained ( https://github.com/nuxt/vue-meta/issues/808 ) and suggest looking at using something like https://github.com/unjs/unhead/