'With vue-head head title is added on events page

I added https://github.com/ktquez/vue-head to vuejs app for head settings and it works differently I expect. When I open home page I have in title : “home page title” But When I open events page I have in title : “events title | home page title”

I define head on events page :

head: {
    title: function () {
        return {
            inner: “events title", id: 'app_head',
        }
    },

    meta: function () {
        return [
            { name: 'description', content: 'Events description ' }
        ]
    },

    link: [
        { rel: 'canonical', href: '/', id: 'canonical' },
    ],
},

Looks like head title is added on events page and I do not need this. How can I fix it ?

MODIFIED BLOCK: I found a possible decision if in source file /node_modules/vue-head/vue-head.js To set empty init values:

},
var opt = {
    complement: '',
    separator: ''
}

And I do not see any possibility to set default values and it is not clear why my settings are not applied. My page has :

import VueHead from 'vue-head' // https://github.com/ktquez/vue-head
Vue.use(VueHead)

export default {
    name: 'eventsTimelinePage',
    mixins: [appMixin],

    components: {},

    data() {
        return {
            site_name:'!!', // I need to set to head these values
            site_heading:'??',
            site_description:'TTT',

        }
    }, // data () {


    head: {
        title: function () {
            return { // Use page values for head
                inner: 'Events of ' + this.site_name, id: 'app_head',
                complement: '', // THAT IS NOT APPLIED
                separator: '', // THAT IS NOT APPLIED
            }
        },
        meta: function () {
            return [
                {
                    name: 'description',
                    content: 'Events of '+ this.site_name+' : '+ this.site_description,
                    id: 'description'
                }
            ] 
        },
        link: [
            { rel: 'canonical', href: '/', id: 'canonical' },
        ],
    },  // head: {



    created() {
    }, //  created() {

    mounted() {
        this.setAppTitle('Events', 'Events', bus)

        retrieveAppDictionaries('eventsTimelinePage', ['events_per_page', 'site_name', 'site_heading', 'site_description']) // I read the data from db
        bus.$on('appDictionariesRetrieved', (data) => {
            if (data.request_key === 'eventsTimelinePage') {
                this.events_per_page = data.events_per_page
                this.site_name = data.site_name // ASSIGN VALUES FROM DB
                this.site_heading = data.site_heading
                this.site_description = data.site_description
                this.$emit('updateHead')  // REFRESH HEAD PROPS
            }
        })
        this.loadEventsTimeline()
    }, // mounted() {

Thanks!

vuejs2


Solution 1:[1]

If you check their documentation, there's a 'custom title' section. In there they talk about 'separator' and 'complement' having defaults - sounds like you'll need to set those to empty strings to get rid of them.

Solution 2:[2]

I made my own simple script

const useHead = (props) => {
    const { title, meta: metas } = props
    document.title = title
    metas.forEach(({ name, property, content }) => {
        if (name) document.head.querySelector(`meta[name="${name}"]`).content = content
        if (property) document.head.querySelector(`meta[property="${property}"]`).content = content
    })
}

export default useHead

<template>
...
</template>

<script>
import useHead from '../mixins/useHead';

export default {
   name: '...',
   mounted() {
      useHead({ title: '...' meta: [...] })
   }
}
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 coedycode
Solution 2 Samculo

Related Questions