# 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.**

> [!PROTIP] Pro tip: Build a Blog With Nuxt and DatoCMS
> For a step-by-step tutorial on integrating DatoCMS into a Nuxt blog, [check out this guide](https://www.datocms.com/blog/how-to-build-a-nuxt-blog.md). It covers creating content models, adding and retrieving blog posts, handling dynamic routing, and offers tips on styling your blog for a polished look.

Our [marketplace](https://www.datocms.com/marketplace/starters.md) features different demo projects on Nuxt, so you can learn and get started easily:

[

(Image content)

Nuxt Starter Kit

Try this demo »

](https://www.datocms.com/marketplace/starters/nuxt-starter-kit.md)

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

Terminal window

```bash
npx nuxi init nuxt-app
```

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

Terminal window

```bash
cd nuxt-app
npm run dev
```

We also need the [`@datocms/cda-client` package](https://github.com/datocms/cda-client), which provides a series of convenient utilities for making calls to the Content Delivery API:

Terminal window

```bash
npm i --save @datocms/cda-client
```

Nuxt comes with a [set of methods](https://v3.nuxtjs.org/getting-started/data-fetching) 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`:

```javascript
import { buildRequestInit } from '@datocms/cda-client';

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

  const optionsWithToken = {
    ...options,
    token: config.datocmsApiToken,
  };

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

      return data;
    },
  });
}
```

The DatoCMS API token can be stored in an [environment variable](https://v3.nuxtjs.org/getting-started/configuration#environment-variables-and-private-tokens) and provided to Nuxt application via the `nuxt.config.ts` file:

```javascript
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.

How to create a GraphQL API Token (Video content)

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

```plaintext
DATO_CMS_TOKEN=<THE_TOKEN_YOU_JUST_CREATED>
```

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

```javascript
<script setup>
const QUERY = `
  query {
    blog {
      title
    }
  }
`;

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

<template>
  <p v-if="error">Something bad happened!</p>
  <p v-else>Data: <code>{{ JSON.stringify(data) }}</code></p>
</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](https://www.datocms.com/docs/content-delivery-api.md).

## Related content in "Nuxt"

- [Nuxt + DatoCMS Overview](https://www.datocms.com/docs/nuxt.md)

- [Include draft contents](https://www.datocms.com/docs/nuxt/include-draft-contents-during-development.md)
- [Responsive images](https://www.datocms.com/docs/nuxt/managing-images.md)

- [Displaying videos](https://www.datocms.com/docs/nuxt/displaying-videos.md)
- [Structured Text fields](https://www.datocms.com/docs/nuxt/rendering-structured-text-fields.md)

- [Adding SEO to Nuxt pages](https://www.datocms.com/docs/nuxt/seo-management.md)
- [Real-time updates](https://www.datocms.com/docs/nuxt/real-time-updates.md)

- [Visual Editing](https://www.datocms.com/docs/nuxt/visual-editing.md)
- [Nuxt Starter Kit    
Words are nice... but code speaks louder. Dive into a fully commented project template,
            showcasing these techniques (and more) in action.
       ✅ Official   Nuxt 4](https://www.datocms.com/marketplace/starters/nuxt-starter-kit.md)