👉 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:

• <Image /> and <NakedImage />
• <VideoPlayer />
• <StructuredText />

Composables:

• useQuerySubscription
• useSiteSearch
• useVideoPlayer

Helpers:

• 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.

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, agency partners, 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!

Quick links:

• ⚡️ Get started with a free DatoCMS account
• 🔖 Go through the docs
• ⚙️ Get support from us and the community
• 🆕 Stay up to date on new features and fixes on the changelog

Our featured repos:

• datocms/react-datocms: React helper components for images, Structured Text rendering, and more
• datocms/js-rest-api-clients: Node and browser JavaScript clients for updating and administering your content. For frontend fetches, we recommend using our GraphQL Content Delivery API instead.
• datocms/cli: Command-line interface that includes our Contentful importer and Wordpress importer
• datocms/plugins: Example plugins we've made that extend the editor/admin dashboard
• datocms/gatsby-source-datocms: Our Gatsby source plugin to pull data from DatoCMS
• Frontend examples in different frameworks: Next.js, Vue and Nuxt, Svelte and SvelteKit, Astro, Remix. See all our starter templates.

Or see all our public repos