Nuxt.js CMS

The easiest way to manage content with Nuxt.js

Nuxt.js makes it trivial to build scalable and fast Vue.js apps with server-side SEO. When it comes to authoring content, pair it with a CMS that’s been built for this use-case.

Try our Nuxt.js demo project now!
  • Best practices
  • 30s setup
Proudly powered by DatoCMS + Nuxt.js:
NZero
https://nzero.com/
Quantum Inspire
https://www.quantum-inspire.com/
LiveStorm
https://livestorm.co/
Chilly's Bottles
https://www.chillysbottles.com/
Stuart
https://stuart.com/
Randstad Digital Toolkit
https://digitalsupport.randstad.com/

Nuxt.js CMS example

DatoCMS Preview API = content editors happiness

Thanks to Nuxt.js server-rendering capabilities you can easily deploy a clone of your production website that shows real-time previews of the changes you make to any content stored in Dato CMS (text, images, videos). Give it a try, it's magic!

// pages/movie.vue
<template>
<article>
<h1>{{movie.title}}</h1>
Release date: {{movie.releaseDate}}
</article>
</template>
<script>
import { Image, toHead } from "vue-datocms";
import { request } from "~/lib/datocms";
const query = `{
movie(filter: { title: { eq: "Inception" } }) {
title
releaseDate
actors {
name
}
}
}`;
export default {
components: {
"datocms-image": Image
},
async asyncData({ params }) {
const endpoint = node.env.PREVIEW_MODE ?
'https://graphql.datocms.com/preview' :
'https://graphql.datocms.com/'
return await request(endpoint, query);
}
};
</script>

Worldwide CDN

Nuxt.js scales infinitely 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 a serverless architecture.

Dato CMS offers your content from a CDN with edges all around the globe, minimizing latency and making your Nuxt.js project as fast as you would expect!

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 Nuxt.js CMSRead more about our GraphQL API

{}

Nuxt.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!

Before
Nuxt.js with DatoCMS
Acme Inc. - DatoCMS
Create new Blog post
Title
The Best Video Games to Play
Author
Dan Poe
Content
Text
Lorem ipsum....
Gallery
Text
Lorem ipsum....
CTA label
Try it now!
CTA URL
http://...
Quote
Lorem ipsum....
Author
Steve Jobs
Add a new block:
Text
Gallery
Quote
Call to action
Save Blog Post

A component-centric CMS, just like Nuxt.js

Thanks to Vue, Nuxt.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

Thanks for a brilliant product, I have tried the competition and in my opinion DatoCMS is waaaaaay ahead.
Emil Olsson
Freelance Creative
Nuxt.js + DatoCMS demo
pages/homepage.js - Visual Studio Code
Try our Project starter

Start your new Nuxt.js project in minutes

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

We power experiences for over half a billion users