`<Page>`

Environment: client, and server if ssr: true.

The Page setting determines the root component of the page.

With JSX (React/Solid):

// /pages/index/+Page.jsx
 
export { Page }
/* Or:
export default Page
*/
 
function Page() {
  return <>
    <h1>Hi</h1>
    <p>Hello World</p>
  </>
}

With Vue:

<!-- /pages/index/+Page.vue -->
 
<template>
  <h1>Hi</h1>
  <p>Hello World</p>
</template>

What happens with the Page value is determined by the UI framework Vike extension vike-react/vike-vue/vike-solid.

Instead of using vike-react/vike-vue/vike-solid, you can also manually integrate the UI framework yourself, see Without vike-{react,vue,solid}.

Without `vike-{react,vue,solid}`

Vike itself never uses the Page value: it just makes the value available at pageContext.Page. The pageContext.Page value is typically used by the onRenderHtml() and onRenderClient() hooks: these two hooks essentially determine how the Page value is rendered to HTML and the DOM.

The UI framework Vike extension vike-react/vike-vue/vike-solid implements the onRenderHtml() and onRenderClient() hooks, so that you don't have to implement them: everything just works like a regular frontend framework such as Next.js or Nuxt.

Instead of using vike-react/vike-vue/vike-solid, you can integrate your favorite UI framework yourself: you then have complete control over the UI framework integration.

Here is a minimal example of manually integrating a UI framework:

// /pages/hello/+Page.js
// Environment: browser and server (configurable)
 
export { Page }
 
function Page() {
  // Here we export a JSX component, but we can export anything we want since Vike doesn't
  // do anything with `Page`: it just makes it available at `pageContext.Page`.
  return <>Hello World</>
}

You can configure in which environment the Page value is loaded by using meta.

// /renderer/+onRenderHtml.js
// Environment: server
 
export { onRenderHtml }
 
import { escapeInject, dangerouslySkipEscape } from 'vike/server'
import { renderToHtml } from 'my-favorite-ui-framework/server'
 
async function onRenderHtml(pageContext) {
  // The Page value is available at pageContext.Page
  const { Page } = pageContext
  const pageHtml = await renderToHtml(Page)
 
  return escapeInject`<html>
    <body>
      <div id="root">
        ${dangerouslySkipEscape(pageHtml)}
      </div>
    </body>
  </html>`
}

// /renderer/+onRenderClient.js
// Environment: browser
 
export { onRenderClient }
 
import { hydrateDom } from 'my-favorite-ui-framework/client'
 
async function onRenderClient(pageContext) {
  // pageContext.Page is also available in the browser
  const { Page } = pageContext
  await hydrateDom(Page, document.getElementById('root'))
}

<Page>

Without vike-{react,vue,solid}

See also

`<Page>`

Without `vike-{react,vue,solid}`