⚠
vite-plugin-ssr has been renamed Vike, see migration guide.

+config.h.js

+config.h.js files are part of the V1 design.

For the exhaustive list of configurations, see Config instead.

+config.h.js files

The +config.h.js files define the interface between your app and vite-plugin-ssr.

// /pages/about/+config.h.js

// Define a new page with URL /about
import { Page } from './Page'
export default { Page }
// /pages/about/Page.jsx

export default () => <>Vite-plugin-ssr Demo</>

The URL /about is determined by Filesystem Routing.

// /pages/product/+config.h.ts

import Page from './Page'
import type { Config } from 'vite-plugin-ssr/types'

// Define a new page with URL '/product/@id'
export default {
   Page,
   // Parameterized route for URLs such as /product/1337 and /product/macbook
   route: '/product/@id'
} satisfies Config
// /pages/product/Page.jsx

export default pageContext => <>Information about product {pageContext.routeParams.id}</>

.h.js

Vite-plugin-ssr transforms .h.js files, such as this:

// /pages/some-page/+config.h.js

import Page from './some-file'
import onBeforeRender from './some-other-file'

export default {
  Page,
  onBeforeRender
}

Into:

// /pages/some-page/+config.h.js

const Page = 'import:./some-file';
const onBeforeRender = 'import:./some-other-file';

export default {
  Page,
  onBeforeRender
}

.h.js files are only meant for config files (i.e. any .h.js file should be a +config.h.js file).

See also:

Other + files

For convenience, instead of defining +config.h.js, you can define +Page.js and +route.js.

// /pages/product/+route.js

export default '/product/@id'
// /pages/product/+Page.jsx

export default pageContext => <>Information about product {pageContext.routeParams.id}</>

Which is equivalent to:

// /pages/product/+config.h.js

import Page from './Page.jsx'

export default {
   Page,
   route: '/product/@id'
}
// /pages/product/Page.jsx

export default pageContext => <>Information about product {pageContext.routeParams.id}</>

Overridable defaults

You can use +config.h.js to define default values for all (or only a group of) pages.

// /pages/+config.h.js

// Defaults for all pages
export default {
  // Default <title> value
  title: 'My vite-plugin-ssr app'
}

config.title is a custom config, see meta.

The +config.h.js file of pages (/pages/some-page/+config.h.js) can override default values defined by /pages/+config.h.js.

// /pages/about/+config.h.js

export default {
  // We override the <title> value
  title: 'About this app'
}

You can also define default values only for a group of pages. As shown, for example, at Guides > File Structure > Domain Driven. You can even use different renderers: some pages can use Vue as SPA, while other pages can use React with SSR.

renderer/

/renderer/+config.h.js is equivalent to /pages/+config.h.js: the renderer/ directory is just an (optional) convenience for having renderer files live outside of pages/ (instead of cluttering the pages/ directory).

The renderer/ directory is usually used by users who don't use any built-in renderer.

Build-time

All +config.h.js files are loaded at build-time:

// /pages/some-page/+config.h.js

import Page from './Page.js'

// This log will only be shown:
//  - At development
//  - When building your app
console.log("I will never be shown in production")

export default {
  // However, the code of ./Page.js is included in production runtimes
  Page
}

The server and client runtimes don't include the code of +config.h.js files but do include the imported code. To understand why see Header file (.h.js).