N
Nuxt•4d ago
hiimmox

Prevent Nuxt from escaping the meta title

Does anyone know if it's possible to prevent Nuxt from escaping test when writing the title? I'm trying to add a slash, eg: testing w/ a slash and it escapes it to: <title>testing w&#x2F; a slash</title>
3 Replies
kapa.ai
kapa.ai•4d ago
Hi @hiimmox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To prevent Nuxt from escaping characters in the meta title, you can use the useHead composable with the innerHTML property. This allows you to set raw HTML content for the title, which won't be automatically escaped by Nuxt. Here's an example of how you can do this: 
<script setup>
useHead({
  title: () => ({
    innerHTML: 'testing w/ a slash'
  })
})
</script>
<script setup>
useHead({
  title: () => ({
    innerHTML: 'testing w/ a slash'
  })
})
</script>
By using the innerHTML property, you can include special characters like slashes without them being escaped. However, it's important to note that this approach bypasses the built-in security measures that protect against potential XSS attacks. Only use this method if you're certain that the title content is safe and doesn't contain any user-generated or untrusted input. For more information on using useHead and managing meta tags in Nuxt, you can refer to the SEO and Meta documentation. Docs > Api > Composables > useHead provides more details on the useHead composable and its usage. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4d ago
<@327193365797928963> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
hiimmox
hiimmoxOP•4d ago
innerHtml only works for script tags I ended up creating a nitro hook: 
// Find title and og:title tags in the HTML before parsing and un-escape slashes
export default defineNitroPlugin((nitroApp) => {
  function processTitleTags(htmlString: string) {
    // Process regular title tags
    let processed = htmlString.replace(/<title>(.*?)&#x2F;(.*?)<\/title>/g, (_, p1, p2) => {
      return `<title>${p1}/${p2}</title>`;
    });

    // Process og:title meta tags
    processed = processed.replace(/<meta property="og:title" content="([^"]*?)&#x2F;([^"]*)"/g, (_, p1, p2) => {
      return `<meta property="og:title" content="${p1}/${p2}"`;
    });

    return processed;
  }

  nitroApp.hooks.hook('render:html', (html) => {
    for (let i = 0; i < html.head.length; i++) {
      const tag = html.head[i];
      if (tag.includes('title')) {
        const processedTag = processTitleTags(tag);
        if (processedTag !== tag) {
          html.head[i] = processedTag;
        }
      }
    }
  });
});
// Find title and og:title tags in the HTML before parsing and un-escape slashes
export default defineNitroPlugin((nitroApp) => {
  function processTitleTags(htmlString: string) {
    // Process regular title tags
    let processed = htmlString.replace(/<title>(.*?)&#x2F;(.*?)<\/title>/g, (_, p1, p2) => {
      return `<title>${p1}/${p2}</title>`;
    });

    // Process og:title meta tags
    processed = processed.replace(/<meta property="og:title" content="([^"]*?)&#x2F;([^"]*)"/g, (_, p1, p2) => {
      return `<meta property="og:title" content="${p1}/${p2}"`;
    });

    return processed;
  }

  nitroApp.hooks.hook('render:html', (html) => {
    for (let i = 0; i < html.head.length; i++) {
      const tag = html.head[i];
      if (tag.includes('title')) {
        const processedTag = processTitleTags(tag);
        if (processedTag !== tag) {
          html.head[i] = processedTag;
        }
      }
    }
  });
});

Did you find this page helpful?