Customizing the <title> meta data pattern

[MartinMuzatko]

Hello!

I'm trying to override the behavior of some dataMixin variables, like the $title.

When setting this.$title in Home.vues created method, I get the following error:

Home.vue?cc50:48 [Vue warn]: Computed property "$title" was assigned to but it has no setter.

found in

---> <Home>
       <Layout> at .vuepress/theme/Layout.vue
         <Root>

Is there a way to override this mechanism?
I'd prefer title - siteTitle

[yyx990803]

You can't... and shouldn't. Use configurations like YAML front matter.

[MartinMuzatko]

I don't get it?

Please let me rephrase my request: YAML front matter does not give me the freedom to define a pattern for the siteTitle/pageTitle constellation used in the <title>. I don't care if overriding the dataMixin is not the way to do that, you could also provide a pattern to override via the config.js for a custom <title>.

[yyx990803]

I don't get it either.

What exactly are you trying to do other than giving the page a title? You want to dynamically generate the title to use in JavaScript? Why? What is it that specifically requires JavaScript? Maybe give an example?

When making feature requests, realize that others don't have the context of what exactly you are trying to do because... well, I'm not you.

[MartinMuzatko]

First of all sorry for the misunderstanding.

I wanted to customize the way siteTitle and pageTitle is used in order to spit out the $title used in <title></title>

E.g. the order and the separator character.
Right now, it ALWAYS is e.g. "Vuepress | Config Reference" or "Some Other Website | Subpagename"
But I would prefer having the content pagetitle first, and then the sitetitle. e.g. "Config Reference - Vuepress"

Is there a way to customize that? From what I saw, this behavior is hardcoded in the dataMixin.js file

Hope this is understandable. Thanks.

[meteorlxy]

@MartinMuzatko lol, I understand what you mean at the first stage, but you took a wrong way to describe it. No wonder Evan confused about that.

vuepress/lib/app/dataMixin.js

Lines 52 to 64 in 5023d19

	$title () {
	const page = this.$page
	const siteTitle = this.$siteTitle
	const selfTitle = page.frontmatter.home ? null : (
	page.frontmatter.title || // explicit title
	page.title // inferred title
	)
	return siteTitle
	? selfTitle
	? (siteTitle + ' | ' + selfTitle)
	: siteTitle
	: selfTitle || 'VuePress'
	},

Look at current dataMixin, the $title value is fixed to the pattern: (siteTitle + ' | ' + selfTitle).

One may want the $title to be just selfTitle or other pattern like (selfTitle + ' - ' +siteTitle ), which is impossible in default theme.

In my opinion, this is theme specific. If you choose to use default theme, you have to use $title in such pattern. Or you can use a custom theme for that.

@yyx990803 So I propose to define $title in default-theme, not in the core. The core should only provide data, but should not restrict how to display data.

[MartinMuzatko]

Thank you @meteorlxy :)
Yes this is what I meant.

[jacobmllr95]

What about a formatTitle() config option?

The default function could be something like:

const formatTitle = (siteTitle, pageTitle) => {
  return siteTitle
    ? pageTitle
      ? `${siteTitle} | ${pageTitle}`
      : siteTitle
    : pageTitle || 'VuePress'
}

In dataMixin.js:

  ...
  $title () {
    const page = this.$page
    const pageTitle = page.frontmatter.home ? null : (
      page.frontmatter.title || // explicit title
      page.title // inferred title
    )
    return this.$site.formatTitle(this.$siteTitle, pageTitle)
  },
  ...

[meteorlxy]

In fact, you can overwrite $title in your custom Layout.vue.

Emmm will the formatTitle() config option works for .yml or .toml config?

[pavloko]

@meteorlxy I'm not exactly sure what you mean by including $title in theme and not in the core, so I'll try to share my thoughts on this.

From my perspective, because configuring the head tag is done outside of custom theme context, it makes sense to standardize this for all head tags, specifically title and description.

Regarding the case @MartinMuzatko mentioned, it seems like if we just include title and description from YAML front matter without modifying it, would already solve the problem. One can prefix the titles manually. Automatic prefixing seems to belong in a plugin/mixin.

[ulivz]

You can override the $title by using enhanceApp.js:

// .vuepress/enhanceApp.js

export default ({ Vue }) => {
  Vue.mixin({
    computed: {
      $title () {
        return 'VUE'
      }
    }
  })
}

cc @yyx990803

[hyvyys]

So yes, I am writing a custom theme... Where do I put extra logic around generating title meta attribute? I want to build it from more than just site title and page title.

[PedroOndh]

So yes, I am writing a custom theme... Where do I put extra logic around generating title meta attribute? I want to build it from more than just site title and page title.

I've been working on this recently. One option is to add it in the entry Layout of the theme, something on this line:

Layout.vue:

...
export default {
  components: { Header, Footer },
  computed: {
    $title() {
      if (this.$frontmatter.home) {
        return this.$siteTitle;
      } else {
        return `${this.$page.title} | ${this.$frontmatter.custom_value}`;
      }
    }
  }
};