Non standard element not appearing in <head>

Question

Non standard element not appearing in <head>

72 Views Asked by Marcel Gruber At 20 October 2024 at 23:46

I am using vue-meta: ^2.4.0 to populate the <head> of my Nuxt site. Everything works as expected except for when I add non standard HTML elements. In this case, I want <nonstandard href="${process.env.SOME_VALUE_FROM_ENV}"> in the <head>, however it never appears, even if I hardcode it with a simple value. Are non standard elements not supported?

My nuxt.config.js is as follows:

module.exports = {
  head: {

    // works
    htmlAttrs: {
      lang: 'en'
    },

    // works
    link: [
      { rel: 'shortcut icon', href: '/images/favicon.ico', type: 'image/ico' }
    ],

    // works
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
      { 'http-equiv': 'X-UA-Compatible', content: 'IE=Edge' }
    ],
    
    // NONE OF THESE APPROACHES WORK
    nonstandard: [
      { href: '${process.env.SOME_VALUE_FROM_ENV}' },
      { innerHTML: `href="${process.env.SOME_VALUE_FROM_ENV}"` }
    ],
    innerHTML: `<nonstandard href="${process.env.SOME_VALUE_FROM_ENV}" />`,
    
    // works
    script: [
      {
        innerHTML: `
          (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer','xxxxxxxxxxx');
        `
      }
    ],

    // works
    noscript: [
      {
        innerHTML: `
          <iframe src="https://www.googletagmanager.com/ns.html?id=xxxxxxxxxxx"
          height="0" width="0" style="display:none;visibility:hidden"></iframe>
        `,
        pbody: true
      }
    ],
    __dangerouslyDisableSanitizers: ['script', 'noscript', 'nonstandard'],
  }
}

Original Q&A

There are 1 best solutions below

**Marcel Gruber** · Answer 1

As suggested by @DengSihan, I was able to populate the value via a custom app.html which I created as a sibling of my nuxt.config.js file.

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
    <nonstandard href="{{ ENV.SOME_VALUE_FROM_ENV }}">
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

And in my nuxt.config.js:

module.exports = {
  env: {
    SOME_VALUE_FROM_ENV: process.env.SOME_VALUE_FROM_ENV
  }
}

From this we can conclude that vue-meta is unable to populate the head with non-standard elements and that a custom app.html must be used instead.

Non standard element not appearing in <head>

There are 1 best solutions below

Related Questions in VUEJS2

Related Questions in NUXT.JS

Related Questions in VUE-META

Trending Questions

Popular # Hahtags

Popular Questions