Mount Vue or React components into CFML pages with server-side rendering and progressive hydration.

Install

CFML side (via CommandBox / ForgeBox):

box install coldspa

Node side (Vite plugin + SSR sidecar):

npm install coldspa vite vue   # or: react react-dom

Setup

Register the module's directory as a custom tag path so <cf_Island> and <cf_Slot> resolve from anywhere in your app, and delegate to coldspa.Bootstrap from your lifecycle methods so Coldspa can boot the Vite + SSR sidecar processes:

// Application.cfc
component {
    this.name = "MyApp";
    this.customTagPaths = expandPath("/modules/coldspa");

    function onApplicationStart() {
        new coldspa.Bootstrap().onApplicationStart();
        return true;
    }

    function onApplicationStop() {
        new coldspa.Bootstrap().onApplicationStop();
    }

    function onRequestStart(targetPage) {
        new coldspa.Bootstrap().onRequestStart();
        return true;
    }
}

ColdBox users can skip this — the bundled ModuleConfig.cfc registers the custom tag path and wires the bootstrap lifecycle automatically.

Configure Vite

// vite.config.js
import { defineConfig } from 'vite';
import coldspa from 'coldspa/vite';

export default defineConfig({
    plugins: [
        coldspa({
            frameworks: ['vue'],            // or ['vue', 'react']
            globs: { vue: '/src/**/*.vue' } // where your components live
        })
    ]
});

Use it from CFML

<cfinclude template="/coldspa/renderers/Vue.cfm">

<cf_Island
    framework="#Vue#"
    path="./src/App.vue"
    props="#{ hello: 'World' }#"
    strategy="visible">

    <p>Default-slot content rendered by CFML.</p>

    <cf_Slot name="header">
        <h2>Header from CFML</h2>
    </cf_Slot>
</cf_Island>

That's it — start your CF server and load the page. coldspa.Bootstrap auto-spawns the Vite dev server and Node SSR sidecar in the background and tears them down on app stop. For Docker, supervised deployments, or opting out, see Getting started.

Documentation

• Getting started — full setup walkthrough
• Hydration strategies — load, idle, visible, client
• Slots — default + named slots, cf_Slot, gotchas
• Configuration — coldspa.config.json, env vars
• Docker & cross-host setups — running CF and Vite on different hosts