⚡ Nuxt GQL Pulse

Nuxt GQL Pulse is a module I built to help developers monitor and visualize GraphQL requests in Nuxt apps in real-time. It provides quick insights into queries and mutations, tracks response times, and helps debug GraphQL interactions efficiently.

The module integrates seamlessly with Nuxt 3 projects and gives a lightweight, developer-friendly overlay for monitoring API activity without adding heavy dependencies.

🔧 Technologies Used

• Nuxt 3 – Framework for modern Vue applications
• GraphQL – For API queries and mutations
• Vue 3 / Composition API – Reactive UI components for displaying requests
• TypeScript (optional) – For type-safe development
• Tailwind CSS / SCSS – For styling the module interface

🧠 Why I Built It

GraphQL is powerful but can be tricky to debug, especially in larger Nuxt projects. I wanted a simple way to:

• See real-time GraphQL requests and responses
• Track latency and errors during development
• Integrate monitoring without changing existing code
• Make a lightweight, reusable module for any Nuxt project

The result is Nuxt GQL Pulse — easy to set up, extend, and use in development environments.

🚀 Getting Started

Install the module and peer deps:

npm install nuxt-gql-pulse graphql graphql-request

Add it to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['nuxt-gql-pulse'],

  gqlPulse: {
    clients: {
      rickandmortyapi: {
        endpoint: 'https://rickandmortyapi.com/graphql',
      },
    },
  },
})

That’s it! You can now use Nuxt GQL Pulse in your Nuxt app ✨

Example: Query characters from Rick & Morty API

<script setup lang="ts">
const query = /* GraphQL */ `
  query {
    characters(page: 1) {
      results {
        id
        name
        status
        species
      }
    }
  }
`

const { data } = await useAsyncGqlPulse<{
  characters: {
    results: { id: string; name: string; status: string; species: string }[]
  }
}>({
  client: 'rickandmortyapi',
  document: query,
})
</script>

<template>
  <div>
    <h2>Rick & Morty Characters</h2>
    <ul>
      <li v-for="character in data.characters.results" :key="character.id">
        {{ character.name }} — {{ character.status }} ({{ character.species }})
      </li>
    </ul>
  </div>
</template>

Start your Nuxt app:

npm run dev

You’ll now see a real-time overlay tracking your GraphQL queries and mutations in development mode.

✅ Features

• Real-time GraphQL request monitoring
• Query and mutation logs
• Response times and error tracking
• Easy integration with Nuxt 3
• Lightweight and developer-friendly

Explore the module or contribute on GitHub: nuxt-gql-pulse