Frontend Overview
An overview of LAIKA's Vue components, runtime APIs and application integration.
LAIKA connects a Vue and Vite frontend with OctoberCMS pages, layouts, components and server-side features. This section documents the public client-side APIs available to theme code.
If you are building your first LAIKA theme, start with the Backend Getting Started guide. Use this section when you need the exact behaviour, properties or methods of a particular API.
API Conventions
LAIKA provides three ways to access its client-side features:
| API style | Intended use |
|---|---|
| Vue components | Declarative rendering and navigation inside Vue templates. |
$-prefixed globals | Direct access inside Vue templates. |
| Composables and helpers | Reactive access inside <script setup> and Composition API code. |
For example, the current page is available as $page in a template and through usePage() in Composition API code.
<template>
<h1>{{ $page.title }}</h1>
</template>
<script lang="ts" setup>
import { usePage } from '@ratmd/laika';
const page = usePage();
console.log(page.value?.title);
</script>Template globals are installed by the LAIKA Vue plugin. Composables must be called after that plugin has been installed.
Application Integration
The Frontend Getting Started page documents the APIs used to initialize and build a LAIKA application:
createLaikaApp()creates the client application from the server payload.laikaPlugininstalls the Vue runtime services and template globals.@ratmd/laika/viteremoves LAIKA-specific SFC blocks and extracts translation keys.
Native Components
LAIKA exports the following Vue components.
| Component | Description |
|---|---|
<Flash /> | Renders OctoberCMS flash messages. |
<Head /> | Adds reactive elements to the document head. |
<Link /> | Creates links with LAIKA-aware navigation. |
<OctoberFilter /> | Renders text processed by an OctoberCMS Markdown filter. |
<PageComponent /> | Renders a registered OctoberCMS component. |
<PageContent /> | Renders the server-generated content of the current page. |
<ProgressBar /> | Displays LAIKA navigation progress. |
<ServerPartial /> | Loads and renders an OctoberCMS partial. |
Runtime API
Runtime globals and composables remain reactive while LAIKA navigates between pages.
| API | Description |
|---|---|
$laika / useLaika() | Low-level LAIKA runtime. |
$router / useRouter() | Client-side navigation and requests. |
$payload / usePayload() | Complete reactive server payload. |
$site / useSite() | Active OctoberCMS site. |
$theme / useTheme() | Active theme metadata and options. |
$page / usePage() | Current page metadata and properties. |
$components / useComponent() | Registered OctoberCMS component data and handlers. |
$october / useOctober() | OctoberCMS URLs, translations, AJAX and rendering helpers. |
$shared / useShared() | Values shared with the current page. |
useOctoberFilter() | Reactive OctoberCMS Markdown filtering. |
getProgressBar() | Shared progress-bar state and controls. |
Reactive Payload
The server payload is the shared state between OctoberCMS and Vue. It contains:
- The active site, theme and page.
- Page properties and shared values.
- Registered OctoberCMS components.
- Flash messages and server-rendered content.
- OctoberCMS routes, URLs and localization data.
LAIKA replaces or patches this payload after navigation and AJAX requests. The associated template globals and composables update automatically.
Server-Rendered HTML
Some APIs return HTML generated by OctoberCMS, including <PageContent />, <PageComponent />, <ServerPartial /> and the Markdown-filter APIs.
WARNING
Server-rendered output is inserted using innerHTML or Vue's v-html. Only render trusted content or use the appropriate safe and cleaning filters when processing user-controlled input.
Backend and Frontend
Use the backend documentation for OctoberCMS concepts and theme workflows:
Use the frontend documentation for exact component properties, composable return values and runtime methods.