Vue SDK

InlineCMSPlugin

Vue 3 plugin that initializes the CMS and provides reactive state.

import { InlineCMSPlugin } from '@inlinecms/vue'

app.use(InlineCMSPlugin, {
  apiKey: 'your-key',
  apiUrl: 'https://cms.yourdomain.com',
})

Composables

useCMS

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

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

useAuth

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

const { isAuthenticated, canEdit, user, login, logout } = useAuth()
</script>

Object-enrichment composables

The same enrichment surface as the React SDK — register host-owned objects and read them merged with their CMS overlay. See the Admin Content Management guide for the full model.

<script setup>
import { useCMSObject, useCMSObjects, useInlineContent, useRegisteredObjects } from '@inlinecms/vue'

// Register a single object so it surfaces in the editor / content manager:
useCMSObject('property', { id: 'prop_8c4f', name: 'Beachfront Stunner', bedrooms: 3 })

// Register a list (e.g. rendered review cards):
useCMSObjects('review', reviews)

// Register + read merged with the CMS overlay (returns a computed ref):
const host = useInlineContent('host', { id: 'host_maya', firstName: 'Maya' })
// template: {{ host.firstName }}, {{ host.$cms.canEdit }}

// Reactive snapshot of everything registered (for building editor UI):
const objects = useRegisteredObjects()
</script>

Composable	Returns	Description
useCMSObject(type, object)	void	Register one object (accepts a value, ref, or getter).
useCMSObjects(type, objects)	void	Bulk-register a list.
useInlineContent(type?, object)	ComputedRef<InlineContent<T>>	The object merged with its overlay; .$cms carries { loading, canEdit, fields, collections }.
useRegisteredObjects()	Ref<RegisteredObject[]>	Reactive list of all registered objects.

Components

CMSField

Renderless component for template-driven editing:

<CMSField tag="h1" component-id="hero" field-key="title" field-type="text" label="Title">
  Default heading
</CMSField>

Prop	Type	Required	Description
tag	string	No	HTML tag to render (default: div)
component-id	string	Yes	Component identifier
field-key	string	Yes	Field key within the component
field-type	FieldType	No	Override inferred field type
label	string	No	Label for the edit UI

InlineObjects

A managed list of rich objects (amenities, features, specs) bound to a host object’s field. View + in-place manage in one component — the Vue twin of the React <InlineObjects>. See the Admin Content Management guide for the full model.

<script setup>
import { InlineObjects } from '@inlinecms/vue'
const resort = { id: 'r1', amenities: [{ icon: '🌊', label: 'Ocean view' }] }
</script>

<template>
  <InlineObjects :data="resort" value="amenities" item-label="amenity" :fields="['title','icon']" :columns="2" />
</template>

Prop	Type	Required	Description
data	{ id: string } & object	Yes	The host object. Identity is always borrowed.
value	string	Yes	Field path, e.g. "amenities".
type	string	No	Object type; inferred from data.__cmsType / data.type when omitted.
mode	'inline' | 'manage'	No	inline (default) renders the list; manage opens the editor.
render	'list' | 'grid' | 'button'	No	Disclosure style (default list).
item-label	string	No	Singular noun for buttons, e.g. "amenity".
fields	Array<'title'|'icon'|'badge'|'description'>	No	Sub-fields the editor exposes (default title, icon, badge).
columns	number	No	Column count for the view grid (default 2).

Each item is an ObjectItemValue ({ title, icon?, badge?, description? }). Falls back to the host object’s own array when the CMS overlay is empty, and offers cross-object “used elsewhere” suggestions.

InlineImages

A managed image/video collection bound to a host object’s field — gallery for visitors, upload/caption/reorder/remove for editors. The Vue twin of the React <InlineImages>.

<template>
  <InlineImages :data="property" type="property" value="images" layout="1-4" />
</template>

Prop	Type	Required	Description
data	{ id: string } & object	Yes	The host object.
value	string	Yes	Field path, e.g. "images".
type	string	No	Object type; inferred from data when omitted.
mode	'inline' | 'manage'	No	inline (default) renders the gallery; manage opens the grid.
layout	GalleryLayoutStyle	No	Gallery layout hint (default 1-4).
render	'gallery' | 'grid' | 'button'	No	Disclosure style (default gallery).

InlineCMSContentManager

A drop-in, object-scoped management surface — a Content tab (edit this object’s fields and collections) and, for admins, a Schema tab (add / retype fields). render="button"/"fab" opens a side drawer; render="panel"/"inline" renders open. It prompts for sign-in when there’s no editor session.

<template>
  <InlineCMSContentManager :data="property" type="property" :roster="[property]" render="fab" />
</template>

Prop	Type	Required	Description
data	{ id: string } & object	Yes	The object in context. Identity is always borrowed.
type	string	No	Object type; inferred from data when omitted.
render	'button' | 'fab' | 'panel' | 'inline'	No	Disclosure style (default button).
scope	'object' | 'type' | 'both'	No	Which tiers to expose (default both, role-gated).
roster	Array<{ id: string } & object>	No	Full object list, for switching between instances.

Emits open / close; pass a custom trigger via the #trigger slot.

defineInlineComponent

Vue equivalent of the React withCMS HOC:

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' },
    { key: 'subtitle', selector: 'p', type: 'text' },
  ],
})

The wrapped component receives field values as props and an onInlineCmsEdit callback.