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.
If you need to generate an API Key for your project, check out our docs that describe that process.
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.
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!
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:
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.
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.
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
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.
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:
Again, this query must be defined in your TakeShape project schema. Learn more here.
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:
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 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.
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:
Read the @nuxtjs/apollo documentation for more information on incorporating GraphQL queries into your build process.
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.