@crm-market/template-shared 1.0.4 → 1.0.6

package/components/Layout/MiddleHeader.vue

@@ -185,8 +185,7 @@ export default defineComponent({
     const resolveImageUrl = (url: string) => {
       if (!url) return '';
       if (url.startsWith('http')) return url;
-      const config = useRuntimeConfig();
-      const apiBase = config.public.apiBase || 'http://localhost:3001/api';
+      const apiBase = getApiBaseUrl();
       const baseUrl = apiBase.replace('/api', '');
       return `${baseUrl}${url}`;
     };

package/components/Layout/MiddleHeaderThree.vue

@@ -167,8 +167,7 @@ export default defineComponent({
     const resolveImageUrl = (url: string) => {
       if (!url) return '';
       if (url.startsWith('http')) return url;
-      const config = useRuntimeConfig();
-      const apiBase = config.public.apiBase || 'http://localhost:3001/api';
+      const apiBase = getApiBaseUrl();
       const baseUrl = apiBase.replace('/api', '');
       return `${baseUrl}${url}`;
     };

package/components/Layout/MiddleHeaderTwo.vue

@@ -195,8 +195,7 @@ export default defineComponent({
     const resolveImageUrl = (url: string) => {
       if (!url) return '';
       if (url.startsWith('http')) return url;
-      const config = useRuntimeConfig();
-      const apiBase = config.public.apiBase || 'http://localhost:3001/api';
+      const apiBase = getApiBaseUrl();
       const baseUrl = apiBase.replace('/api', '');
       return `${baseUrl}${url}`;
     };

package/composables/useCategories.ts

@@ -1,5 +1,6 @@
-import { ref, computed } from 'vue';
-import { useRuntimeConfig } from '#imports';
+import { computed } from 'vue';
+import { useState, useRuntimeConfig } from '#imports';
+import { getApiBaseUrl } from '../utils/api';
 import { useSiteConfig } from './useSiteConfig';
 
 interface Category {
@@ -14,16 +15,20 @@ interface Category {
   order?: number;
 }
 
-const categories = ref<Category[]>([]);
-const loading = ref(false);
-const error = ref<string | null>(null);
-
 export const useCategories = () => {
+  // useState — SSR-safe, дані передаються клієнту через гідрацію
+  const categories = useState<Category[]>('categories', () => []);
+  const loading = useState<boolean>('categories-loading', () => false);
+  const error = useState<string | null>('categories-error', () => null);
+
   const config = useRuntimeConfig();
   const { publicApiToken } = useSiteConfig();
 
   // Fetch all categories
   const fetchCategories = async () => {
+    // Якщо вже завантажено — не перезавантажуємо
+    if (categories.value.length > 0) return categories.value;
+
     loading.value = true;
     error.value = null;
 
@@ -34,7 +39,7 @@ export const useCategories = () => {
       }
 
       const response = await $fetch<{ categories: Category[] }>('/site-template/public/store/categories', {
-        baseURL: config.public.apiBase || 'http://localhost:3001/api',
+        baseURL: getApiBaseUrl(),
         params: { token },
       });
 

package/composables/useCheckout.ts

@@ -65,7 +65,7 @@ export const useCheckout = () => {
 
       const response = await $fetch<{ id: string }>('/order', {
         method: 'POST',
-        baseURL: config.public.apiBase || 'http://localhost:3001/api',
+        baseURL: getApiBaseUrl(),
         body: orderData,
       });
 
@@ -88,7 +88,7 @@ export const useCheckout = () => {
 
     try {
       const response = await $fetch(`/order/${id}`, {
-        baseURL: config.public.apiBase || 'http://localhost:3001/api',
+        baseURL: getApiBaseUrl(),
       });
 
       return response;

package/composables/useProducts.ts

@@ -1,5 +1,6 @@
 import { ref, computed } from 'vue';
 import { useRuntimeConfig } from '#imports';
+import { getApiBaseUrl } from '../utils/api';
 import { useSiteConfig } from './useSiteConfig';
 
 interface Product {
@@ -52,7 +53,7 @@ export const useProducts = () => {
       };
 
       const response = await $fetch<{ products: Product[]; total: number }>('/site-template/public/store/products', {
-        baseURL: config.public.apiBase || 'http://localhost:3001/api',
+        baseURL: getApiBaseUrl(),
         params,
       });
 
@@ -79,7 +80,7 @@ export const useProducts = () => {
       }
 
       const response = await $fetch<{ product: Product }>(`/site-template/public/store/products/${productId}`, {
-        baseURL: config.public.apiBase || 'http://localhost:3001/api',
+        baseURL: getApiBaseUrl(),
         params: { token },
       });
 
@@ -106,7 +107,7 @@ export const useProducts = () => {
       };
 
       const response = await $fetch<{ products: Product[]; total: number }>('/site-template/public/store/products', {
-        baseURL: config.public.apiBase || 'http://localhost:3001/api',
+        baseURL: getApiBaseUrl(),
         params,
       });
 

package/composables/useSiteConfig.ts

@@ -1,5 +1,6 @@
-import { ref, computed } from 'vue';
-import { useRuntimeConfig, useRoute } from '#imports';
+import { computed } from 'vue';
+import { useState, useRuntimeConfig, useRoute, useRequestHeaders } from '#imports';
+import { getApiBaseUrl } from '../utils/api';
 
 interface ColorScheme {
   primary?: string;
@@ -54,29 +55,40 @@ interface SiteConfig {
   };
 }
 
-const siteConfig = ref<SiteConfig | null>(null);
-const loading = ref(false);
-const error = ref<string | null>(null);
-
 export const useSiteConfig = () => {
+  // useState — SSR-safe, дані передаються клієнту через гідрацію
+  const siteConfig = useState<SiteConfig | null>('site-config', () => null);
+  const loading = useState<boolean>('site-config-loading', () => false);
+  const error = useState<string | null>('site-config-error', () => null);
+
   const config = useRuntimeConfig();
-  const route = useRoute();
 
-  // Get subdomain from current host or route
+  // Отримати subdomain з host — працює і на SSR, і на клієнті
   const getSubdomain = () => {
-    if (process.client) {
-      const hostname = window.location.hostname;
-      const parts = hostname.split('.');
-      // Assuming format: subdomain.domain.com
-      if (parts.length >= 3) {
-        return parts[0];
-      }
+    let hostname = '';
+
+    if (import.meta.server) {
+      // SSR: отримуємо host з request headers
+      const headers = useRequestHeaders(['host', 'x-forwarded-host']);
+      hostname = (headers['x-forwarded-host'] || headers['host'] || '').split(':')[0];
+    } else {
+      // Client: з window.location
+      hostname = window.location.hostname;
+    }
+
+    const parts = hostname.split('.');
+    // Формат: subdomain.domain.com або subdomain.domain.com.ua
+    if (parts.length >= 3) {
+      return parts[0];
     }
     return null;
   };
 
   // Fetch site configuration from API
   const fetchConfig = async (subdomain?: string) => {
+    // Якщо вже завантажено — не перезавантажуємо
+    if (siteConfig.value && !subdomain) return siteConfig.value;
+
     loading.value = true;
     error.value = null;
 
@@ -89,7 +101,7 @@ export const useSiteConfig = () => {
       const response = await $fetch<SiteConfig>(
         `/site-template/public/config/subdomain/${sub}`,
         {
-          baseURL: config.public.apiBase || 'http://localhost:3001/api',
+          baseURL: getApiBaseUrl(),
         }
       );
 
@@ -112,7 +124,7 @@ export const useSiteConfig = () => {
 
     const { colors, fonts, customCSS } = siteConfig.value.customization;
 
-    if (process.client && colors) {
+    if (import.meta.client && colors) {
       const root = document.documentElement;
 
       if (colors.primary) {
@@ -131,7 +143,7 @@ export const useSiteConfig = () => {
       }
     }
 
-    if (process.client && fonts) {
+    if (import.meta.client && fonts) {
       const root = document.documentElement;
 
       if (fonts.headingFont) {
@@ -149,7 +161,7 @@ export const useSiteConfig = () => {
     }
 
     // Inject custom CSS
-    if (process.client && customCSS) {
+    if (import.meta.client && customCSS) {
       let styleEl = document.getElementById('custom-site-css');
       if (!styleEl) {
         styleEl = document.createElement('style');
@@ -167,7 +179,7 @@ export const useSiteConfig = () => {
     const { siteName, siteDescription, logoUrl } = siteConfig.value;
     const seo = siteConfig.value.customization?.content?.seo;
 
-    if (process.client) {
+    if (import.meta.client) {
       if (siteName) {
         document.title = siteName;
       }

package/nuxt.config.ts

@@ -21,6 +21,8 @@ export default defineNuxtConfig({
   },
 
   runtimeConfig: {
+    // SSR-only: внутрішній URL бекенду (Docker мережа або localhost)
+    apiBaseInternal: process.env.API_BASE_INTERNAL || '',
     public: {
       apiBase: process.env.API_BASE_URL || 'http://localhost:3001/api',
       templateType: process.env.TEMPLATE_TYPE || 'electronics',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crm-market/template-shared",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "description": "Shared Nuxt 3 layer for CRM Market store templates (layouts, components, composables, pages)",
   "publishConfig": {

package/plugins/site-init.ts

@@ -0,0 +1,33 @@
+import { defineNuxtPlugin } from '#app';
+import { useSiteConfig } from '../composables/useSiteConfig';
+import { useCategories } from '../composables/useCategories';
+
+export default defineNuxtPlugin(async () => {
+  const { fetchConfig, siteConfig, error, applyCustomization } = useSiteConfig();
+  const { fetchCategories } = useCategories();
+
+  // SSR: завантажуємо конфіг і категорії — дані передаються клієнту через useState
+  // Client: якщо дані вже є від SSR (гідрація) — fetchConfig пропускає повторний запит
+  try {
+    await fetchConfig();
+    await fetchCategories();
+  } catch (e) {
+    console.error('Failed to initialize site:', e);
+
+    if (import.meta.client && error.value) {
+      console.error('Site configuration error:', error.value);
+    }
+  }
+
+  // Client-only: застосувати CSS кастомізацію після гідрації
+  if (import.meta.client && siteConfig.value) {
+    applyCustomization();
+  }
+
+  // Client-only: завантажити кошик з localStorage
+  if (import.meta.client) {
+    const { useCart } = await import('../composables/useCart');
+    const { loadCart } = useCart();
+    loadCart();
+  }
+});

package/utils/api.ts

@@ -0,0 +1,17 @@
+import { useRuntimeConfig } from '#imports';
+
+/**
+ * Повертає базовий URL для API-запитів.
+ * На сервері (SSR) використовує внутрішній URL Docker-мережі (якщо задано),
+ * на клієнті — завжди публічний URL.
+ */
+export const getApiBaseUrl = (): string => {
+  const config = useRuntimeConfig();
+
+  // На сервері: використовуємо внутрішній URL якщо він задано
+  if (import.meta.server && config.apiBaseInternal) {
+    return config.apiBaseInternal as string;
+  }
+
+  return (config.public.apiBase as string) || 'http://localhost:3001/api';
+};

package/utils/image.ts

@@ -1,4 +1,5 @@
 import { useRuntimeConfig } from '#imports';
+import { getApiBaseUrl } from './api';
 
 /**
  * Перетворює відносні шляхи до зображень (/media/...) у повні URL
@@ -7,8 +8,7 @@ export const resolveImageUrl = (url: string | undefined | null): string => {
   if (!url) return '';
   if (url.startsWith('http') || url.startsWith('data:') || url.startsWith('blob:')) return url;
 
-  const config = useRuntimeConfig();
-  const apiBase = (config.public.apiBase as string) || 'http://localhost:3001/api';
+  const apiBase = getApiBaseUrl();
   // Видаляємо /api з кінця, щоб отримати базовий URL сервера
   const baseUrl = apiBase.replace(/\/api\/?$/, '');
   return `${baseUrl}${url.startsWith('/') ? '' : '/'}${url}`;

package/plugins/site-init.client.ts

@@ -1,29 +0,0 @@
-import { defineNuxtPlugin } from '#app';
-import { useSiteConfig } from '../composables/useSiteConfig';
-import { useCart } from '../composables/useCart';
-import { useCategories } from '../composables/useCategories';
-
-export default defineNuxtPlugin(async () => {
-  const { fetchConfig, error } = useSiteConfig();
-  const { loadCart } = useCart();
-  const { fetchCategories } = useCategories();
-
-  // Initialize cart from localStorage
-  loadCart();
-
-  // Fetch site configuration
-  try {
-    await fetchConfig();
-
-    // Load categories after config is loaded
-    await fetchCategories();
-  } catch (e) {
-    console.error('Failed to initialize site:', e);
-
-    // If site config fails to load, redirect to error page or show message
-    if (process.client && error.value) {
-      // You can customize this behavior
-      console.error('Site configuration error:', error.value);
-    }
-  }
-});