@crm-market/template-shared 1.0.5 → 1.0.6

package/composables/useCategories.ts

@@ -1,5 +1,5 @@
-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';
 
@@ -15,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;
 

package/composables/useSiteConfig.ts

@@ -1,5 +1,5 @@
-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 {
@@ -55,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;
 
@@ -113,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) {
@@ -132,7 +143,7 @@ export const useSiteConfig = () => {
       }
     }
 
-    if (process.client && fonts) {
+    if (import.meta.client && fonts) {
       const root = document.documentElement;
 
       if (fonts.headingFont) {
@@ -150,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');
@@ -168,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crm-market/template-shared",
-  "version": "1.0.5",
+  "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/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);
-    }
-  }
-});