CFML-first
Use <cf_Island> and <cf_Slot> like any other custom tags. Pass CFML structs as props and CFML markup as slots.
diff --git a/guides/getting-started/index.html b/guides/getting-started/index.html index e3a6a02..184dc92 100644 --- a/guides/getting-started/index.html +++ b/guides/getting-started/index.html @@ -104,15 +104,17 @@
Managing Node yourself? If you’d rather run Vite/SSR under systemd, docker-compose, or your platform’s process supervisor, set COLDSPA_NO_BOOTSTRAP=1 in the CF process env. Bootstrap.onApplicationStart will still cache config but skip the spawn. Coldspa also auto-detects this when npm isn’t on PATH (the typical CF-in-Docker case) — see Docker & cross-host setups.
Coldspa uses Vite for asset bundling and a small Node sidecar for server-side rendering.
-npm install coldspa vite vue # Vue# ornpm install coldspa vite react react-dom @vitejs/plugin-react # ReactColdspa lists every framework package as an optional peer dependency, so you only install what you actually use.
+npm install coldspa vite vue @vitejs/plugin-vue # Vue# ornpm install coldspa vite react react-dom @vitejs/plugin-react # ReactColdspa lists every runtime framework package as an optional peer dependency, so you only install what you actually use. Install the matching Vite framework plugin in your app because your Vite config owns that setup.
import { defineConfig } from 'vite';import coldspa from 'coldspa/vite';
-export default defineConfig({ plugins: [ coldspa({ frameworks: ['vue'], // or ['vue', 'react'] globs: { vue: '/src/**/*.vue', react: '/src/**/*.{jsx,tsx}' } }) ]});The plugin handles framework sub-plugins, client-entry shims, manifest output, and dev-server host binding for you.
+import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import coldspa from 'coldspa/vite';
+export default defineConfig({ plugins: [ vue(), coldspa({ frameworks: ['vue'], globs: { vue: '/src/**/*.vue' } }) ]});For React, import react from @vitejs/plugin-react, add react() to plugins, and set frameworks: ['react']. For mixed Vue + React configs, include both framework plugins before coldspa(...).
The Coldspa plugin handles client-entry shims, manifest output, and dev-server host binding for you.
package.json scripts{ "scripts": { "dev": "vite", "ssr": "node node_modules/coldspa/coldspa/vite/ssr-server.js", "build": "vite build && cross-env COLDSPA_SSR=1 vite build", "ssr:prod": "cross-env NODE_ENV=production node node_modules/coldspa/coldspa/vite/ssr-server.js" }}The ssr script can also be invoked via the coldspa-ssr bin shipped in the npm package.
{ "scripts": { "dev": "vite", "ssr": "coldspa-ssr", "build": "vite build && cross-env COLDSPA_SSR=1 vite build", "ssr:prod": "coldspa-ssr --prod" }}coldspa-ssr is the SSR sidecar binary shipped in the npm package. Keeping it behind an ssr script lets coldspa.Bootstrap start the sidecar automatically with npm run ssr.
If Vite’s dependency optimizer cache needs to be rebuilt during development, run the sidecar with coldspa-ssr --force or npm run ssr -- --force.
For local single-host dev, the defaults are fine. Otherwise create a coldspa.config.json at the webroot:
{ "isDev": true, "ssrUrl": "http://127.0.0.1:5174", "viteUrl": "http://localhost:5173"}Mount Vue or React components into CFML pages with server-side rendering and progressive hydration. Coldspa brings the islands architecture popularized by Astro to ColdFusion, so you can keep rendering pages with CFML while sprinkling in interactive widgets that hydrate on demand.
CFML-first
Use <cf_Island> and <cf_Slot> like any other custom tags. Pass CFML structs as props and CFML markup as slots.
Real SSR
A Node sidecar pre-renders Vue and React to HTML so the page is meaningful before JS loads — no flash of empty containers.
Progressive hydration
Choose load, idle, visible, or client per island. Below-the-fold widgets stay dormant until the user scrolls.
Vite-powered
HMR in dev, hashed bundles + manifest in prod. One Vite plugin (coldspa/vite) wires up component globs, client entries, and the SSR build.
Vue & React
Both frameworks supported out of the box, and you can mix them on the same page.
Slots, the CFML way
Default and named slots come from CFML markup — including <cfoutput> queries, <cfinclude>, and conditionals.