Nuxt > Nuxt + DatoCMS Overview

Nuxt is an approachable tool for building projects based on Vue.js. It includes file-system routing, minimal configuration, and a set of meaningful conventions: it's the right tool to start a Vue.js application without reinventing the wheel each time.

DatoCMS is the perfect companion to Nuxt since it offers content, images and videos on a globally-distributed CDN. With this combo, you can have an infinitely scalable website, ready to handle prime-time TV traffic spikes, at a fraction of the regular cost.

Our marketplace features different demo projects on Nuxt, so you can learn and get started easily:

Nuxt Starter Kit

Try this demo »

Fetching contents from our GraphQL API

First, create a new Nuxt application, which sets up a basic Nuxt application for you. To create a project, run the following command:

npx nuxi init nuxt-app

Then enter inside the project directory, install the dependencies, and start the development server:

cd nuxt-app
npm run dev

We also need the @datocms/cda-client package, which provides a series of convenient utilities for making calls to the Content Delivery API:

npm i --save @datocms/cda-client

Nuxt comes with a set of methods for fetching data from any API. The best way to retrieve data from Dato's GraphQL API is building a custom composable relying on useFetch:

1
import { buildRequestInit } from '@datocms/cda-client';
2

3
export function useQuery(query, options) {
4
  const config = useRuntimeConfig();
5

6
  const optionsWithToken = {
7
    ...options,
8
    token: config.datocmsApiToken,
9
  };
10

11
  return useFetch('https://graphql.datocms.com/', {
12
    ...buildRequestInit(query, optionsWithToken),
13
    key: hash([query, optionsWithToken]),
14
    transform: ({ data, errors }) => {
15
      if (errors)
16
        throw new Error(
17
          `Something went wrong while executing the query: ${JSON.stringify(errors)}`,
18
        );
19

20
      return data;
21
    },
22
  });
23
}

The DatoCMS API token can be stored in an environment variable and provided to Nuxt application via the nuxt.config.ts file:

export default defineNuxtConfig({
  runtimeConfig: {
    // set by NUXT_DATOCMS_API_TOKEN env variable
    datocmsApiToken: '',
  }
})

To create an API token for a DatoCMS project, go in the "Settings > API Tokens" section, making sure you only give it permission to access the (read-only) Content Delivery API.

Finally, you'll need to set up a .env file to store the DatoCMS token:

DATO_CMS_TOKEN=<THE_TOKEN_YOU_JUST_CREATED>

You can then use the composable in your pages and layouts:

1
<script setup>
2
const QUERY = `
3
  query {
4
    blog {
5
      title
6
    }
7
  }
8
`;
9

10
const { data, error } = useQuery(QUERY);
11
</script>
12

13
<template>
14
  <p v-if="error">Something bad happened!</p>
15
  <p v-else>Data: <code>{{ JSON.stringify(data) }}</code></p>
16
</template>

The QUERY is the GraphQL query, and of course, it depends on the models available in your specific DatoCMS project. You can learn everything you need regarding how to build GraphQL queries on our Content Delivery API documentation.