Walde Vue

Vue integration for Walde, a powerful platform to create and manage beautiful and performant online content.

This package provides Vue 3 composables and a plugin for seamlessly integrating Walde content into your Vue application, with built-in caching, service worker support, and reactive content loading.

Installation

npm i @walde.ai/vue

@walde.ai/vue requires @walde.ai/sdk and vue as peer dependencies:

npm i @walde.ai/sdk vue

Quick Start

1. Install the Plugin

import { createApp } from 'vue';
import { createWalde } from '@walde.ai/vue';
import App from './App.vue';

const app = createApp(App);
app.use(createWalde({ url: 'https://content.your-walde-site.com' }));
app.mount('#app');

2. Use Composables

<script setup lang="ts">
import { useContentList } from '@walde.ai/vue';

const { contents, loading } = useContentList();
</script>

<template>
  <div v-if="loading">Loading...</div>
  <ul v-else>
    <li v-for="item in contents" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

Composables

• useContentList() — Reactively loads and returns the full content manifest.
• useContent(key) — Loads a single content item by key, with locale support.
• useArticle(key) — Loads and renders a Markdown content item as HTML.

Service Worker

The package includes a service worker (walde-sw.js) for offline content caching. Copy it to your public directory:

cp node_modules/@walde.ai/vue/dist/walde-sw.js public/walde-sw.js

Documentation

For full documentation, visit docs.walde.ai.

License

MIT — see LICENSE.