`bodyHtmlEnd`

Environment: server

Global

Cumulative

Provided 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>'
}

// pages/+config.ts
 
import type { Config } from 'vike/types'
 
export default {
  bodyHtmlEnd: '<div id="something"></div>'
} satisfies Config

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>`
}

// pages/+bodyHtmlEnd.ts
 
import type { PageContextServer } from 'vike/types'
 
export default (pageContext: PageContextServer) => {
  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>'
}

// pages/+config.ts
 
import type { Config } from 'vike/types'
 
export default {
  bodyHtmlEnd: '<div id="portal-root"></div>'
} satisfies Config

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>`
}

// pages/+bodyHtmlEnd.ts
 
import type { PageContextServer } from 'vike/types'
 
export default (pageContext: PageContextServer) => {
  const content = pageContext.ssrContext.teleports?.['#someTeleport'] ?? ''
  return `<div id="someTeleport">${content}</div>`
}

bodyHtmlEnd

Use cases

React

Vue

See also

`bodyHtmlEnd`