Skip to main content

Use TakeShape with Nuxt

As with most modern SSG's, TakeShape is compatible with Nuxt! Integrating your TakeShape project into your Nuxt project is very simple. But first, you'll need your TakeShape project's ID, as well as an API Key.

Getting an API Key#

If you need to generate an API Key for your project, check out our docs that describe that process.

Getting your Project ID#

You can find your project’s ID in its URL in the web client. Navigate to your project dashboard by logging into the web client. You can find and copy your project ID in the lower left.

Connecting your project#

If you already know your Project ID, and have access to an API Key with dev or higher permissions (see our API Key docs for more information), then you're ready to get started!

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 TakeShape, 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: `https://api.takeshape.io/project/${YOUR_PROJECT_ID}/graphql`,
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.

TakeShape's API endpoint for your project is the same URL for your project page in the webclient, with /graphql affixed to the end. This is one of the main reasons you need to have your project ID.

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 Project ID or API Key? Here's how to get them.

Caution

We highly advise you to hide your API Key and Project ID 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 on TakeShape, in our schema. Learn more about creating queries by reading or docs on the subject.

If you already have your queries defined in your TakeShape 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 TakeShape project every time you call it from your code. For example, you may have a query called getItemList to retreive an arbitrary set of items.

Your TakeShape schema might be connected to an external provider, which it queries for all of your items. The getItemList query must exist in your schema for you to call it from your Nuxt project.

Your query might look like this:

"query.gql
{
getItemList {
items {
_id
title
author {
name
}
}
}
}

Again, this query must be defined in your TakeShape 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 TakeShape, you must first import your query in your component's <script> section. For example:

ExampleComponent.vue
<script>
import getItems from '../apollo/queries/getItems.gql'
</script>

Next, you need to do a default export of an an object containing a property called apollo, with its own property that can be named anything, but must contain an object with a property called query. 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 TakeShape project's schema.

ExampleComponent.vue
<script>
import getItems from '../apollo/queries/getItems.gql'
export default {
apollo: {
getItemList: {
query: getItems
}
}
}
</script>

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 getItemList. For example:

ExampleComponent.vue
<template>
<div>
<div v-if="getItemList">
<p>
{{ getItemList.items[0].title }}
</p>
</div>
<div v-else>
Loading...
</div>
</div>
</template>
<script>
import getItems from '../apollo/queries/getItems.gql'
export default {
apollo: {
getItemList: {
query: getItems
}
}
}
</script>

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

Further reading#

You're all set! You can run these GraphQL queries in your Nuxt templates, or call them as part of your dynamic routes. To learn more about this process, you can visit the Nuxt docs. Or, you can read our article about it!

Still confused? Ask for help! We're eager to solve your problem.