Nuxt + Hygraph

#Overview

Nuxt is a free, open-source Vue framework. You can use it to create type-safe, performant and production-grade full-stack web applications and websites intuitively.

#Creating a new Nuxt app

To start, we need to initialize a new Nuxt project. Open up your terminal, navigate to where you want your project, and run the following command:

npx nuxi@latest init my-nuxt-project

The interactive setup will ask you questions to configure your project. Initialize with the following answers:

• Current nuxt version, Ok to proceed: Yes (y)
• Choose package manager: npm, pnpm, yarn, or bun (the guide will use yarn)
• Anonymous usage data collection: Yes or No
• Initial git repository: Yes or No

Change directory into your new project from your terminal:

cd my-nuxt-project

The interactive setup should install dependencies automatically using the package manager - yarn, pnpm, npm - of your choosing, but you can use the install command if needed:

npm install

Start your Nuxt app in development mode:

npm run dev

Your new Nuxt app is now available in the browser at http://localhost:3000/

Nuxt

#Configure Hygraph assets to work with Nuxt

To work with Nuxt image module, we need to specify Hygraph as an image provider by adding the base URL in the nuxt.config.ts file.

Your config file should contain the following code:

// nuxt.config.ts
export default defineNuxtConfig({
... other configuration parameters here
  image: {
    providers: {
      hygraph: {
        baseurl: "https://media.graphassets.com"
      }
    }
  }
})

In the above config, we are using Hygraph as our image source.

#Getting data from Hygraph

Now that you have created your Nuxt project, it's time to add some data from Hygraph. Start by cloning our demo Hygraph project:

After cloning, you will have a simple project that contains one content model called Page that contains fields for Title, Slug, and Body; and one content entry.

If you navigate to the Schema builder and click on the Page model, you will see this:

Demo project - Page model

And if you navigate to the Content editor and view the sample entry details, you'll see this:

Demo project - Sample content entry

#Public content API

Before you can connect Nuxt to Hygraph, you will need to configure Public Content API access permissions for unauthenticated requests.

To do this, go Project settings > Access > API Access > Public content API in your Hygraph project, scroll to find the Content Permissions box that reads Would you like us to initialize some defaults?, and click Yes, initialize defaults:

Public Content API permissions

Finally, copy the High Performance Content API endpoint from Project settings > Access > API Access > Endpoints. You use it to connect Nuxt to Hygraph later on.

#Testing a query in the API playground

Next, you should test if you can fetch the information in the sample content entry that we showed you earlier. To do this, navigate to the API Playground in your project and use the following query:

If you execute the query, the response should fetch the sample query in the demo project you cloned.

#Generating Hygraph content with Nuxt

After enabling API access, you can start using the Pages query with your Nuxt app to render content.

#Adding Tailwind CSS to Nuxt

Use the terminal to go back to your Nuxt app, and type the following command:

npm install @nuxtjs/tailwindcss

This will install Tailwind CSS, so you have a few base styles to use with your content.

#Installing Nuxt GraphQL Client

The next step is to add the nuxt-graphql-client module.

This helps with codegen for GraphQL functionality and types, and provides an easy way to use GraphQL API's in Nuxt.

To install the client, type the following command:

npm install nuxt-graphql-client

After the installation finishes, add the following to your nuxt.config.ts file:

// nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss','nuxt-graphql-client']
})

The nuxt-graphql-client module offers some convenient helpers for typing and querying.

Add the following to your .env file so the module knows how to connect to Hygraph for the introspection of the schema to make types, and to be able to query.

GQL_HOST=https://<HYGRAPH_CDN_LOCATION>.cdn.hygraph.com/content/<ID>/master

Want to see Nuxt and Hygraph in action? Watch a quick video on how to connect Nuxt and Hygraph:

#Adding GraphQL queries

Now that you have all the packages installed, create a queries folder and add your GraphQL queries in there as files with a .gql extension:

Query all pages - file location & name: ./queries/pages.gql

# File name: pages.gql
# File location ./queries/pages.gql
query Pages {
  pages {
    title
    slug
    body {
      text
    }
  }
}

Query single page by slug - file location & name: ./queries/page.gql

# File name: page.gql
# File location: ./queries/page.gql
query Page($slug: String!) {
  page(where: { slug: $slug }) {
    title
    body {
      text
    }
  }
}

The nuxt-graphql-client module finds this folder and automatically creates types and convenience functions for all queries it finds.

#Getting a list of pages for the homepage

After adding your .env file, go to your index.vue file in the pages directory and add the following code:

Homepage

#Creating dynamic page routes with Nuxt

Now, that we have a list of pages in our homepage, we need to create a dynamic route for each page. To do this, create a new directory in the pages directory called page and a file called [slug].vue inside this directory.

Add the following code:

#Code overview

The template section of our Vue component contains the markup that renders our content on the homepage.

In the script section, we use the GqlPage() function to ask Hygraph with our Page query to fetch the title, slug, and body.

Dynamic page

Congratulations! You have a homepage and a dynamic page route to render all pages and their content.