`bodyHtmlEnd`

Environment: server.

Implemented by: vike-vue/vike-react.

You need vike-vue/vike-react to be able to use bodyHtmlEnd.

The settings bodyHtmlEnd/bodyHtmlBegin enable you to insert HTML at the beginning/end of the <body> tag.

Inserting static HTML:

// pages/+config.js
 
export default {
  bodyHtmlEnd: '<div id="something"></div>'
}

For adding <script> tags consider <Head> or +client.js instead.

Inserting dynamically generated HTML:

// pages/+bodyHtmlEnd.js
 
export default (pageContext) => {
  const { something } = pageContext
  return `<div>${something}</div>`
}

⚠️
Be cautious about the security risk called XSS injections.

Use cases

React

When using React, it's often used for portals.

// pages/+config.js
 
export default {
  bodyHtmlEnd: '<div id="portal-root"></div>'
}

You'll then get the following HTML:

<body>
  <!-- ... -->
  <div id="root">{reactHtml}</div>
  <div id="portal-root"></div>
</body>

Vue

When using Vue, it's often used for adding the HTML targets of teleports.

Teleports work out of the box when using <Teleport to="teleported"> and you don't have to use bodyHtml{Begin,End} then.

vike-vue always inserts this at the end of the <body> tag:
<div id="teleported">${
  pageContext.ssrContext.teleports?.['#teleported'] ?? ''
}</div>

You can use Vike's pageContext object to access Vue's ssrContext object:

// pages/+bodyHtmlEnd.js
 
export default (pageContext) => {
  const content = pageContext.ssrContext.teleports?.['#someTeleport'] ?? ''
  return `<div id="someTeleport">${content}</div>`
}

Global

This setting is global: its value always applies to all your pages. In other words, it doesn't support config inheritance.

You cannot set it at pages/some-page/+config.js: you have to set it at pages/+config.js (or some other global location) instead.

If you want to set different values for different pages, then consider creating a custom setting as shown at Guides > <head> tags > Custom settings.

bodyHtmlEnd

Use cases

React

Vue

Global

See also

`bodyHtmlEnd`