DOCSEARCHbyAlgolia
Submit Docs

Vike Documentation

repository·main·Indexed 26 days ago

https://github.com/vikejs/vike

A flexible framework for building multi-page applications (MPA) with server-side rendering (SSR) capabilities. Vike acts as a middleware compatible with various JavaScript server environments (Node.js, Bun, Deno, etc.) and server frameworks (Express, Hono, Fastify). It supports multiple UI frameworks via dedicated ecosystems for React, Vue, and Solid, and offers options for both server and client routing, as well as static website deployment through pre-rendering.

Tokens
147.9K
Snippets
431
Records
743
Agent score
87%

What's inside Vike

  1. Overview of vike-solid features

    main

    The vike-solid extension provides a high-level developer experience for Solid.js integration by automating several Vike internals:

    • Automated Hooks & Settings: It sets up Vike hooks like onRenderHtml() and onRenderClient(), and introduces new settings like ssr, stream, and <Layout>.
    • Solid Component Hooks: It implements specialized Solid hooks for interacting with Vike, such as useData() and usePageContext().
    • Metadata & Attributes: It provides built-in support for managing <Head> content, including title, description, image, favicon, viewport, lang, htmlAttributes, and bodyAttributes.

  2. Overview of Vike Extensions

    main
    Vike extensions are optional tools that integrate specific technologies (frameworks, data fetching, state management, etc.) into your Vike application on your behalf. While you can integrate these tools manually using the standard Vike API, using extensions is recommended for a more streamlined setup. Extensions are available for various frontend frameworks and server environments.

  3. Overview of vike-vue features and hooks

    main

    The vike-vue extension automates much of the Vike integration by setting up standard Vike hooks and settings. It implements several Vue-specific features and settings, including:

    • Data & Context: useData(), usePageContext()
    • Layout & Rendering: <Layout>, ssr, stream, onCreateApp()
    • Client/Server Lifecycle: onBeforeRenderHtml, onAfterRenderHtml, onBeforeRenderClient, onAfterRenderClient
    • Meta/Head Management: Head, title, description, image, favicon, viewport, lang, htmlAttributes, bodyAttributes, headHtmlBegin, headHtmlEnd, bodyHtmlBegin, bodyHtmlEnd

    For a complete list of all settings and hooks provided by the extension, refer to the official Vike settings and hooks documentation.

  4. Overview of Vike

    main
    Vike is a framework for building multi-page applications (MPA) with server-side rendering (SSR) capabilities. It provides a flexible way to build web applications with various frontend frameworks (like React, Vue, or Svelte) and integrates with various backend runtimes.

  5. Explore community integrations and tools for Vike

    main

    Vike is designed to be flexible and can be used with almost any tool. The following categories list community-driven guides and examples for integrating various technologies with Vike.

    Note: These resources are community-driven and may be outdated. Use them as references for potential integration patterns.

  6. Understand Server(-side) Routing in Vike

    main

    Server(-side) Routing is a routing pattern where navigating to a new page causes the current page to be completely discarded and the new page's HTML to be loaded from the server.

    Pros:

    • Leads to a simpler application architecture.

    Cons:

    • Some use cases (like persistent client-side state across navigations) are not implementable.
    • Less fluid than Client Routing.

  7. Understand Vike licensing and seat limits

    main

    Vike uses an "Open Source Pricing" model where the Git repository remains 100% MIT-licensed, but the vike npm package adopts a proprietary license for larger organizations.

    • Small teams: Use Vike 100% free without a license key.
    • Large teams: Required to use a license key to remove development warnings.
    • Seat limits: A single license is valid for teams of up to 50 engineers.
    • Scaling: If you have more than 50 engineers, you should purchase multiple licenses (one per team). Each team can create an unlimited number of Vike apps.
    • Sponsors: Companies sponsoring Vike can receive a free license key.

  8. Understand the `pageContext` object

    main

    The pageContext object provides contextual information about the current page. It is unique to each page visit; when a user navigates to a new page, a completely new pageContext is created and the previous one becomes obsolete.

    pageContext can be accessed in several places:

    • In any UI component via the usePageContext() hook.
    • In any Vike hook (e.g., +data).
    • On the server.
    • On the client (provided you use passToClient to make it available).

  9. Compare Vike and Next.js

    main

    Vike is a hosting-agnostic, UI-framework-agnostic, and minimal framework that provides full control over SSR and routing. Unlike Next.js, which is tightly coupled to React and optimized for Vercel, Vike is built on Vite, offering faster HMR and the ability to use any UI framework (React, Preact, Solid, etc.).

    Key differences include:

    • Bundler: Vike uses Vite (esbuild+ESM in dev, Rollup in prod), whereas Next.js uses Webpack.
    • SSR Control: Vike offers full control and allows creating multiple renderers; Next.js is more of a 'black box'.
    • Routing: Vike supports Domain-driven Filesystem Routing, Client Routing, and Server Routing. It also has better support for Base URLs.
    • Deployment: Vike is hosting-agnostic and works with minimal configuration on Vercel, Cloudflare Workers, or Node servers (Docker, Heroku, etc.). Next.js is optimized for Vercel.
    • Extensibility: Integrating third-party libraries is easier in Vike because it doesn't impose framework-specific abstractions. You can use standard tools for Head components, Image optimization, and API routes.

  11. Use Photon for multi-server and multi-deployment support

    main

    Photon allows you to integrate your application with various JavaScript servers and deployment platforms:

    Supported Servers:

    • Hono
    • Express.js
    • Fastify
    • Elysia
    • H3
    • Srvx
    • Hattip

    Supported Deployments:

    • Cloudflare
    • Vercel
    • Self-hosted
    • And more

    Key Features:

    • HMR: Hot Module Replacement without requiring a full server reload.
    • Vite Environment API: Develop against production runtimes (e.g., Cloudflare's workerd).
    • Code-splitting: Per-route deployment to separate edge workers.
    • Zero-config: Minimal configuration required to integrate your server and deployment.
    • Built-in server: Includes a built-in server for zero-config use, though you can use your own.

  12. Understand Client-side Routing in Vike

    main

    Client-side routing in Vike allows for page navigation without a full browser reload. Instead of requesting a new HTML document from the server for every navigation, the client-side router intercepts the navigation and renders the new page by manipulating the current page's DOM.

    Key benefits of using Client Routing include:

    • Faster page navigation: Reduces latency by avoiding full document fetches.
    • State preservation: Client-side state (like component state or global stores) can be maintained across navigations.
    • Nested Layouts: Enables complex UI structures where only specific parts of the page change.
    • Custom transitions: Allows for implementing smooth page transition animations.