Vue.js CMS

The easiest way to manage content with Vue.js

When it comes to authoring content, pair Vue.js with a CMS that’s been built for single-page applications.

Try our Vue.js demo project now!
  • Best practices
  • 30s setup
Proudly powered by DatoCMS + Vue.js:
Nord DDB
Quantum Inspire
Chilly's Bottles
Verizon Connect
Randstad Digital Toolkit

Worldwide CDN

Vue is fast, and so your CMS should be

If your content is always fetched from a single geographical location, there’s no point in building a website with Vue.js or a serverless architecture. DatoCMS serves your content from a CDN with edges all around the globe, minimizing latency.

Read more about our Worldwide CDN

GraphQL Content API

Ask for what you need, get exactly that

Our Content Delivery API is built with GraphQL. That means powerful developer tools, multiple resources in a single request and complete control over the data your website downloads. The perfect solution for a Vue.js CMSRead more about our GraphQL API


Vue.js images

State of the art for responsive and progressive images

Serving optimized images is incredibly hard, but using our GraphQL Content API and our Vue.js component, you can implement lazy loaded, responsive images in one line of code. Avoid any layout jumping, offer instant previews of images while they load. It’s like magic.

Read more about our Vue.js components!

Vue.js with DatoCMS

Vue.js CMS example

DatoCMS Preview API = content editors happiness

If you're using Vue.js as a single-page application (SPA), you can easily switch GraphQL endpoint to fetch real-time previews of the changes you make to any content stored in Dato (text, images, videos). Give it a try, it's magic!

<div v-if="data">
<h1>{{ }}</h1>
<!-- .. -->
import axios from 'axios'
function request({ query, preview }) {
const endpoint = preview
? ``
: ``
const response = await, { query });
export default {
data() {
return {
data: null
async mounted() { = await request({
query: `{
movie(filter: { title: { eq: "Inception" } }) {
actors {
Acme Inc. - DatoCMS
Create new Blog post
The Best Video Games to Play
Dan Poe
Lorem ipsum....
Lorem ipsum....
CTA label
Try it now!
Lorem ipsum....
Steve Jobs
Add a new block:
Call to action
Save Blog Post

A component-centric CMS, just like Vue.js

Vue.js makes using components easy right from the get-go, and you should expect the same from your CMS. A component-based approach allows developers to clearly divide work amongst themselves and progress without having to rely on each other every step of the way.

Read more about DatoCMS modular blocks

I do heart Dato, my first choice CMS, always advocate my clients treat CMS flexibility seriously.
Callum Flack
Owner at Callum Flack Design
Vue.js + DatoCMS demo
pages/homepage.js - Visual Studio Code
Try our Project starter

Start your new Vue.js SPA in minutes

Learn from our best-practice DatoCMS + Vue.js project. Fully configured and deployed on Netlify or Vercel. Source included.

We power experiences for over half a billion users