nuxt-supabase-query-as-async-data

Nuxt Supabase Query As AsyncData

A Nuxt module that enhances developer experience when using Supabase by enabling fluent queries (e.g., supabase.from(...).select(...)) to integrate directly with useAsyncData() via a convenient .asAsyncData() method—no manual wrapping required.

🧭 Introduction

nuxt-supabase-query-as-async-data lets you fluently convert Supabase query chains into Nuxt's useAsyncData() calls by appending .asAsyncData(key). This simplifies server-side rendering and data fetching with minimal boilerplate.

🚀 Features

• Adds .asAsyncData() to Supabase query builders
• Wraps seamlessly with useAsyncData()
• Zero-config plugin—no imports needed
• Full TypeScript support and IntelliSense

📦 Installation

# Using npm
npm install nuxt-supabase-query-as-async-data

# Using yarn
yarn add nuxt-supabase-query-as-async-data

# Using pnpm
pnpm add nuxt-supabase-query-as-async-data

📦 Peer Dependency

This module depends on @supabase/postgrest-js. If you're already using:

• @supabase/supabase-js, or
• the @nuxtjs/supabase module,

...you’re good to go. Otherwise, install it manually:

npm install @supabase/postgrest-js

🧩 Usage

Register the module in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    'nuxt-supabase-query-as-async-data'
  ]
})

Once installed, Supabase queries gain the .asAsyncData() method automatically:

const { data, pending, error } = await supabase
  .from('users')
  .select('*')
  .eq('id', 1)
  .asAsyncData('user-query');

Equivalent to:

const { data, pending, error } = await useAsyncData(
  'user-query',
  () => supabase.from('users').select('*').eq('id', 1)
);

📘 TypeScript Support

This module uses declaration merging to provide type safety and auto-completion for .asAsyncData() on all compatible Supabase query builders.

🛠 Requirements

• Nuxt 3
• Supabase client v2+
• @supabase/postgrest-js

🤝 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

• Fork the repository
• Create a new branch: git checkout -b feature/my-feature
• Make your changes and commit: git commit -am 'Add my feature'
• Push to your fork: git push origin feature/my-feature
• Open a Pull Request

📄 License

This project is licensed under the MIT License.

Made with ❤️ by Leynier Gutiérrez González