@merkaly/nuxt 0.9.3 → 0.10.0

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.14.0"
   },
-  "version": "0.9.3",
+  "version": "0.10.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/app.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useRoute } from "#app";
-import { useAuth, watchOnce, addRouteMiddleware, useNuxtApp } from "#imports";
+import { computed } from "vue";
+import { useAuth, useTenant, watchOnce, addRouteMiddleware, useNuxtApp } from "#imports";
 import AuthMiddleware from "../middleware/auth";
 import { useNavigation } from "../composables/useNavigation";
 import AuthError from "./auth/AuthError.vue";
@@ -8,8 +9,10 @@ import { useColorMode } from "@vueuse/core";
 import { Notivue, NotificationProgress, Notification, pastelTheme } from "notivue";
 const $route = useRoute();
 const { clear, error, isLoading, logout, retry } = useAuth();
+const { fromServer } = useTenant();
 const { hook } = useNuxtApp();
 useColorMode({ attribute: "data-bs-theme" });
+const blocking = computed(() => isLoading.value && !fromServer.value);
 watchOnce(isLoading, () => AuthMiddleware($route, $route));
 const { defer, regenerate } = useNavigation();
 addRouteMiddleware("navigation", (to) => defer(to), { global: true });
@@ -27,7 +30,7 @@ hook("page:finish", () => regenerate());
     </Notivue>
 
     <BApp>
-      <slot v-if="isLoading" name="loading" />
+      <slot v-if="blocking" name="loading" />
 
       <slot v-else-if="error" :clear="clear" :error="error" :logout="logout" :retry="retry" name="error">
         <AuthError :error="error" @logout="logout" @retry="retry" />

package/dist/runtime/components/input/InputAddress.d.vue.ts

@@ -81,8 +81,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     mode: PlaceTypes;
     disabled: boolean;
-    countries: string[];
     placeholder: string;
+    countries: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/InputAddress.vue.d.ts

@@ -81,8 +81,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     mode: PlaceTypes;
     disabled: boolean;
-    countries: string[];
     placeholder: string;
+    countries: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/composables/useApi.js

@@ -1,5 +1,5 @@
-import { reactive, ref } from "vue";
-import { useNuxtApp } from "#imports";
+import { getCurrentInstance, onServerPrefetch, reactive, ref } from "vue";
+import { useNuxtApp, useState } from "#imports";
 function useApi(callback) {
   const { $api } = useNuxtApp();
   const controller = new AbortController();
@@ -11,13 +11,17 @@ function useApi(callback) {
     return options;
   };
   const initialOptions = getOptions(params);
+  const nuxtApp = useNuxtApp();
+  const ssr = import.meta.server || nuxtApp.payload.serverRendered === true;
+  const key = `merkaly:api:${initialOptions.method}:${initialOptions.uri}:${JSON.stringify(initialOptions.query ?? {})}`;
   const loading = ref(false);
-  const data = ref(initialOptions.default?.());
-  const meta = ref({});
+  const data = ssr ? useState(`${key}:data`, () => initialOptions.default?.()) : ref(initialOptions.default?.());
+  const meta = ssr ? useState(`${key}:meta`, () => ({})) : ref({});
+  const prefetched = ssr ? useState(`${key}:prefetched`, () => false) : ref(false);
   const error = ref();
   const execute = async (args = {}) => {
-    Object.keys(args).forEach((key) => {
-      params[key] = args[key];
+    Object.keys(args).forEach((key2) => {
+      params[key2] = args[key2];
     });
     const currentOptions = getOptions(params);
     await $api(currentOptions.uri, {
@@ -32,7 +36,11 @@ function useApi(callback) {
     });
   };
   if (initialOptions.immediate) {
-    void execute();
+    if (import.meta.server && getCurrentInstance()) {
+      onServerPrefetch(() => execute().then(() => void (prefetched.value = true)));
+    } else if (!(nuxtApp.isHydrating && prefetched.value)) {
+      void execute();
+    }
   }
   return {
     abort: () => controller.abort(),

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

@@ -1,5 +1,8 @@
 export declare const useTenant: () => {
+    fromServer: import("vue").Ref<boolean, boolean>;
     isReady: import("vue").ComputedRef<boolean>;
-    setTenant: (value: string) => string;
+    setTenant: (value: string, options?: {
+        server?: boolean;
+    }) => void;
     tenant: import("vue").Ref<string, string>;
 };

package/dist/runtime/composables/useTenant.js

@@ -2,9 +2,14 @@ import { computed } from "vue";
 import { useState } from "#imports";
 export const useTenant = () => {
   const tenant = useState("tenant:id", () => "");
+  const fromServer = useState("tenant:server", () => false);
   const isReady = computed(() => Boolean(tenant.value));
-  const setTenant = (value) => tenant.value = value;
+  const setTenant = (value, options = {}) => {
+    tenant.value = value;
+    if (options.server) fromServer.value = true;
+  };
   return {
+    fromServer,
     isReady,
     setTenant,
     tenant

package/dist/runtime/plugins/api.global.js

@@ -1,66 +1,78 @@
-import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+import { defineNuxtPlugin, useRequestURL, useRuntimeConfig } from "#app";
 import { useAuth, useTenant } from "#imports";
 const GLOBAL_API_HEADER = "x-merkaly-global";
-export default defineNuxtPlugin(({ provide }) => provide("api", async (url, options = {}) => {
-  const { token } = useAuth();
-  const { tenant } = useTenant();
-  const { public: { merkaly } } = useRuntimeConfig();
-  const requiresTenant = options.requiresTenant ?? merkaly.auth0.requiresTenant;
-  if (!tenant.value && !options.global && requiresTenant) {
-    throw new Error(
-      `[api] Tenant context is required but not set for: ${url}
+function serverBaseURL(api, global) {
+  const prefix = global ? "" : (api.prefix ?? "").replace(/^\/+|\/+$/g, "");
+  return prefix ? `${api.url.replace(/\/+$/, "")}/${prefix}` : api.url;
+}
+export default defineNuxtPlugin(({ provide }) => {
+  const requestHost = import.meta.server ? useRequestURL().host : void 0;
+  if (import.meta.server && import.meta.dev && new URL(useRuntimeConfig().public.merkaly.api.url).hostname.endsWith(".test")) {
+    process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
+  }
+  provide("api", async (url, options = {}) => {
+    const { token } = useAuth();
+    const { tenant } = useTenant();
+    const { public: { merkaly } } = useRuntimeConfig();
+    const requiresTenant = options.requiresTenant ?? merkaly.auth0.requiresTenant;
+    if (!tenant.value && !options.global && requiresTenant) {
+      throw new Error(
+        `[api] Tenant context is required but not set for: ${url}
 This surface has requiresTenant: true. Possible causes:
   1. The request fired before the auth boot sequence completed (race condition).
   2. setTenant() was never called in this surface's auth plugin.
   3. The adapter should use { global: true } to bypass tenant enforcement.`
-    );
-  }
-  await $fetch(url, {
-    baseURL: "/api",
-    body: options?.body,
-    headers: {
-      authorization: token.value ? `Bearer ${token.value}` : "",
-      identity: tenant.value,
-      [GLOBAL_API_HEADER]: options.global ? "true" : "",
-      ...options?.headers
-    },
-    method: options?.method,
-    onRequest: async () => {
-      if (options.data) options.data.value = options.default?.();
-      if (options.meta) options.meta.value = {};
-      if (options.error) options.error.value = void 0;
-      if (options.loading) options.loading.value = true;
-      const result = await Promise.resolve(options?.onBeforeSend?.({ body: options.body, headers: options.headers, query: options.query })).then((res) => res).catch(() => false);
-      if (result === false) {
-        options.controller?.abort?.("Request aborted by onBeforeSend");
-      }
-    },
-    onRequestError: async ({ error, response, request }) => {
-      await options.onFatal?.(error);
-      if (options.error) options.error.value = error;
-      await options?.onComplete?.({ response, request });
-      if (options.loading) options.loading.value = false;
-    },
-    onResponse: async ({ response, request }) => {
-      const { status, _data, headers } = response;
-      const { data, meta } = _data || {};
-      await options?.onResponse?.({ response, request });
-      if (status >= 400) return;
-      await options?.onSuccess?.({ data, meta, headers, params: options.params });
-      if (options.data) options.data.value = data;
-      if (options.meta) options.meta.value = meta;
-      await options?.onComplete?.({ response, request });
-      if (options.loading) options.loading.value = false;
-    },
-    onResponseError: async ({ response, request }) => {
-      const { _data } = response;
-      await options.onError?.(_data, { response, request });
-      if (options.error) options.error.value = _data;
-      await options?.onComplete?.({ response, request });
-      if (options.loading) options.loading.value = false;
-    },
-    query: options?.query,
-    retry: false,
-    signal: options.controller?.signal
-  }).catch((reason) => reason);
-}));
+      );
+    }
+    await $fetch(url, {
+      baseURL: import.meta.server ? serverBaseURL(merkaly.api, options.global) : "/api",
+      body: options?.body,
+      headers: {
+        authorization: token.value ? `Bearer ${token.value}` : "",
+        identity: tenant.value,
+        [GLOBAL_API_HEADER]: options.global ? "true" : "",
+        ...requestHost ? { "x-merkaly-host": requestHost } : {},
+        // tenant host, as the proxy sends it
+        ...options?.headers
+      },
+      method: options?.method,
+      onRequest: async () => {
+        if (options.data) options.data.value = options.default?.();
+        if (options.meta) options.meta.value = {};
+        if (options.error) options.error.value = void 0;
+        if (options.loading) options.loading.value = true;
+        const result = await Promise.resolve(options?.onBeforeSend?.({ body: options.body, headers: options.headers, query: options.query })).then((res) => res).catch(() => false);
+        if (result === false) {
+          options.controller?.abort?.("Request aborted by onBeforeSend");
+        }
+      },
+      onRequestError: async ({ error, response, request }) => {
+        await options.onFatal?.(error);
+        if (options.error) options.error.value = error;
+        await options?.onComplete?.({ response, request });
+        if (options.loading) options.loading.value = false;
+      },
+      onResponse: async ({ response, request }) => {
+        const { status, _data, headers } = response;
+        const { data, meta } = _data || {};
+        await options?.onResponse?.({ response, request });
+        if (status >= 400) return;
+        await options?.onSuccess?.({ data, meta, headers, params: options.params });
+        if (options.data) options.data.value = data;
+        if (options.meta) options.meta.value = meta;
+        await options?.onComplete?.({ response, request });
+        if (options.loading) options.loading.value = false;
+      },
+      onResponseError: async ({ response, request }) => {
+        const { _data } = response;
+        await options.onError?.(_data, { response, request });
+        if (options.error) options.error.value = _data;
+        await options?.onComplete?.({ response, request });
+        if (options.loading) options.loading.value = false;
+      },
+      query: options?.query,
+      retry: false,
+      signal: options.controller?.signal
+    }).catch((reason) => reason);
+  });
+});

package/dist/runtime/types/nuxt.d.ts

@@ -3,9 +3,13 @@ import type { Auth0Client, User } from '@auth0/auth0-spa-js';
 import type { ApiOptions } from '../plugins/api.global';
 import type { AuthErrorContext } from '../composables/useAuth';
 
+type MerkalyAuth0Client = Auth0Client & {
+  linkWithConnection: (connection: string) => Promise<unknown>; // added by the auth0 plugin
+};
+
 declare module '#app' {
   interface NuxtApp {
-    $auth0: Auth0Client;
+    $auth0: MerkalyAuth0Client;
     $api: <T = unknown>(url: string, options?: ApiOptions) => Promise<T>;
     $gmap: never;
   }
@@ -20,7 +24,7 @@ declare module '#app' {
 
 declare module 'vue' {
   interface ComponentCustomProperties {
-    $auth0: Auth0Client;
+    $auth0: MerkalyAuth0Client;
     $api: <T = unknown>(url: string, options?: ApiOptions) => Promise<T>;
     $gmap: never;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkaly/nuxt",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/merkaly-io/nuxt.git"