ktquez / vue-head

Manager the meta information of the head tag, a simple and easy way
MIT License
984 stars 73 forks source link

using with prerender-spa-plugin is causing title and meta tags to be displayed twice #76

Closed praneethmendu closed 4 years ago

praneethmendu commented 5 years ago

Hi, Firstly, thanks for the amazing work you do, hope they decide to make everyone's life better by making vue-head a standard part of vue soon.

I am not sure this is an issue with vue-head but please forgive me if I am wasting your time.

This issue only happens when live on netlify ( without their prerender option active ), not while being served locally.

the live site shows : <title>about | anonplayer about | anonplayer</title> but my component has

  head: {  
    title: {
      inner: "about | anonplayer",
      separator: ' ',
    }, ...

and this happens for every page of my single page app

and this is also happening to meta tags i set using vue-head where there are two sets of the tags i intended to have.

looks like this

I have the default prerender settings :

      config.plugins.push(new PrerenderSPAPlugin({
        // Required - The path to the webpack-outputted app to prerender.
        staticDir: path.join(__dirname, 'dist'),
        // Required - Routes to render.
        routes: ['/', '/about'].concat(contracts.map(each => `/${each.abi}/${each.contract}`)),
      }))
equinusocio commented 5 years ago

Hi @praneethmendu , i think your are looking for this: https://github.com/ktquez/vue-head#replace-content-the-elements

There are some tags that are unique and that only need to update the content, such as meta tags name="description" or rel="canonical". Therefore, it is necessary to define a id, so that the element is found and is made the update correctly, avoiding duplicates tags.

meta: [
{ name: 'description', content: 'A description of the page', id: 'desc' }
]
d0peCode commented 5 years ago

I have following code for title in my index component:

export default {
    head: {
        title: function () {
            return {
                inner: this.$options.filters.translate('yacht charter'),
                separator: ' ',
                id: 'indexTitle'
            }
        },

I'm also using prerender-spa-plugin. Title at first is once (when I use show code ctrl+U) but when javascript loads and execute, it double title.

This happen only to prerendered app.

I'm doing something wrong?


Edit 18.02.2019

I think I fixed it with changing 7th line in vue-head.js in node_modules directory from:

complement: window.document.title,

to

complement: '',
bigsee commented 5 years ago

@BorysTyminski I was searching for ages for the reason my titles were duplicating when using prerender-spa-plugin and yours was the only thing that fixed it! Lifesaver! Thank you :)

Is there an option to set complement and separator rather than hacking around inside the package?

bigsee commented 5 years ago

Maybe that's what this option is for: https://github.com/ktquez/vue-head#default-custom-title ?

ktquez commented 4 years ago

Do you still get this error? Set title information in Vue.use working? (https://github.com/ktquez/vue-head#default-custom-title) Do you have any repositories to analyze?

ktquez commented 4 years ago

I closed the issue, but if you still have questions, just open again, ok?