Vue.js > Integrate DatoCMS with Vue

Building a single-page application using Vue.js and GraphQL is probably one of the fastest ways to go live with a CMS-backed website.

With the globally-distributed CDN serving the Content Delivery API of DatoCMS you can serve directly content to your end users without an intermediate server. You just maintain and host a static frontend application, and we deal with the rest!

Fetching content from our GraphQL API

To fetch GraphQL content with Vue.js from DatoCMS there are many options. One of the most popular is Apollo via the vue-apollo package, but you can really use any client, for example the well-known axios, which is compatible with both Node.js and browsers, or graphql-request which is a minimal GraphQL client supporting Node and browsers.

Our marketplace features some demo projects, with different GraphQL libraries, so you can learn and get started easily:

Vue.js profile card

Try this demo »

Quick start

First, create a new Vue.js application using create-vue. During the creation wizard, go ahead and pick the default presets.

npm init vue@latest
Need to install the following packages:
  create-vue@3.4.0
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
✔ Project name: … my-app
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
Scaffolding project in /private/tmp/my-app...
Done. Now run:
  cd my-app
  npm install
  npm run dev

Enter inside the my-app directory, and install the graphql-request package:

cd my-app
npm install --save graphql-request

First we need to setup our GraphQL client pointing to one of our GraphQL Content Delivery API endpoints, so inside the src folder create a file called datocms.js:

import { GraphQLClient } from "graphql-request";
export function request({ query, variables, includeDrafts, excludeInvalid }) {
  const headers = {
    authorization: `Bearer ${import.meta.env.VITE_CMS_DATOCMS_API_TOKEN}`
  };
  if (includeDrafts) {
    headers['X-Include-Drafts'] = 'true';
  }
  
  if (excludeInvalid) {
    headers['X-Exclude-Invalid'] = 'true';
  }
  const client = new GraphQLClient('https://graphql.datocms.com/', { headers });
  return client.request(query, variables);
}

You can see we're using an environment variable starting with VITE_, so that it will be statically embedded into the client bundle. Vite is a build tool for Vue: the one we used just a moment ago to scaffold the app with create-vue. To avoid exposing secrets in the client bundle, only variables prefixed with VITE_ are available on the frontend

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

Now we can set the env variable inside a file called .env.local (which by default is ignored by git), and start the development server:

echo 'VITE_CMS_DATOCMS_API_TOKEN=YOUR-API-TOKEN' > .env.local
npm run dev

The setup is done, and we can now start fetching data from DatoCMS and use it inside our Vue.js application.

Next, go to src/App.vue and use the request function we just created on src/datocms.js to perform your first GrapQL query:

<script setup>
import { ref, onMounted } from 'vue'
import { request } from "./datocms";
const data = ref(null);
const error = ref(null);
const loading = ref(true);
const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {
  allBlogPosts(first: $limit) {
    title
  }
}`;
onMounted(async () => {
  try {
    data.value = await request({
      query: HOMEPAGE_QUERY,
      variables: {
        limit: 10
      }
    });
  } catch (e) {
    error.value = e;
  }
  loading.value = false;
})
</script>
<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Something bad happened</div>
    <div v-else>{{ data }}</div>
  </div>
</template>

The HOMEPAGE_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.

We also maintain vue-datocms, a Typescript-ready package designed to easy DatoCMS integration with Vue. It contains composables for using DatoCMS site search features and GraphQL subscription, and components for easily rendering responsive images and structured text.