DOCSEARCHbyAlgolia
Submit Docs

Vike Documentation

website·Indexed 35 days ago

https://vike.dev/

Documentation for Vike, covering core concepts, routing, and SEO configuration including <head> tags.

Tokens
1.9K
Snippets
3
Records
23
Agent score
72%

What's inside Vike

  1. Fetch server-side data using the +data() hook

    The +data() hook allows for server-side data fetching (e.g., direct DB/ORM calls). The returned value is serialized and passed to the client as pageContext.data. In components, this data can be accessed using the useData() hook for type safety.

  2. Deploy Vike to various hosting providers

    Vike supports multiple deployment strategies:

    • Self-hosting: Use +server and renderPage() middleware with Node, Bun, or Deno.
    • Cloudflare: Use @cloudflare/vite-plugin for Workers or Pages.
    • Vercel: Use vite-plugin-vercel for SSR/SSG and ISR.
    • Netlify: Use @netlify/vite-plugin for SSR/static.
    • AWS: Deploy via Lambda using SST, Flightcontrol, or Serverless Framework.
    • Static: Use pre-rendering to generate dist/client/ for GitHub Pages or other static hosts.

  3. Implement Page and Layout components

    Vike uses a hierarchical component system:

    • +Page: The root component for a route, rendered via onRenderHtml() or onRenderClient().
    • +Layout: Wraps +Page. Layouts can be global, per-group, or nested. They are cumulative and persist across navigations that share the same layout (useful for tabs).
    • +Wrapper: The top-most wrapper for Page and all Layouts, typically used for state management or tool providers.

  4. Integrate Vike with a server framework

    Vike can be integrated with server frameworks like Hono, Express, Fastify, H3, or Elysia using the +server configuration. It provides a built-in dev server with HMR. The pageContext object provides access to the HTTP request (req) and response (res).

  5. Define routes using Filesystem, Strings, or Functions

    Vike supports three routing methods:

    1. Filesystem Routing: File paths map to URLs. Directories like src/, index/, pages/, renderer/, and (group) are ignored in the URL.
    2. Route Strings: Defined via +route patterns using @param for parameters and * for glob/catch-all matches.
    3. Route Functions: Programmatic routing via resolveRoute(). These are synchronous and run on every navigation.

  6. Control SSR, SSG, and SPA rendering

    Vike provides granular control over rendering strategies:

    • SSR: Enabled by default (+ssr: true). Set to false for client-only/SPA pages.
    • SSG (Prerendering): Enable via prerender: true. Use +prerender for detailed config (partial, redirects, etc.).
    • Streaming: Enable HTML streaming via +stream (true, 'web', or 'node'). Requires SSR to be enabled.

  7. Serialize pageContext data to the client

    Use +passToClient to specify which properties of pageContext or globalContext should be serialized and made available on the client. It supports dot-notation for nested properties. Note that @brillout/json-serializer is used, meaning class prototypes are lost during serialization.

  8. Configure HTML attributes for root elements

    You can define attributes for the <html>, <body>, and the root <div> (usually <div id="root">) using specific configuration exports. These attributes are cumulative.
    export const htmlAttributes = { lang: 'en', class: 'dark-mode' };
export const bodyAttributes = { class: 'theme-light' };
export const rootAttributes = { role: 'none' };

  9. Set up permanent 301 redirects

    The +redirects setting allows defining permanent 301 redirects. It supports route parameters (e.g., @id), glob wildcards, and external URLs. Note that these are server-only and do not trigger during client-side navigation.

  10. Vike Configuration and File Inheritance

    Vike uses + config files with a system of cross-directory inheritance. Settings can be cumulative or overridable. Special file suffixes and naming conventions include:

    • .clear.js: Resets settings.
    • .default.js: Provides fallback settings.
    • .server.js / .client.js: Environment markers to isolate code for server or client.
    • (name): Group directories that are ignored in the URL path.

  11. Configure path aliases in Vike

    To use path aliases, you must define them in three places to ensure consistency across the build tool, TypeScript, and the server: 1. resolve.alias in vite.config.js, 2. compilerOptions.paths in tsconfig.json, and 3. package.json#imports for custom servers. The #root/ convention is commonly used.

  12. Configure environment variables in Vike

    Environment variables are handled via .env[.mode][.local] files. Variables prefixed with PUBLIC_ENV__ are exposed to the client and accessible via import.meta.env. Note that static replacement is used, so destructuring import.meta.env may not work.