vike-ripple
v0.5.6
Published
Vike extension for Ripple TS — SSR, streaming, Layout, Head, SEO configs, hooks
Readme
vike-ripple
⚠️ HIGHLY EXPERIMENTAL
Core Vike + Ripple TS integration. See the monorepo root for all packages.
Before using this package, read the quirks & caveats — it documents every bug and fix.
Setup
1. Run setup
npx vike-ripple setup2. Configure vite.config.ts
import { defineConfig } from 'vite'
import vike from 'vike/plugin'
import { ripple } from '@ripple-ts/vite-plugin'
import vikeRipple from 'vike-ripple'
export default defineConfig({
optimizeDeps: { exclude: ['ripple'] },
plugins: [vike(), vikeRipple(), ripple({ excludeRippleExternalModules: true })],
})(Plugin order matters — vike() must come first.)
3. Add renderer config
Create renderer/+config.ts:
export default {
extends: ['import:vike-ripple/config:default'],
}Features
| Feature | Status |
|---|---|
| .tsrx page files | ✅ |
| SSR rendering | ✅ |
| Client hydration | ✅ |
| Streaming SSR | ✅ |
| <head> tag extraction | ✅ |
| +Layout.tsrx / +Head.tsrx | ✅ |
| Tailwind CSS v4 (via vike-ripple-tailwindcss) | ✅ |
| Panda CSS (via vike-ripple-pandacss) | ✅ |
Related
vike-ripple-tailwindcss— Tailwind@applyin<style>blocksvike-ripple-pandacss— Panda CSS extraction +@applycreate-vike-ripple— Project scaffolddocs/quirks.md— Known issues and fixes
