Quick Start (Vue)

1. Install

npm install @inlinecms/vue
npm install -D @inlinecms/vite-plugin

2. Configure Vite

vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { inlineCMS } from '@inlinecms/vite-plugin'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [
      inlineCMS({ apiKey: env.VITE_INLINECMS_API_KEY }),
      vue(),
    ],
  }
})

3. Install the plugin

main.ts

import { createApp } from 'vue'
import { InlineCMSPlugin } from '@inlinecms/vue'
import App from './App.vue'

createApp(App)
  .use(InlineCMSPlugin, { apiKey: import.meta.env.VITE_INLINECMS_API_KEY })
  .mount('#app')

4. Use the composable

<script setup>
import { useCMS } from '@inlinecms/vue'

const { getField, setField, canEdit } = useCMS({
  componentId: 'hero-section',
  fields: [
    { key: 'title', type: 'text', label: 'Hero Title' },
  ],
})
</script>

<template>
  <h1>{{ getField('title') || 'Welcome' }}</h1>
</template>

CMSField component

For template-driven editing:

<template>
  <CMSField tag="h1" component-id="hero" field-key="title">
    Default heading
  </CMSField>
</template>

<script setup>
import { CMSField } from '@inlinecms/vue'
</script>

defineInlineComponent

Wrap existing components without modifying them:

import { defineInlineComponent } from '@inlinecms/vue'
import HeroSection from './HeroSection.vue'

export const CMSHero = defineInlineComponent(HeroSection, {
  componentId: 'hero-section',
  fields: [
    { key: 'title', selector: 'h1', type: 'text' },
  ],
})