Working with Nuxt

Integrating your GraphQL API project into your Nuxt project is simple. But first, you'll need your project's ID, as well as an API Key.

Connecting your project

To connect to your project, you need your API Endpoint and an API key.

If you haven't created a project yet, follow this guide to do so.

If you already have a project, your API Endpoint will be in the admin UI. In the home tab, look for the "Useful Snippets" section.

Copy the API Endpoint and save it somewhere secure.

To get an API Key, you'll have to create one. Read our docs on creating an API Key here.

Creating your Nuxt project

Follow Along

Follow along with this guide by checking out our starter project repo. Our starters let you instantly deploy a pre-configured project.

To create a project from scratch, navigate to the folder you'd like your project directory to be stored in. Execute the following command:

npx create-nuxt-app <project-name>

After answering the questions it asks, which will configure your project, you can change directories into the project folder or open the project folder in your favorite IDE.

For more information on creating a Nuxt project, check out the official Nuxt documentation.

Adding GraphQL functionality

The simplest way to include GraphQL functionality in your Nuxt app is to install @nuxtjs/apollo, which is a wrapper module for the official vue-apollo package.

To install with NPM:

npm install --save @nuxtjs/apollo

To install with Yarn:

yarn add @nuxtjs/apollo

To make Apollo send its requests to the project's GraphQL API, you'll have to modify your nuxt.config.js file. It should include the code below:

nuxt.config.js
modules: ['@nuxtjs/apollo'],
  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: `${YOUR_API_ENDPOINT}`,
        httpLinkOptions: {
          credentials: 'same-origin',
          headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${YOUR_API_KEY}`
          }
        }
      }
    }
  }

With the above code, you're telling Apollo to send its queries to your custom endpoint. The most relevant lines of code above are the httpEndpoint, and the Authorization in the header.

For authorization to use your API, you'll need to add your API Key to the headers as a Bearer token.

Don't have your API Endpoint or API Key? Here's how to get them.

Caution

We highly advise you to hide your API Key and API Endpoint in environment variables. Otherwise, if your code is available publicly anywhere, your key and ID will be exposed.

Creating your GraphQL queries

Once you have @nuxtjs/apollo installed, you'll have to make an apollo folder in the root directory of your project. Within the apollo folder, you'll want a folder called queries.

Now your project knows where to look for your custom GraphQL queries. We can define our queries in our project schema. Learn more about creating queries by reading or docs on the subject.

If you already have your queries defined in your project's schema, you're ready to make a query file.

In apollo/queries/, make a file with the extension .gql. You can name the file whatever you want.

In this file, you can structure a GraphQL query. This query will be sent to your project every time you call it from your code. For example, you may have a query called getProductList to retrieve a list of products from an ecommerce backend.

Your query might look like this:

{
  getProductList{
    items{
        _id
        name
        price
    }
  }
}

Again, this query must be defined in your project schema. Learn more here.

Adding queries to your build process

Once everything is set up, you'll have access to apollo from anywhere within your project.

To build your component using data from a GraphQL query made to your project, you must first import your query in your component's <script> section. For example:

ExampleComponent.vue

<script>
import getProductList from '../apollo/queries/getProductList.gql'
</script>

Next, create a default export of an object with an apollo property as shown in the example below. The properties defined within apollo will be your queries.

index.vue
<script>
import getProductList from '../apollo/queries/getProductList.gql'
export default {
    apollo: {
      getProductList: {
        query: getProductList
      }
    }
  }
</script>

The query property will take the query you imported in the first line of your <script> section. This query will be run, and will make a request to your project's GraphQL API.

You can now access the result of your query in your template by referencing the name of the property you passed the query to. In our example, that property is getProductList. For example:

index.vue
<template>
  <div>
    <h1>Products:</h1>
    <div v-if="getProductList">
      <ul>
        <li v-for="product in getProductList.items" :key="product._id">
          {{ product.name }}: {{ product.price }}
        </li>
      </ul>
    </div>
    <div v-else>
      Testing...
    </div>
  </div>
</template>

<script>
import getProductList from '../apollo/queries/getProductList.gql'
export default {
    apollo: {
      getProductList: {
        query: getProductList
      }
    }
  }
</script>

Read the @nuxtjs/apollo documentation for more information on incorporating GraphQL queries into your build process.

To run your project, enter npm run dev into the command line. It may take some time for the server to spin up, but this is the page you should see:

Working with Nuxt

Connecting your project​

Creating your Nuxt project​

Adding GraphQL functionality​

Creating your GraphQL queries​

Adding queries to your build process​

Further reading​

Connecting your project

Creating your Nuxt project

Adding GraphQL functionality

Creating your GraphQL queries

Adding queries to your build process

Further reading