This sample repo uses the Nuxt Mountains API and StepZen's @rest
directive to fetch a list of mountains and expose a GraphQL API to our Nuxt frontend.
NuxtMountains.vue
index.vue
nuxt.config.js
Before you get started, you'll need to get yourself a StepZen account and install the StepZen CLI.
Clone repo and install dependencies.
git clone https://github.com/stepzen-samples/stepzen-nuxt.git
cd stepzen-nuxt
npm i
Start the development server on localhost:3000
.
npm run dev
You will initially see an error, Cannot read property 'mountains' of undefined
, because we haven't included our StepZen endpoint yet. See the next section for instructions to include your endpoint.
Deploy your API with stepzen start
.
stepzen start
Send the following test query to verify your endpoint is working.
query getMountains {
mountains {
title
}
}
This also deployed our API to https://${username}.stepzen.net/stepzen-nuxt-tutorial/users/__graphql
where ${username}
is your StepZen account name.
Note: Make sure to run cp .env.example .env
and fill in the environment details using the output from the "Deploy API" step (stepzen start
) and your StepZen account page as a reference.
Your .env
file should look similar to:
STEPZEN_API_KEY=foousername+9001::1e9e17d05711e0f09271db4888b66e364df638fe0c77ea33984599c5b87f9427
STEPZEN_ENDPOINT=https://foousername.stepzen.net/stepzen-nuxt-tutorial/users/__graphql
For more information around the GraphQL API, please look at the mountains.graphql
file in our schema
directory for our Mountain
interface and Query
type.
NuxtMountains.vue
We have a directory for components
with a NuxtMountains.vue
file. This contains our query to fetch the mountain data from the NuxtJS Mountain API.
The endpoint used in fetch()
is the API call that needs to be made in a serverless function to protect your StepZen keys.
index.vue
Our Nuxt frontend contains an index.vue
file for our home page inside a directory for pages
. Our root component renders a title to the home page.
// pages/index.vue
<template>
<div>
<h1>StepZen Nuxt Tutorial</h1>
<NuxtMountains />
</div>
</template>
nuxt.config.js
Adding true
for components
lets you use any components inside the components
directory without needing to import the components.
export default {
components: true
}