👉 Visit the DatoCMS homepage or see What is DatoCMS?

---

vue-datocms

  

A set of components and utilities to work faster with DatoCMS in Vue.js environments. Integrates seamlessly with DatoCMS's GraphQL Content Delivery API.

- Works with Vue 3 (version 4 is maintained for compatibility with Vue 2);
- TypeScript ready;
- Compatible with any data-fetching library (axios, Apollo);
- Usable both client and server side;
- Compatible with vanilla Vue and pretty much any other Vue-based solution.

Table of Contents

- vue-datocms
- Table of Contents
- Features
- Installation
- Development
- What is DatoCMS?

Features

vue-datocms contains Vue components ready to use, helpers functions and usage examples.

Components:

- for Visual Editing with click-to-edit overlays
- and
-
-

Composables:

- useContentLink for Visual Editing
- useQuerySubscription
- useSiteSearch
- useVideoPlayer

Helpers:

- toHead

Installation

``


First, install Vue

`


Development

This repository contains a number of demos/examples. You can use them to locally test your changes.

`bash
cd examples
npm setup
npm run dev
``

---

What is DatoCMS?

DatoCMS is the REST & GraphQL Headless CMS for the modern web.

Trusted by over 25,000 enterprise businesses, agencies, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our developers, content editors and marketers!

Why DatoCMS?

- API-First Architecture: Built for both REST and GraphQL, enabling flexible content delivery
- Just Enough Features: We believe in keeping things simple, and giving you the right feature-set tools to get the job done
- Developer Experience: First-class TypeScript support with powerful developer tools

Getting Started:

- ⚡️ Create Free Account - Get started with DatoCMS in minutes
- 🔖 Documentation - Comprehensive guides and API references
- ⚙️ Community Support - Get help from our team and community
- 🆕 Changelog - Latest features and improvements

Official Libraries:

- Content Delivery Client - TypeScript GraphQL client for content fetching
- REST API Clients - Node.js/Browser clients for content management
- CLI Tools - Command-line utilities for schema migrations (includes Contentful and WordPress importers)

Official Framework Integrations

Helpers to manage SEO, images, video and Structured Text coming from your DatoCMS projects:

- React Components
- Vue Components
- Svelte Components
- Astro Components

Additional Resources:

- Plugin Examples - Example plugins we've made that extend the editor/admin dashboard
- Starter Projects - Example website implementations for popular frameworks
- All Public Repositories