Add VueCompareImage to Nuxt module (#458)

* updating to storybook 8.1.6

* fixing Vue Compare Image, updating Storybook to 8.1.6

Makefile

@@ -120,7 +120,7 @@ lint-fix:
 	pnpm run lint:fix
 
 # how to use pnpm to upgrade storybook
-# storybook@latest upgrade --package-manager pnpm
+# npx storybook@latest upgrade --package-manager pnpm
 # TODO: Below helper commands not running as expected change dir first, then pnpm dlx...
 # ## HTML: update Storybook
 # html-storybook-update:

apps/html-storybook/package.json

@@ -37,24 +37,24 @@
     "@percy/cli": "^1.28.6",
     "@percy/storybook": "^6.0.0",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@storybook/addon-a11y": "^8.1.4",
-    "@storybook/addon-docs": "^8.1.4",
-    "@storybook/addon-essentials": "^8.1.4",
-    "@storybook/addon-links": "^8.1.4",
-    "@storybook/addon-viewport": "^8.1.4",
-    "@storybook/html": "^8.1.4",
-    "@storybook/html-vite": "^8.1.4",
-    "@storybook/manager-api": "^8.1.4",
-    "@storybook/preview-api": "^8.1.4",
-    "@storybook/theming": "^8.1.4",
+    "@storybook/addon-a11y": "^8.1.6",
+    "@storybook/addon-docs": "^8.1.6",
+    "@storybook/addon-essentials": "^8.1.6",
+    "@storybook/addon-links": "^8.1.6",
+    "@storybook/addon-viewport": "^8.1.6",
+    "@storybook/html": "^8.1.6",
+    "@storybook/html-vite": "^8.1.6",
+    "@storybook/manager-api": "^8.1.6",
+    "@storybook/preview-api": "^8.1.6",
+    "@storybook/theming": "^8.1.6",
     "@whitespace/storybook-addon-html": "^6.1.1",
     "autoprefixer": "^10.4.19",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^5.0.5",
-    "storybook": "^8.1.4",
+    "storybook": "^8.1.6",
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",

apps/vue-storybook/package.json

@@ -29,11 +29,11 @@
     "@explorer-1/tsconfig": "workspace:*",
     "@explorer-1/vue": "workspace:*",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@storybook/addon-a11y": "^8.1.4",
-    "@storybook/addon-essentials": "^8.1.4",
-    "@storybook/blocks": "^8.1.4",
-    "@storybook/vue3": "^8.1.4",
-    "@storybook/vue3-vite": "^8.1.4",
+    "@storybook/addon-a11y": "^8.1.6",
+    "@storybook/addon-essentials": "^8.1.6",
+    "@storybook/blocks": "^8.1.6",
+    "@storybook/vue3": "^8.1.6",
+    "@storybook/vue3-vite": "^8.1.6",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@whitespace/storybook-addon-html": "^6.1.1",
@@ -44,7 +44,7 @@
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
     "rimraf": "^5.0.5",
-    "storybook": "^8.1.4",
+    "storybook": "^8.1.6",
     "storybook-addon-vue-slots": "^0.9.29",
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",

packages/nuxt/dist/module.mjs

@@ -17,8 +17,9 @@ const module = defineNuxtModule({
     const runtimeDir = resolver.resolve("./runtime");
     const pluginDir = resolver.resolve("./runtime/plugins");
     addPlugin(resolver.resolve(pluginDir, "dayjs"));
-    addPlugin(resolver.resolve(pluginDir, "click-outside"));
     addPlugin(resolver.resolve(pluginDir, "filters"));
+    addPlugin(resolver.resolve(pluginDir, "vue-click-outside"));
+    addPlugin(resolver.resolve(pluginDir, "vue-compare-image.client"));
     if (_options.includeStyles) {
       await installModule("@nuxtjs/tailwindcss", {
         configPath: resolver.resolve(runtimeDir, "tailwind.config")
@@ -46,6 +47,7 @@ const module = defineNuxtModule({
             // make sure to externalize deps that shouldn't be bundled
             // into your library
             external: [
+              // './../node_modules/vue3-compare-image',
               "./../node_modules/vue",
               "./../node_modules/swiper",
               "./../node_modules/@fancyapps/ui",

packages/nuxt/dist/runtime/plugins/vue-compare-image.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

packages/nuxt/dist/runtime/plugins/vue-compare-image.client.js

@@ -0,0 +1,4 @@
+import VueCompareImage from "vue3-compare-image";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueCompareImage);
+});

packages/nuxt/src/module.ts

@@ -35,8 +35,9 @@ export default defineNuxtModule<ModuleOptions>({
     // add plugins
     // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
     addPlugin(resolver.resolve(pluginDir, 'dayjs'))
-    addPlugin(resolver.resolve(pluginDir, 'click-outside'))
     addPlugin(resolver.resolve(pluginDir, 'filters'))
+    addPlugin(resolver.resolve(pluginDir, 'vue-click-outside'))
+    addPlugin(resolver.resolve(pluginDir, 'vue-compare-image.client'))
 
     if (_options.includeStyles) {
       await installModule('@nuxtjs/tailwindcss', {
@@ -71,6 +72,7 @@ export default defineNuxtModule<ModuleOptions>({
             // make sure to externalize deps that shouldn't be bundled
             // into your library
             external: [
+              // './../node_modules/vue3-compare-image',
               './../node_modules/vue',
               './../node_modules/swiper',
               './../node_modules/@fancyapps/ui',

packages/nuxt/src/runtime/plugins/vue-compare-image.client.ts

@@ -0,0 +1,6 @@
+// @ts-nocheck
+import VueCompareImage from 'vue3-compare-image'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueCompareImage)
+})

packages/vue/package.json

@@ -22,6 +22,7 @@
     "dayjs": "^1.11.11",
     "lodash": "^4.17.21",
     "qs": "^6.12.1",
+    "sass": "^1.77.4",
     "swiper": "^11.1.3",
     "tailwindcss": "^3.4.3",
     "twitter-widgets": "^2.0.0",

packages/vue/src/components/BlockListCards/BlockListCards.vue

@@ -73,8 +73,8 @@
           >
             <!-- When exactly one link, use primary link variant -->
             <template
-              v-for="(link, index_link) in item.links"
-              :key="index_link"
+              v-for="(link, _index_link) in item.links"
+              :key="_index_link"
             >
               <BaseLink
                 variant="primary"