Nuxt.js Integration Guide

This tutorial will guide you through the steps required to pull content from LexasCMS into your Nuxt.js project.

The tutorial assumes that you’re using create-nuxt-app and that you have a basic understanding of Nuxt.js and its concepts. If you’re new to Nuxt.js, we highly recommend checking out the official guides before proceeding.

Create your website

Create a new Nuxt.js application by running one of the following commands:

# If using Yarn
yarn create nuxt-app nuxtjs-lexascms-tutorial

# If using NPM
npx create-nuxt-app nuxtjs-lexascms-tutorial

Navigate into your website directory

After you have created your website, navigate into the websites directory.

cd nuxtjs-lexascms-tutorial

Install graphql-request package

In this guide we’re going to be requesting data from LexasCMS using the GraphQL content delivery API.

There are many packages that you can choose from to fetch content from LexasCMS’s GraphQL API. Some of the most popular options include Apollo, axios and graphql-request.

For this guide, we’re going to be using graphql-request. Install the package (and its graphql peer dependency) by running one of the following commands:

# If using Yarn
yarn add graphql-request graphql

# If using NPM
npm install --save graphql-request graphql

Create LexasCMS request module

Next we’re going to create a small module which can be imported whenever we need to request some content from LexasCMS.

In the root of your websites directory, create a new directory called lib and then within the new directory create a file named lexascms.js with the following contents:

import { request as graphqlRequest } from "graphql-request";

export function request({ query, variables }) {
  // Define space ID
  // Outside of this tutorial, you would replace this with your own
  // space ID
  const spaceId = 'bc4c2f6d-7297-4857-8bb2-dd55e80bf5e6';
  // Define LexasCMS API Endpoint
  const apiEndpoint = `https://${spaceId}.spaces.lexascms.com/delivery/graphql`;
  // Send request
  return graphqlRequest(apiEndpoint, query, variables);
}

The request method exported from this module simply takes the provided query and variables, and then constructs a request which is sent to LexasCMS’s GraphQL content delivery API.

The response is then returned, allowing you to display and use the content however you choose.

Fetch your content

You should now be able to import the module that you created in the previous step and use it to fetch content from LexasCMS.

Open the pages/index.vue file and replace the contents with the following code:

<template>
  <div>
    <h1>My Nuxt.js Blog</h1>
    <p>Welcome to my Nuxt.js blog.</p>
    <ul>
      <li v-for="blogPost in blogPostCollection.items" :key="blogPost.title">
        {{ blogPost.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import { request } from '~/lib/lexascms';

const blogPostsQuery = `
  query {
    blogPostCollection {
      items {
        title
      }
    }
  }
`;

export default {
  async asyncData() {
    // Fetch blog posts from LexasCMS
    return request({ query: blogPostsQuery });
  }
}
</script>

This code does the following:

• Fetches your blog posts from LexasCMS using the blogPostCollection query
• Renders a list of blog post titles into your page components template

Summary

In this tutorial, you’ve learned how simple it is to manage content on your website using a combination of LexasCMS and Nuxt.js.

If you would like to try it out yourself, please click here to request a free trial.