@contoprix/vue

@contoprix/vue

Vue 3 integration for Contoprix. It provides dependency injection, reactive composables, page/block renderers, schema-driven fallback rendering, and SSR helpers.

Installation

npm install @contoprix/client @contoprix/vue vue

Imports:

• @contoprix/vue for providers, composables, renderers, and registry types
• @contoprix/vue/server for SSR-safe fetch helpers

Configure a Vue application

Create a browser-safe client and install the plugin for a client-side SPA:

import { createApp } from "vue";
import { ContoprixClient } from "@contoprix/client";
import { ContoprixPlugin, type ComponentRegistry } from "@contoprix/vue";
import App from "./App.vue";
import Hero from "./components/Hero.vue";

const client = new ContoprixClient({
  baseUrl: import.meta.env.VITE_CONTOPRIX_BASE_URL,
  auth: {
    type: "deliveryKey",
    deliveryKey: import.meta.env.VITE_CONTOPRIX_DELIVERY_KEY
  }
});

const components: ComponentRegistry = { hero: Hero };

createApp(App)
  .use(ContoprixPlugin, { client, components })
  .mount("#app");

For SSR, prefer ContoprixProvider in each render tree so client state is not shared across requests:

<script setup lang="ts">
import { ContoprixProvider } from "@contoprix/vue";
</script>

<template>
  <ContoprixProvider :client="client" :components="components">
    <RouterView />
  </ContoprixProvider>
</template>

Register components

Registry keys must exactly match Contoprix component codes. Registered components receive settings, content, contents, form, and previewAttributes props as applicable.

<!-- components/Hero.vue -->
<script setup lang="ts">
import type { ContoprixComponentProps } from "@contoprix/vue";

defineProps<ContoprixComponentProps>();
</script>

<template>
  <section v-bind="previewAttributes">
    <h1>{{ String(settings?.title ?? "") }}</h1>
  </section>
</template>

import type { ComponentRegistry } from "@contoprix/vue";
import Hero from "./components/Hero.vue";

export const components: ComponentRegistry = {
  hero: Hero
};

Fetch and render a page

<script setup lang="ts">
import { PageRenderer, usePage } from "@contoprix/vue";
import { components } from "./contoprix-components";

const { page, loading, error } = usePage("/about", {
  languageCode: "en"
});
</script>

<template>
  <p v-if="loading">Loading...</p>
  <p v-else-if="error">Could not load this page.</p>
  <PageRenderer
    v-else-if="page"
    :page="page"
    :components="components"
  />
</template>

PageRenderer handles header, layout-region, page, and footer blocks. Use BlockRenderer to render one block.

Composables

Arguments may be plain values, refs, or getters. Returned data is reactive.

const { page, loading, error } = usePage(slug);

const { content, loading, error } = useContent(
  "blog",
  entryId,
  { languageCode: "en" }
);

const { navigation, loading, error, refetch } = useNavigation({
  code: "main",
  languageCode: "en"
});

const { results, total, loading, error } = useSearch(() => ({
  query: searchText.value,
  take: 10,
  sort: "relevance"
}));

When code is supplied, the composable also returns definition, the complete named navigation envelope; navigation remains the legacy-compatible item array.

usePreviewPage(pageId) is also available for preview-aware interfaces with suitable credentials.

Server-side usage

import { getPage } from "@contoprix/vue/server";

const page = await getPage("/about", {
  baseUrl: process.env.CONTOPRIX_BASE_URL!,
  languageCode: "en",
  auth: {
    type: "clientCredentials",
    clientId: process.env.CONTOPRIX_CLIENT_ID!,
    clientSecret: process.env.CONTOPRIX_CLIENT_SECRET!
  }
});

Available server exports are createServerClient, getPage, and getContent. For a full Nuxt integration, use @contoprix/nuxt.

Generic fallback rendering

Build a schema registry from the schema pulled by the CLI. Unregistered component blocks with a renderable schema are then rendered generically.

import schema from "../.contoprix/schema/schema.json";
import { buildSchemaRegistry } from "@contoprix/vue";

export const schemas = buildSchemaRegistry(schema);

<PageRenderer
  :page="page"
  :components="components"
  :schemas="schemas"
  render-mode="delivery"
/>

Registered components take precedence. Form, content-single, and content-list blocks need custom components for production UI.

Visual editing

<PageRenderer
  :page="page"
  :components="components"
  :visual-editing="{
    enabled: true,
    adminOrigin: 'https://admin.example.com',
    onRefresh: () => window.location.reload()
  }"
/>

Use this only on a protected preview route. Bind previewAttributes to the custom component's root element so selection works in the editor.

Security

• Never include client credentials in a Vue browser bundle.
• Use a restricted website delivery key for public delivery.
• Create clients per render/request when using SSR.
• Restrict visual-editing messaging to the configured admin origin.

License

MIT