Vue / Nuxt

ACMS integrates with Vue and Nuxt applications using the same framework-agnostic client. This guide covers setup, reactive patterns, and Nuxt-specific considerations.

Installation

npm install @useacms/client @useacms/cli

Basic Usage

Import acms and use it in your templates:

<template>
  <section class="hero">
    <h1>{{ acms.hero.title }}</h1>
    <p>{{ acms.hero.subtitle }}</p>
    <a :href="acms.hero.ctaLink">{{ acms.hero.ctaText }}</a>
  </section>
</template>

<script setup>
import { acms } from '@useacms/client';
</script>

Fields are automatically registered when the component renders during development.

Reactive Updates with Composable

Create a composable for reactive content updates:

import { ref, onMounted, onUnmounted } from 'vue';
import { acms, subscribe } from '@useacms/client';

export function useAcms() {
  const version = ref(0);

  let unsubscribe: (() => void) | undefined;

  onMounted(() => {
    unsubscribe = subscribe(() => {
      version.value++;
    });
  });

  onUnmounted(() => {
    unsubscribe?.();
  });

  return acms;
}

Use the composable in your components:

<template>
  <section>
    <h1>{{ content.hero.title }}</h1>
    <p>{{ content.hero.subtitle }}</p>
  </section>
</template>

<script setup>
import { useAcms } from '@/composables/useAcms';

const content = useAcms();
</script>

Nuxt Integration

In Pages

<template>
  <main>
    <h1>{{ acms.home.title }}</h1>
    <p>{{ acms.home.description }}</p>
  </main>
</template>

<script setup>
import { acms } from '@useacms/client';
</script>

In Layouts

<template>
  <div>
    <header>
      <nav>
        <span>{{ acms.site.name }}</span>
      </nav>
    </header>
    <slot />
    <footer>
      <p>{{ acms.footer.copyright }}</p>
    </footer>
  </div>
</template>

<script setup>
import { acms } from '@useacms/client';
</script>

Configuration

Create acms.config.ts in your project root:

import { defineConfig } from '@useacms/client';
import { localFile, github } from '@useacms/cli/adapters';

export default defineConfig({
  dev: localFile({ path: './acms.json' }),
  production: github({
    token: process.env.GITHUB_TOKEN,
    owner: 'myorg',
    repo: 'content',
  }),
  strategy: 'build-time',
});

Development Setup

Run both the ACMS dev server and your Vue/Nuxt app:

# Terminal 1
acms dev

# Terminal 2
npm run dev    # or: nuxt dev

Working with Arrays

<template>
  <ul>
    <li v-for="(feature, index) in acms.features" :key="index">
      {{ feature }}
    </li>
  </ul>
</template>

<script setup>
import { acms } from '@useacms/client';
</script>

Conditional Rendering

<template>
  <div v-if="acms.banner.visible" class="banner">
    <p>{{ acms.banner.message }}</p>
  </div>
</template>

<script setup>
import { acms } from '@useacms/client';
</script>

Computed Properties

Use computed properties for derived content:

<script setup>
import { computed } from 'vue';
import { acms } from '@useacms/client';

const fullTitle = computed(() => `${acms.site.name} - ${acms.page.title}`);
</script>

Next Steps

Learn about TypeScript support
Set up the Dashboard for visual editing
Configure a Storage Adapter for production