I'm new to SSR. Can you tell me how to integrate Element Plus? #3000

inschrift-spruch-raum · 2025-12-27T14:19:57Z

inschrift-spruch-raum
Dec 27, 2025

I looked at the examples provided by Element Plus and found that they don't seem to fit with Vike at all. Some people mentioned code under the render section, but I haven't seen them.

Answered by inschrift-spruch-raum

Dec 29, 2025

Integration succeeded. Just need the following:

// https://vike.dev/onCreateApp 
// pages/+onCreateApp.ts
// Environment: server & client

export { onCreateApp }

import { ID_INJECTION_KEY, ZINDEX_INJECTION_KEY } from 'element-plus'
import type { PageContext } from 'vike/types'

function onCreateApp(pageContext: PageContext) {
  const app = pageContext.app
  if (!app) {
    throw new Error('[onCreateApp] pageContext.app is missing')
  }

  app
    .provide(ID_INJECTION_KEY, {
      prefix: 1024,
      current: 0,
    })
    .provide(ZINDEX_INJECTION_KEY, { current: 0 })
}

// https://vike.dev/bodyHtmlEnd 
// pages/+bodyHtmlBegin.ts
import type { PageContextServer } from 'vike/types'

expo…

View full answer

brillout · 2025-12-28T10:24:29Z

brillout
Dec 28, 2025
Maintainer

Can you elaborate what you've tried so far and why it didn't work?

0 replies

inschrift-spruch-raum · 2025-12-28T12:19:19Z

inschrift-spruch-raum
Dec 28, 2025
Author

The Element Plus SSR documentation mentions providing an ID in main.ts for hydration, but as we know, Vike doesn't have this.

I think I need to add relevant configurations in render or something like +client.ts.

However, I found that the former is optional (or has been removed in the latest version? I'm not sure), and I don't want to use it.

As for +client.ts, it seems I need to get the page first and then call createApp, but the API of the former doesn't match the information I've found (it seems to have changed), and I can't find the new API in Vike either.

So I'm stuck here.

1 reply

brillout Dec 28, 2025
Maintainer

Seems like +onCreateApp is exactly what you're looking for?

the API of the former doesn't match the information I've found (it seems to have changed)

What do you mean? The latest API is documented at vike.dev, right?

inschrift-spruch-raum · 2025-12-29T12:50:15Z

inschrift-spruch-raum
Dec 29, 2025
Author

Integration succeeded. Just need the following:

// https://vike.dev/onCreateApp 
// pages/+onCreateApp.ts
// Environment: server & client

export { onCreateApp }

import { ID_INJECTION_KEY, ZINDEX_INJECTION_KEY } from 'element-plus'
import type { PageContext } from 'vike/types'

function onCreateApp(pageContext: PageContext) {
  const app = pageContext.app
  if (!app) {
    throw new Error('[onCreateApp] pageContext.app is missing')
  }

  app
    .provide(ID_INJECTION_KEY, {
      prefix: 1024,
      current: 0,
    })
    .provide(ZINDEX_INJECTION_KEY, { current: 0 })
}

// https://vike.dev/bodyHtmlEnd 
// pages/+bodyHtmlBegin.ts
import type { PageContextServer } from 'vike/types'

export default (pageContext: PageContextServer) => {
  // Get the teleports object from the Vue SSR context
  const teleports = pageContext.ssrContext?.teleports || {}

  // Handle Vue's body teleport (if any)
  const bodyTeleport = teleports.body || ''

  // Collect all Element-Plus related teleport content
  // Element-Plus components (such as Dialog, Tooltip, Drawer, etc.) will teleport to #el-popper-container-xxx
  const elementPlusTeleports = Object.entries(teleports)
    .filter(([key]) => key.startsWith('#el-popper-container-'))
    .map(([key, value]) => `<div id="${key.slice(1)}">${value}</div>`)
    .join('')

  // Return the HTML of all teleport content, which will be inserted at the beginning of <body>, before <div id="app">
  return bodyTeleport + elementPlusTeleports
}

3 replies

brillout Dec 29, 2025
Maintainer

👍 Nice, up for publishing a little example? I can then create vike.dev/element-plus.

inschrift-spruch-raum Dec 30, 2025
Author

I will do that, but before that, I need to ensure that the code is stable and good. For example, now, regarding Teleport, I have the following questions:

How does Vike handle Teleport? Is  handled by Vike or by Element-Plus? Will my code cause double rendering?
Although the Vue documentation states not to bind Teleport to the body, Element-Plus code handles this situation. However, if I really do this, the following error will still occur:

[Vue warn]: Hydration node mismatch:
- rendered on server: <!--teleport start anchor-->  
- expected on client: p

Upon inspecting the page, I found that Teleport will replace the first element of the body (which is  here).

brillout Dec 31, 2025
Maintainer

Does +bodyHtmlBegin return the same value on client- and server-side?

Since you're new to SSR, the page https://vike.dev/hydration-mismatch could be helpful to you?

Uh oh!

I'm new to SSR. Can you tell me how to integrate Element Plus? #3000

Uh oh!

inschrift-spruch-raum Dec 27, 2025

Replies: 3 comments · 4 replies

Uh oh!

brillout Dec 28, 2025 Maintainer

Uh oh!

inschrift-spruch-raum Dec 28, 2025 Author

Uh oh!

brillout Dec 28, 2025 Maintainer

Uh oh!

Uh oh!

inschrift-spruch-raum Dec 29, 2025 Author

Uh oh!

brillout Dec 29, 2025 Maintainer

Uh oh!

Uh oh!

inschrift-spruch-raum Dec 30, 2025 Author

Uh oh!

brillout Dec 31, 2025 Maintainer

inschrift-spruch-raum
Dec 27, 2025

Replies: 3 comments 4 replies

brillout
Dec 28, 2025
Maintainer

inschrift-spruch-raum
Dec 28, 2025
Author

brillout Dec 28, 2025
Maintainer

inschrift-spruch-raum
Dec 29, 2025
Author

brillout Dec 29, 2025
Maintainer

inschrift-spruch-raum Dec 30, 2025
Author

brillout Dec 31, 2025
Maintainer