Headless CMS for Nuxt.js

Hygraph is the ideal Headless CMS for Nuxt websites and applications. Read further to learn how our API-first CMS allows you to add components to your Nuxt apps in minutes and enable your website's content to be managed from a powerful CMS.

Step #1 - Setting up the Apollo Client

First, you need to set up Apollo Client in a Nuxt.js application. Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL.

This setup involves creating an ApolloClient instance, which requires a HttpLink to specify the GraphQL API endpoint and an InMemoryCache for caching the query results. This configuration ensures that your Nuxt.js app can communicate with the GraphQL server efficiently, handling data fetching and caching seamlessly.

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client/core'

export default ({ env }) => {
  const httpLink = new HttpLink({
    uri: 'YOUR_GRAPHQL_ENDPOINT', // Replace with your GraphQL endpoint
  })

  const cache = new InMemoryCache()

  const apolloClient = new ApolloClient({
    link: httpLink,
    cache,
  })

  return apolloClient
}

Step #2 - Fetching the content and using it in Nuxt.js component

Now, you can use the Apollo Client within a Nuxt.js Vue component. It employs the useQuery hook from @vue/apollo-composable to execute a GraphQL query. This hook fetches data from the GraphQL server and returns the query results.

In this example, the query GetPosts retrieves posts data, which is then rendered in the template through a Vue computed property. The component iterates over the fetched posts and displays each post's title in a list.

<template>
  <div>
    <h1>Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
import gql from 'graphql-tag'
import { useQuery } from '@vue/apollo-composable'

export default {
  setup() {
    const { result } = useQuery(gql`
      query GetPosts {
        posts {
          id
          title
        }
      }
    `)

    const posts = computed(() => result.value ? result.value.posts : [])

    return { posts }
  }
}
</script>

Start building with Nuxt.js and Hygraph

We made it really easy to set up your project in Hygraph and use our GraphQL API within your Nuxt project.

Quickstart

Check out our docs to see how you can quickly set up your Hygraph project and enable the content API for your Nuxt website or app.

Get Started

Learn GraphQL

Hygraph is GraphQL-native Headless CMS offers precise data retrieval, minimizing over-fetching and optimizing efficiency.

Read the Guide

Examples

Look at some of the example projects to see Hygraph in action.

See Examples

Why Hygraph

Choosing Hygraph for your Nuxt project

Integrating a GraphQL-native headless CMS with a Nuxt.js application offers substantial benefits for both developers and content editors. For developers, it streamlines the process of fetching and managing content, as GraphQL allows for precise querying, reducing over-fetching and under-fetching issues. This results in a more efficient and performant application.

Content editors, on the other hand, benefit from the flexibility and ease of use provided by a headless CMS. They can manage content independently of the presentation layer, ensuring a more focused and intuitive editing experience. This separation of concerns not only enhances productivity but also enables a more agile content update process, facilitating a smoother collaboration between developers and content teams.

Developer Experience

We try to be the most un-opinionated CMS on the market with a wide collection of open source example projects to get you started.

Headless CMS

As a headless CMS (i.e. API based content management), you can be as modular and flexible as you need. We even support multiplatform content management.

Management API

Hygraph boasts a flexible and powerful management API to manage your content and schema, as well as a blazing fast content API.

Get started for free, or request a demo to discuss larger projects

Contact sales Get started