Other Integrations

If the tool you want to use isn't in the list of integration guides, you'll still most likely be able to use it.

Vike is versatile:

In principle, you should be able to use Vike with any tool you want.

If you struggle integrating a tool, don't hesitate to create a new GitHub Discussion.

UI tools

// /renderer/+onRenderHtml.js
// Environment: server
 
import { escapeInject, dangerouslySkipEscape } from 'vike/server'
// This can be any UI framework (React, Vue, Solid, Svelte, ...)
import renderToHtml from 'some-ui-framework'
 
export { onRenderHtml }
 
async function onRenderHtml(pageContext) {
  // `Page` is the `export { Page }` of our +Page.js files;
  // Vike doesn't do anything with `Page` and just makes it available as
  // `pageContext.Page`; we can export any `Page` value we want and do whatever we want with it.
  const { Page } = pageContext
 
  // We control how we use our UI framework to render our pages to HTML
  const pageHtml = await renderToHtml(Page)
 
  // We control the entire HTML
  return escapeInject`<html>
    <body>
      <head>
        <!-- Some libraries recommend loading code from a CDN -->
        <script src="https://cdn.example.com/some-library/3.3.7/lib.min.js"></script>
      </head>
      <div id="root">
        ${dangerouslySkipEscape(pageHtml)}
      </div>
    </body>
  </html>`
}
// /renderer/+onRenderClient.js
// Environment: browser
 
export { onRenderClient }
 
import { hydrateDom } from 'some-ui-framework'
 
async function onRenderClient(pageContext) {
  const { Page } = pageContext
  // We control how our pages are hydrated
  await hydrateDom(Page)
}

Since you control how your pages are rendered, you can use:

  • Any UI framework (React 16, React 17, Vue 2, Vue 3, petite-vue, Svelte, Solid, Preact, ...)
  • Any UI library (Vuex, Redux, Pinia, Relay, Apollo GraphQL, Recoil, ...)

Integrating a UI tool is usually only a matter of following its official installation guide.

Client-side tools

// /renderer/+onRenderClient.js
// Environment: browser
 
export { onRenderClient }
 
import { hydrateDom } from 'some-ui-framework'
 
// This is a good place to initialize error tracking such as Sentry or Bugsnag.
Sentry.init()
// And also for initializing a Service Worker.
navigator.serviceWorker.register(/* ... */)
 
async function onRenderClient(pageContext) {
  // Here we can integrate performance measurement tools, e.g. to measure hydration performance
  const { Page } = pageContext
  await hydrateDom(Page)
  init()
}
 
function init() {
  // After hydration we usually initialize vanilla JS component libraries, for example tooltips
  tooltip.init(document.querySelectorAll('.tooltip'))
  // Or some vanilla JS modal library
  $('.my-modals').modal()
}

You can use:

  • Any CSS framework (Tailwind CSS, Bulma, Bootstrap, Material Design, ...)
  • Any client-side library (Vanilla JS component libraries, Bugsnag, Sentry, jQuery, Google Analytics, ...)
  • Any browser technology (Service Workers, PWA, ...)

Integrating a client-side tool is usually only a matter of following its official installation guide.

Server-side tools

サーバーから見れば、Vikeは単なるミドルウェアです：

// renderPage()はNode.jsに依存せず、どのJavaScript環境でも使用できます：
// Node.js, AWS, Cloudflare, Vercel, Deno, Bun, Lagon, ...
import { renderPage } from 'vike/server'
 
// 任意のサーバー: Express.js, Cloudflare Worker, AWS Lambda Function, Fastify, Hono, Nitro, ...
server.addMiddleware({
  method: 'GET',
  route: '*', // catch-all
  async handler(request) {
    const pageContextInit = { urlOriginal: request.url }
    const pageContext = await renderPage(pageContextInit)
    if (!pageContext.httpResponse) return null
    // `body` is the HTML of the page with a route matching pageContextInit.urlOriginal
    const { body, statusCode, headers } = pageContext.httpResponse
    const response = { body, statusCode, headers }
    return response
  }
})

任意のサーバに renderPage() を埋め込むことができます。

あるいは、renderPage()を使用する代わりに、pre-render あなたのページを作成し、本番サーバーの必要性をなくすことができます（そして、代わりにstatic host にデプロイします）。

You can use:

  • Any server framework (Express, Fastify, Hono, Nitro, HatTip, Koa, Hapi, ...)
  • Any authentication strategy/tool (email/password, OAuth, Auth.js, Passport.js, Grant, Keycloak, Auth0, ...).
  • Any serverless/edge environment (Cloudflare Workers, Vercel, Firebase, AWS Lambda, Google Cloud Functions, Deno Deploy, ...)
  • Any virtual private server (AWS EC2, Google Cloud, ...)
  • Any static host (Cloudflare Pages, GitHub Pages, Netlify, ...)

See also:

Examples

Official examples: GitHub > vikejs/vike > examples/.

Beyond the official examples, many tools have community examples of being used with Vike – search this website (CTRL+K) for the tool you want an example of.

If an example is missing/outdated, contribution welcome to create/improve one.