nuxt-convex 0.0.1 → 0.0.2

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-convex",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "configKey": "convex",
   "compatibility": {
     "nuxt": ">=3.0.0"

package/dist/module.mjs

@@ -6,7 +6,7 @@ import { consola } from 'consola';
 import { defu } from 'defu';
 import { join } from 'pathe';
 
-const version = "0.0.1";
+const version = "0.0.2";
 
 const log = consola.withTag("nuxt:convex");
 const module$1 = defineNuxtModule({
@@ -33,9 +33,11 @@ const module$1 = defineNuxtModule({
       { url: config.url }
     );
     addPlugin({ src: resolve("./runtime/plugin.client"), mode: "client" });
-    addImports({ name: "useConvexUpload", from: resolve("./runtime/composables/useConvexUpload") });
+    addImports([
+      { name: "useConvexUpload", from: resolve("./runtime/composables/useConvexUpload") }
+    ]);
     setupConvexApiAlias(nuxt);
-    setupConvexClient(nuxt);
+    setupConvexClient(nuxt, resolve);
     if (config.storage) {
       await setupConvexStorage(nuxt, resolve);
     }
@@ -55,13 +57,14 @@ function resolveConfig(options) {
   const url = options.url || process.env.CONVEX_URL || process.env.NUXT_PUBLIC_CONVEX_URL || "";
   return defu(options, { url, storage: false });
 }
-function setupConvexClient(nuxt, _resolve) {
+function setupConvexClient(nuxt, resolve) {
   const template = addTemplate({
     filename: "convex/client.mjs",
     getContents: () => `// Auto-generated by nuxt-convex
 import { inject } from 'vue'
 import { CONVEX_INJECTION_KEY } from '@convex-vue/core'
-export { useConvexQuery, useConvexMutation, useConvexAction } from '@convex-vue/core'
+export { useConvexMutation, useConvexAction } from '@convex-vue/core'
+export { useConvexQuery } from '${resolve("./runtime/composables/useConvexQuery")}'
 
 // Get the Convex client - MUST be called during component setup
 export function useConvex() {
@@ -76,8 +79,23 @@ export function useConvex() {
     filename: "types/convex.d.ts",
     getContents: () => `// Auto-generated by nuxt-convex
 import type { ConvexClient } from 'convex/browser'
+import type { FunctionReference, FunctionArgs, FunctionReturnType } from 'convex/server'
+import type { AsyncData, AsyncDataOptions } from 'nuxt/app'
+import type { MaybeRefOrGetter } from 'vue'
+
 declare module '#convex' {
-  export { useConvexQuery, useConvexMutation, useConvexAction } from '@convex-vue/core'
+  export { useConvexMutation, useConvexAction } from '@convex-vue/core'
+
+  export interface UseConvexQueryOptions<T> extends Omit<AsyncDataOptions<T>, 'transform' | 'default'> {
+    ssr?: boolean
+  }
+
+  export function useConvexQuery<Query extends FunctionReference<'query'>>(
+    query: Query,
+    args: MaybeRefOrGetter<FunctionArgs<Query>>,
+    options?: UseConvexQueryOptions<FunctionReturnType<Query>>
+  ): Promise<AsyncData<FunctionReturnType<Query> | null, Error | null>>
+
   export function useConvex(): ConvexClient
 }
 `

package/dist/runtime/composables/useConvexQuery.d.ts

@@ -0,0 +1,30 @@
+import type { FunctionArgs, FunctionReference, FunctionReturnType } from 'convex/server';
+import type { AsyncData, AsyncDataOptions } from 'nuxt/app';
+import type { MaybeRefOrGetter } from 'vue';
+type QueryReference = FunctionReference<'query'>;
+export interface UseConvexQueryOptions<T> extends Omit<AsyncDataOptions<T>, 'transform' | 'default'> {
+    /**
+     * Enable server-side data fetching.
+     * @default true
+     */
+    ssr?: boolean;
+}
+/**
+ * Convex query composable with SSR support.
+ *
+ * By default, fetches data on the server (SSR) and subscribes to real-time updates on the client.
+ * Set `ssr: false` to disable server-side fetching and use client-only mode.
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * // SSR + real-time (default)
+ * const { data, pending, error } = await useConvexQuery(api.tasks.list, {})
+ *
+ * // Client-only mode
+ * const { data } = await useConvexQuery(api.tasks.list, {}, { ssr: false })
+ * </script>
+ * ```
+ */
+export declare function useConvexQuery<Query extends QueryReference>(query: Query, args: MaybeRefOrGetter<FunctionArgs<Query>>, options?: UseConvexQueryOptions<FunctionReturnType<Query>>): Promise<AsyncData<FunctionReturnType<Query> | null, Error | null>>;
+export {};

package/dist/runtime/composables/useConvexQuery.js

@@ -0,0 +1,119 @@
+import { useAsyncData, useNuxtApp, useRuntimeConfig } from "#imports";
+import { CONVEX_INJECTION_KEY } from "@convex-vue/core";
+import { inject, onScopeDispose, ref, toValue, watch } from "vue";
+export async function useConvexQuery(query, args, options = {}) {
+  const nuxtApp = useNuxtApp();
+  const config = useRuntimeConfig();
+  const convexUrl = config.public.convex?.url;
+  const client = import.meta.client ? inject(CONVEX_INJECTION_KEY) : null;
+  if (!convexUrl) {
+    console.warn("[nuxt-convex] No Convex URL configured");
+    return createErrorAsyncData(new Error("Convex URL not configured"));
+  }
+  const ssrEnabled = options.ssr ?? true;
+  const shouldUseSSR = ssrEnabled && (import.meta.server || nuxtApp.isHydrating);
+  if (shouldUseSSR) {
+    return useConvexQuerySSR(query, args, options, convexUrl, client);
+  }
+  return useConvexQueryClient(query, args, client);
+}
+async function useConvexQuerySSR(query, args, options, convexUrl, client) {
+  const queryName = query._name ?? "unknown";
+  const sortedArgs = sortObjectKeys(toValue(args));
+  const key = `convex:${queryName}:${JSON.stringify(sortedArgs)}`;
+  const asyncData = await useAsyncData(
+    key,
+    async () => {
+      const { fetchQuery } = await import("convex/nextjs");
+      return fetchQuery(query, toValue(args), { url: convexUrl });
+    },
+    { ...options, server: options.ssr ?? true }
+  );
+  if (import.meta.client) {
+    setupClientSubscription(query, args, {
+      data: asyncData.data,
+      error: asyncData.error,
+      pending: asyncData.pending,
+      status: asyncData.status
+    }, client);
+  }
+  return asyncData;
+}
+function useConvexQueryClient(query, args, client) {
+  const data = ref(null);
+  const error = ref(null);
+  const pending = ref(true);
+  const status = ref("pending");
+  const state = { data, error, pending, status };
+  const { refresh } = setupClientSubscription(query, args, state, client);
+  return {
+    data,
+    pending,
+    error,
+    status,
+    refresh,
+    execute: refresh,
+    clear: () => {
+      data.value = null;
+      error.value = null;
+      pending.value = false;
+      status.value = "idle";
+    }
+  };
+}
+function setupClientSubscription(query, args, state, client) {
+  if (!client) {
+    console.warn("[nuxt-convex] Convex client not found. Real-time updates disabled.");
+    state.pending.value = false;
+    state.status.value = "error";
+    state.error.value = new Error("Convex client not found");
+    return { refresh: async () => {
+    } };
+  }
+  let unsubscribe = null;
+  const subscribe = () => {
+    unsubscribe?.();
+    const currentArgs = toValue(args);
+    unsubscribe = client.onUpdate(query, currentArgs, (result) => {
+      if (result !== void 0) {
+        state.data.value = result;
+        state.pending.value = false;
+        state.status.value = "success";
+      }
+    });
+  };
+  subscribe();
+  watch(() => toValue(args), subscribe, { deep: true });
+  onScopeDispose(() => unsubscribe?.());
+  return {
+    refresh: async () => {
+      state.pending.value = true;
+      subscribe();
+    }
+  };
+}
+function createErrorAsyncData(err) {
+  return {
+    data: ref(null),
+    pending: ref(false),
+    error: ref(err),
+    status: ref("error"),
+    refresh: async () => {
+    },
+    execute: async () => {
+    },
+    clear: () => {
+    }
+  };
+}
+function sortObjectKeys(obj) {
+  if (obj === null || typeof obj !== "object")
+    return obj;
+  if (Array.isArray(obj))
+    return obj.map(sortObjectKeys);
+  const sorted = {};
+  for (const key of Object.keys(obj).sort()) {
+    sorted[key] = sortObjectKeys(obj[key]);
+  }
+  return sorted;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-convex",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "packageManager": "pnpm@10.15.1",
   "description": "Nuxt module for Convex - reactive backend with real-time sync, file storage, and auto-imports",
   "author": "onmax",
@@ -72,6 +72,7 @@
     "@nuxt/module-builder": "catalog:build",
     "@nuxt/test-utils": "catalog:test",
     "@types/node": "catalog:types",
+    "@vue/test-utils": "catalog:test",
     "bumpp": "catalog:",
     "convex": "catalog:convex",
     "eslint": "catalog:lint",