fix: production build issue (#3236)

Author: Szymon-dziewonski

apps/docs/components/package.json

@@ -16,13 +16,13 @@
     "@microsoft/api-documenter": "^7.25.9",
     "@microsoft/api-extractor": "^7.47.4",
     "@types/node": "^20.12.7",
-    "nuxt": "^3.13.2",
+    "nuxt": "^3.14.159",
     "nuxt-gtag": "^3.0.1"
   },
   "dependencies": {
     "@microsoft/api-extractor-model": "^7.29.4",
     "@microsoft/tsdoc": "^0.15.0",
-    "@nuxt/content": "^2.12.1",
+    "@nuxt/content": "^2.13.4",
     "@nuxtjs/algolia": "^1.10.2",
     "@nuxtjs/color-mode": "^3.4.2",
     "@nuxtjs/seo": "^2.0.0-rc.10",
@@ -36,7 +36,7 @@
     "marked": "^13.0.3",
     "nuxt-content-assets": "^1.4.3",
     "nuxt-icon": "^0.6.10",
-    "sf-docs-base": "^1.3.1",
+    "sf-docs-base": "^1.3.2",
     "unstorage": "^1.10.2",
     "vite-svg-loader": "^5.1.0"
   },

apps/preview/nuxt/package.json

@@ -29,7 +29,7 @@
     "autoprefixer": "^10.4.19",
     "eslint": "^8.34.0",
     "eslint-plugin-nuxt": "^4.0.0",
-    "nuxt": "^3.13.2",
+    "nuxt": "^3.14.159",
     "postcss": "^8.4.21",
     "prettier": "^3.0.0",
     "sass": "^1.77.8",

apps/test/vue/package.json

@@ -21,7 +21,7 @@
     "test:ci:vue": "yarn test:ci && CYPRESS_COVERAGE=true yarn cypress run --component && yarn generate-coverage"
   },
   "dependencies": {
-    "vue": "^3.4.27",
+    "vue": "^3.5.12",
     "vue-router": "^4.3.2"
   },
   "devDependencies": {

package.json

@@ -92,6 +92,8 @@
     }
   },
   "resolutions": {
-    "@changesets/assemble-release-plan@^6.0.0": "patch:@changesets/assemble-release-plan@npm%3A6.0.0#./.yarn/patches/@changesets-assemble-release-plan-npm-6.0.0-f7b3005037.patch"
+    "@changesets/assemble-release-plan@^6.0.0": "patch:@changesets/assemble-release-plan@npm%3A6.0.0#./.yarn/patches/@changesets-assemble-release-plan-npm-6.0.0-f7b3005037.patch",
+    "#sf-docs-base": "old vue with version 3.4. causing missing renderer",
+    "vue": "3.5.12"
   }
 }

packages/sfui/frameworks/nuxt/package.json

@@ -49,6 +49,6 @@
     "@nuxt/schema": "^3.13.2",
     "@storefront-ui/eslint-config": "workspace:*",
     "eslint": "^8.34.0",
-    "nuxt": "^3.13.2"
+    "nuxt": "^3.14.159"
   }
 }

packages/sfui/frameworks/vue/composables/useDropdown/useDropdown.ts

@@ -1,4 +1,4 @@
-import { computed, unref } from 'vue';
+import { computed, toValue } from 'vue';
 import { onClickOutside, onKeyStroke, type MaybeElementRef, type MaybeRefOrGetter } from '@vueuse/core';
 import { flip, offset, shift } from '@floating-ui/vue';
 import { type UseDropdownOptions, usePopover } from '@storefront-ui/vue';
@@ -8,7 +8,7 @@ export function useDropdown(options: UseDropdownOptions) {
 
   const { floatingRef, referenceRef, style } = usePopover({
     placement,
-    middleware: computed(() => unref(middleware) || [offset(8), shift(), flip()]),
+    middleware: computed(() => toValue(middleware) || [offset(8), shift(), flip()]),
     isOpen,
     ...popoverOptions,
   });

packages/sfui/frameworks/vue/composables/useTooltip/useTooltip.ts

@@ -1,4 +1,4 @@
-import { ref, unref, computed } from 'vue';
+import { ref, unref, computed, toValue } from 'vue';
 import { arrow, flip, offset, shift, type ReferenceElement, type Side } from '@floating-ui/vue';
 import { type UseTooltipOptions, usePopover, useDisclosure } from '@storefront-ui/vue';
 
@@ -25,7 +25,10 @@ export function useTooltip<ReferenceEl extends ReferenceElement = ReferenceEleme
     isOpen,
     placement: initialPlacement,
     strategy,
-    middleware: computed(() => [...(unref(middleware) || [offset(8), shift(), flip()]), arrow({ element: arrowRef })]),
+    middleware: computed(() => [
+      ...(toValue(middleware) || [offset(8), shift(), flip()]),
+      arrow({ element: arrowRef }),
+    ]),
     ...popoverOptions,
   });
 

packages/sfui/frameworks/vue/package.json

@@ -61,7 +61,7 @@
     "vue-tsc": "^2.0.29"
   },
   "peerDependencies": {
-    "vue": "^3.4.27"
+    "vue": "^3.5.12"
   },
   "publishConfig": {
     "access": "public"