Vue-meta: &quote; symbols in title

[varave]

hello, how to use html symbols in title?

does not display quote:
" Some title "

thanks.

[pimlie]

You dont need to escape quotes yourself, vue-meta will do that for you. Thats also why the above doesnt work as the escaping is rather simple and it also just replaces all &'s with &. If your input somehow is already pre-escaped, just unescape your input when setting the title for vue-meta

[pimlie]

@manniL Wdyt, we could probably 'fix' this by calling unescape first on user titles before we escape ourselves. But feels a bit overly helpful, if the user eg receives an escaped title from a cms he could unescape it himself as well.

[manniL]

@pimlie I think this (unescaping stuff) should belong to the userland. I don't see a common use case here.

[varave]

@pimlie unescape() does not solve the problem

[pimlie]

@inweid Could you create a minimal reproduction which shows the issue you are experiencing?

[varave]

@pimlie solved the problem with this way (RegEx)

head() {
    return {
      title: this.META_PROPERTY.TITLE.replace(/"/ig, '"'),
    }
  }

[pimlie]

Thanks for the udpate. We might consider this a bug anyway because I only just realised now the disableSanitizers dont work for title, will leave this issue open in the mean time

[varave]

@pimlie but I would like to see such a solution for vue-meta, for example

head() {
    return {
      title: htmlDecode(someTitle)
    }
  }

[hecktarzuli]

Thanks for the udpate. We might consider this a bug anyway because I only just realised now the disableSanitizers dont work for title, will leave this issue open in the mean time

It seems (at least in Chrome) that the title shouldn't contain encoded text (\" & etc..) because if you set the title via JS, it will show them as text instead of the chars they represent. But it looks as though a straight shows up fine in source. So if this lib encodes it, should it be?

[pimlie]

@hecktarzuli Hmm, thats indeed a good observation as that breaks commonality between ssr and browser usage. So either we should process client updates by changing the <title> tag instead of calling document.title or we should leave it as is.
Both have pros/cons, from a DX point of view changing the title tag on the client with innerHTML so we can insert special chars might be an improvement but I think its normally considered an anti pattern (to be clear, using innerText results in the same behaviour as just using document.title).
Therefore I'd prefer to leave escaping in user land for now. Eg the he lib facilitates html entity decoding and could be used by users if needed.

If someone has strong and valid arguments why we should use innerHTML on the title tag anyway or use he by default, I am open to discuss that. Closing this issue for now

[equinusocio]

I have same issue with meta tags. I have an og:image from CDN with query string that is escaped and so invalidated:

https://images.ctfassets.net/gz0sygvqczyz/2d5wlYciwkwLpvGlSMc8Eg/914a2626b91bbd41fe630238858c74a8/AR.png?fit=pad&f=top&w=1200&h=630&bg=rgb:F3F6F9

become

https://images.ctfassets.net/gz0sygvqczyz/2d5wlYciwkwLpvGlSMc8Eg/914a2626b91bbd41fe630238858c74a8/AR.png?fit=pad&f=top&w=1200&h=630&bg=rgb:F3F6F9

[pimlie]

@equinusocio Please check the docs: https://vue-meta.nuxtjs.org/api/#dangerouslydisablesanitizersbytagid

[equinusocio]

Thank you!