SolidJS integration for Vike, see vike.dev/solid.
UI framework Vike extensions like vike-solid:
- implement Vike Core hooks (e.g.
onRenderHtml()) on your behalf, - set Vike Core settings on your behalf,
- introduce new hooks for you to implement if needed,
- introduce new settings for you to set if needed,
- introduce new components and component hooks.
Use Bati to scaffold a Vike app using vike-solid.
To add vike-solid to an existing Vike app:
- Install the
vike-solidnpm package in your project:
npm install vike-solid- Edit your Vite config:
// vite.config.ts
import vikeSolid from "vike-solid/vite";
import vike from "vike/plugin";
import type { UserConfig } from "vite";
export default {
plugins: [
vike(),
// Add vikeSolid() after vike()
vikeSolid()
]
} satisfies UserConfig- Extend your existing Vike config files with
vike-solid:
// /pages/+config.js
+import vikeSolid from 'vike-solid/config'
+
export default {
// Existing Vike Core settings
// ...
+
+ // New setting introduced by vike-solid:
+ title: 'My Vike + Solid App',
+
+ extends: vikeSolid
}vike-solid implements the onRenderHtml() and
onRenderClient() hooks on your behalf, which are essentially the glue code between
Vike and Solid.
vike-solid sets the following Vike Core settings on your behalf:
clientRouting=true: Enable Client Routing.hydrationCanBeAborted=true: Solid allows the hydration to be aborted.
vike-solid introduces the following new settings:
Head: Component Component to be rendered inside the<head>tag.title: string<title>...</title>tag.favicon: string<link rel="icon" href="..." />attribute.lang: string<html lang="...">attribute.ssr: boolean Enable/disable Server-Side Rendering (SSR).stream: boolean Enable/disable HTML streaming.Layout: Component Wrapper for your Page component.
vike-solid introduces the following new component hooks:
useData(): Access the data that is returned by adata()hook from any component.usePageContext(): Access thepageContextobject from any component.
vike-solid introduces the following new components:
ClientOnly: Wrapper to render and load a component only on the client-side.