vike-solid

The vike-solid package is a Vike extension that integrates Solid in a full-fledged manner, providing a DX like a regular frontend framework such as Solid Start.

Source code: GitHub > vikejs/vike-solid
Version history: MIGRATION.md
Examples: Bati and examples/

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, or vike-solid. If you aren't then see the sections Without vike-{react,vue,solid} such as API > useData() > Without vike-{react,vue,solid}.

You can also integrate Solid yourself instead of using vike-solid, see Integration > Solid.

Scaffold new vike-solid app

Use Bati for creating new apps.

If you select Solid then Bati scaffolds a Vike + 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] 
}

You 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]
}

Under the hood

The vike-solid extension is only 542 lines of code (as of Mai 2024). Browsing the source code of vike-solid is therefore very much an option for deepening your understanding of Vike or for debugging.

Basically vike-solid does this:

It implements following features:

For a friendlier list, see the following (which also includes vike-solid settings & hooks):

See also