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/_default.page.server.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 { render }

async function render(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/_default.page.client.js
// Environment: browser

export { render }

import { hydrateDom } from 'some-ui-framework'

async function render(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/_default.page.client.js
// Environment: browser

export { render }

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 render(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

From the perspective of a server, Vike is just a middleware:

// renderPage() doesn't depend on Node.js and can be used within any JavaScript environment:
// Node.js, AWS, Cloudflare, Vercel, Deno, Bun, Lagon, ...
import { renderPage } from 'vike/server'

// Any server: Express.js, Fastify, Hono, Cloudflare Worker, AWS Lambda Function, ...
server.addMiddleware({
  method: 'GET',
  route: '*', // catch-all
  async handler(request) {
    const pageContextInit = { urlOriginal: request.url }
    const pageContext = await renderPage(pageContextInit)
    const { body, statusCode, headers } = pageContext.httpResponse
    const response = { body, statusCode, headers }
    return response
  }
})

It's versatile and can be embedded into any server.

Alternatively, you can pre-render your pages to remove the need for a production server and deploy to a static host instead.

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.