vike-solid
Version history: CHANGELOG.md
Examples: vike.dev/new and examples/
Source code: GitHub > vikejs/vike-solid
The Vike extension vike-solid integrates Solid in a full-fledged manner, providing a DX like a regular frontend framework such as Solid Start.
The documentation for using vike-solid can be found throughout this website (vike.dev).
The guides, such as Guides > Data Fetching, assume you're using Vike with
vike-react,vike-vue, orvike-solid. If you aren't then see the sectionsWithout vike-{react,vue,solid}such as API >useData()> Withoutvike-{react,vue,solid}.
You can integrate Solid yourself instead of using
vike-solid, see Solid > Custom integration.
Scaffold new vike-solid app
Use vike.dev/new for creating a new vike-solid app.
Add vike-solid to existing Vike app
To add vike-solid to an existing Vike app: install the vike-solid npm package (e.g. $ npm install vike-solid) then extend your existing +config.js file (or create one) with vike-solid:
// /pages/+config.js
 
import vikeSolid from 'vike-solid/config'
 
export default {
  // ...
  extends: [vikeSolid] 
}// /pages/+config.ts
 
import type { Config } from 'vike/types'
import vikeSolid from 'vike-solid/config'
 
export default {
  // ...
  extends: [vikeSolid]
} satisfies ConfigYou can then use new settings introduced by vike-solid:
// /pages/+config.js
 
import vikeSolid from 'vike-solid/config'
 
export default {
  // ...
 
  // Setting to toggle SSR
  ssr: false, 
 
  extends: [vikeSolid]
}// /pages/+config.ts
 
import type { Config } from 'vike/types'
import vikeSolid from 'vike-solid/config'
 
export default {
  // ...
 
  // Setting to toggle SSR
  ssr: false,
 
  extends: [vikeSolid]
} satisfies ConfigSee also:
Under the hood
The vike-solid extension is only around 1k lines of code.
It's simple, readable, and highly polished.
Reading the source code of vike-solid is very much an option for understanding, debugging, and/or contributing.
Contributions are welcome!
What vike-solid does is essentially this:
- Sets Vike hooks and Vike settings on your behalf.
Most notably: 
- Creates new Vike settings and new Vike hooks. (By using API > +meta.)
- Implements Solid component hooks.
For example useData()andusePageContext().
It implements the following:
- 
useData()
- 
usePageContext()
- 
+Layout
- 
+ssr
- 
+stream
- 
clientOnly()
- 
+onAfterRenderClient()hook
- 
+Head
- 
+title
- 
+description
- 
+image
- 
favicon
- 
+viewport
- 
lang
- 
+htmlAttributes
- 
+bodyAttributes
For a better overview, see the following lists instead. (They also include all settings and hooks created by
vike-solid.)