👉 [Visit the DatoCMS homepage](https://www.datocms.com) or see [What is DatoCMS?](#what-is-datocms)
---
# vue-datocms
[](https://github.com/datocms/vue-datocms/blob/master/LICENSE) [](https://www.npmjs.com/package/vue-datocms) [](https://github.com/datocms/vue-datocms/actions/workflows/node.js.yml)
A set of components and utilities to work faster with [DatoCMS](https://www.datocms.com/) in Vue.js environments. Integrates seamlessly with [DatoCMS's GraphQL Content Delivery API](https://www.datocms.com/docs/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](#vue-datocms)
- [Table of Contents](#table-of-contents)
- [Features](#features)
- [Installation](#installation)
- [Development](#development)
- [What is DatoCMS?](#what-is-datocms)
## Features
`vue-datocms` contains Vue components ready to use, helpers functions and usage examples.
[Components](https://vuejs.org/guide/essentials/component-basics.html):
- [``](src/components/ContentLink) for Visual Editing with click-to-edit overlays
- [`` and ``](src/components/Image)
- [``](src/components/VideoPlayer)
- [``](src/components/StructuredText)
[Composables](https://vuejs.org/guide/reusability/composables.html):
- [`useContentLink`](src/composables/useContentLink) for Visual Editing
- [`useQuerySubscription`](src/composables/useQuerySubscription)
- [`useSiteSearch`](src/composables/useSiteSearch)
- [`useVideoPlayer`](src/composables/useVideoPlayer)
Helpers:
- [`toHead`](src/lib/toHead)
## Installation
```
# First, install Vue
npm install vue
# Then install vue-datocms
npm install vue-datocms
# Demos
For fully working examples take a look at our [examples directory](https://github.com/datocms/vue-datocms/tree/master/examples).
Live demo: [https://vue-datocms-example.netlify.com/](https://vue-datocms-example.netlify.com/)
```
## 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](https://www.datocms.com/) 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](https://www.datocms.com/team/best-cms-for-developers), [content editors](https://www.datocms.com/team/content-creators) and [marketers](https://www.datocms.com/team/cms-digital-marketing)!
**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](https://www.datocms.com/features) to get the job done
- **Developer Experience**: First-class TypeScript support with powerful developer tools
**Getting Started:**
- ⚡️ [Create Free Account](https://dashboard.datocms.com/signup) - Get started with DatoCMS in minutes
- 🔖 [Documentation](https://www.datocms.com/docs) - Comprehensive guides and API references
- ⚙️ [Community Support](https://community.datocms.com/) - Get help from our team and community
- 🆕 [Changelog](https://www.datocms.com/product-updates) - Latest features and improvements
**Official Libraries:**
- [**Content Delivery Client**](https://github.com/datocms/cda-client) - TypeScript GraphQL client for content fetching
- [**REST API Clients**](https://github.com/datocms/js-rest-api-clients) - Node.js/Browser clients for content management
- [**CLI Tools**](https://github.com/datocms/cli) - Command-line utilities for schema migrations (includes [Contentful](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [WordPress](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress) importers)
**Official Framework Integrations**
Helpers to manage SEO, images, video and Structured Text coming from your DatoCMS projects:
- [**React Components**](https://github.com/datocms/react-datocms)
- [**Vue Components**](https://github.com/datocms/vue-datocms)
- [**Svelte Components**](https://github.com/datocms/datocms-svelte)
- [**Astro Components**](https://github.com/datocms/astro-datocms)
**Additional Resources:**
- [**Plugin Examples**](https://github.com/datocms/plugins) - Example plugins we've made that extend the editor/admin dashboard
- [**Starter Projects**](https://www.datocms.com/marketplace/starters) - Example website implementations for popular frameworks
- [**All Public Repositories**](https://github.com/orgs/datocms/repositories?q=&type=public&language=&sort=stargazers)