Nuxt > Getting started

Getting started

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.

Pro tip: Build a Blog With Nuxt and DatoCMS

For a comprehensive guide on integrating DatoCMS into a Nuxt blog, check out this guide. It covers creating content models, adding and retrieving blog posts, handling dynamic routing, and offers tips on styling your blog for a polished look.

Fetching contents from our GraphQL API

Nuxt 3 comes with a set of methods for fetching data from any API.

It's easy to retrieve data from Dato's GraphQL API with the useFetch composable:

<script setup>
const QUERY = `
query {
blog {
seo: _seoMetaTags {
attributes
content
tag
}
}
}
`;
const runtimeConfig = useRuntimeConfig();
const { data, error } = await useFetch('https://graphql.datocms.com', {
method: 'POST',
headers: {
Authorization: `Bearer ${runtimeConfig.public.datoCmsToken}`,
},
body: {
query: QUERY,
},
transform: ({ data, errors }) => {
if (errors) throw errors;
return data;
},
});
</script>
<template>
<p v-if="error">Something bad happened!</p>
<p v-else>Data: <code>{{ data }}</code></p>
</template>

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

export default defineNuxtConfig({
runtimeConfig: {
public: {
datoCmsToken: process.env.DATO_CMS_TOKEN,
}
}
})

During development, Nuxt supports .env files out of the box.

Quick start: integration between Nuxt and DatoCMS

The approach just described covers simple cases: for a slightly mode advanced tour, in this tutorial we'll create a Nuxt application fetching data via a custom composable based on useFetch.

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

First, you need 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.

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

DATO_CMS_TOKEN=THE_TOKEN_YOU_JUST_CREATED

Adding a custom composable for DatoCMS

Next, create a composables/useGraphqlQuery.js — that is the function that will make the actual call to the DatoCMS GraphQL API:

export default (options) => {
const { query, variables = {} } = options;
const runtimeConfig = useRuntimeConfig();
const key = JSON.stringify(options);
return useFetch('https://graphql.datocms.com', {
key,
method: 'POST',
headers: {
Authorization: `Bearer ${runtimeConfig.public.datoCmsToken}`,
},
body: {
query,
variables,
},
transform: ({ data, errors }) => {
if(errors) throw new errors;
return data;
},
});
};

Now you can use the composable to retrieve data from DatoCMS:

<script setup>
const QUERY = `
query {
blog {
seo: _seoMetaTags {
attributes
content
tag
}
}
}
`;
const { data, error } = await useGraphqlQuery({ query: QUERY });
</script>
<template>
<p v-if="error">Something bad happened!</p>
<p v-else>Data: <code>{{ 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.