JavaScript

I am using Vue.js 2, my SDK is IntelliJ:

I am trying to import HTML into a Vue.js file.

The purpose is for the <title></title> attribute, since Vue doesn’t directly seem to support this.

In the <template> markup, I have:

div v-html="message1"></div>

In the data, I have a very simple message1:

message1:   '<title>My webpage -- from message1 </title>',

Interestingly, I can display message1 with “moustache” syntax, but it just shows the title tags.

The message1 used by v-html compiles, but it doesn’t appear on the page as rendered.

Is the premise that Vue doesn’t directly support <title></title> correct? I’ve seen complex workarounds for this, but is there a simple HTML-like way of getting this tag there for simple static text? The goal of this is for accessibility purposes.

The actual goal is to get it to display in the “tab” part of the page, where it should display. I can display it on the page, but not in the “tab” part of the page (above the URL on most browsers).

Answer

As you can see here, many browsers have a default css style for the title tag.

In Chrome there is:

title {
  display: none;
}

You should use another tag or just override the default style.

Using v-html with message data — does Vue not support the element?

Advertisement

Answer