feat: useResponsive with device detection on SSR

wp-content/themes/moonshine/app/composables/useReponsive.ts

@@ -0,0 +1,9 @@
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
+
+export function useResponsive() {
+  const { isMobileOrTablet } = useDevice();
+  const breakpoints = useBreakpoints(breakpointsTailwind, { ssrWidth: isMobileOrTablet ? 375 : 1024 });
+  const isDesktop = breakpoints.greaterOrEqual("lg");
+
+  return { breakpoints, isDesktop };
+}

wp-content/themes/moonshine/nuxt.config.ts

@@ -15,6 +15,7 @@ export default defineNuxtConfig({
     "@lewebsimple/nuxt-graphql",
     "@nuxt/eslint",
     "@nuxt/ui",
+    "@nuxtjs/device",
     "@nuxtjs/seo",
     "nuxt-auth-utils",
   ],

wp-content/themes/moonshine/package.json

@@ -18,7 +18,8 @@
     "@iconify-json/lucide": "^1.2.87",
     "@lewebsimple/nuxt-graphql": "^0.6.1",
     "@nuxt/ui": "4.3.0",
-    "@nuxtjs/seo": "^3.3.0",
+    "@nuxtjs/device": "4.0.0",
+    "@nuxtjs/seo": "^3.4.0",
     "jwt-decode": "^4.0.0",
     "nuxt": "^4.3.0",
     "nuxt-auth-utils": "^0.5.28",