Headless CMS for Vue

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

Step #1 - Construct your query and fetch the data from Hygraph

You should first set up the GraphQL query using Apollo's gql template literal. The useQuery function from Apollo Client is used to execute this query. The query response is stored in a reactive ref variable named products. The loading and error states are also tracked to handle the query's loading and error states.

Note that you should first configure the GraphQL endpoint in your Apollo Client configuration.

<template>
  <div>
    <!-- Vue component template goes here -->
  </div>
</template>

<script>
import { ref } from 'vue';
import { gql, useQuery } from '@apollo/client/core';

const GET_PRODUCTS_QUERY = gql`
  query GetProducts {
    products {
      name
      description
      image
      availability
      slug
    }
  }
`;

export default {
  setup() {
    const products = ref(null);
    const { loading, error } = useQuery(GET_PRODUCTS_QUERY, {
      onCompleted(data) {
        products.value = data.products;
      }
    });

    return { products, loading, error };
  }
};
</script>

Step #2 - Using the fetched data in a Vue component

Now you can set up the Vue component template that uses the data fetched from the GraphQL query. It checks for loading and error states and displays the relevant messages. Once the data is loaded, it iterates over the products array and displays each product's details, such as name, description, image, and availability, using Vue's template syntax.

This approach effectively demonstrates how data fetched from a GraphQL API can be seamlessly integrated and rendered in a Vue application.

<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-if="error">An error occurred: {{ error.message }}</div>
    <div v-for="product in products" :key="product.slug">
      <h2>{{ product.name }}</h2>
      <p>{{ product.description }}</p>
      <img :src="product.image" :alt="product.name">
      <p>Availability: {{ product.availability }}</p>
    </div>
  </div>
</template>

<script>
// The script part remains the same as in the Step #1
</script>

Start building with Vue and Hygraph

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

Quickstart

Check out our docs to see how you can quickly set up your Hygraph project and enable the content API for your Vue 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 Vue project

GraphQL is a great choice for any single-page application or website you're building because the single endpoint and intuitive query syntax returns multiple data points. Working with Hygraph is quick and easy with your favorite Vue GraphQL client.

Using a GraphQL-native headless CMS with Vue benefits developers and content editors alike. Developers enjoy streamlined data fetching through GraphQL's structured queries, enhancing code efficiency and maintainability within Vue's reactive framework. Content editors get a user-friendly platform for content management, independent of the front-end technology.

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