Client

The client.ts file is the client-side entry point for your section. It handles hydration — taking the server-rendered HTML and making it interactive in the browser by attaching Vue's reactivity system and event listeners.

How It Works

When a page loads, the server-rendered HTML is displayed immediately. The client entry point then:

1. Initializes a Vue app instance with your section component

2. Mounts it onto the existing server-rendered DOM (hydration)

3. Handles live updates when merchants edit content/design in the Editor

4. Unmounts cleanly when the section is removed

Usage

// client.ts
import { createVueClientApp } from '@lightspeed/crane-api';
import Section from './Section.vue';
import type { Content, Design } from './type';

export default createVueClientApp<Content, Design>(Section);

The generic parameters <Content, Design> provide type safety for the state passed during mount and update cycles.

Extensions

createVueClientApp accepts an optional second argument for hooking into the app lifecycle:

createVueClientApp<Content, Design>(Section, {
  init(app) {
    // Called after the Vue app is created, before mounting.
    // Use this to register plugins, directives, or global components.
  },
  mount(app, rootContainer, state) {
    // Called just before the app mounts to the DOM.
    // Access the initial state (context, content, design data).
  },
  update(app, state) {
    // Called when content or design data changes (e.g., merchant edits in the Editor).
  },
  unmount(app) {
    // Called before the app is unmounted.
    // Clean up any resources not managed by Vue.
  },
});

All extension callbacks are optional.

For most sections, the basic usage without extensions is sufficient. Extensions are useful when you need to register Vue plugins, set up third-party libraries, or manage resources outside Vue's lifecycle.