diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
index 9f1d0e4134..a4d66045f7 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
@@ -347,8 +347,23 @@
 </div>
 <!-- /.row -->
 
+<div class="row w-25 m-auto p-4 border border-4 border-warning br-5 rounded text-center mt-4">
+    <dialog-island id="surprise"></dialog-island>
+    <button id="surprise-button" class="btn btn-primary">Click me for a surprise!</button>
+</div>
+
 [% MACRO jsinclude BLOCK %]
-    [% Asset.js("js/vue/dist/islands.js", "type" => "module") | $raw %]
+    [% INCLUDE 'calendar.inc' %]
+    [% Asset.js("js/vue/dist/islands.js", "init" => "1") | $raw %]
+    <!--
+    [% SET islands = Asset.js("js/vue/dist/islands.esm.js").match('(src="([^"]+)")').1 %]
+    <script src="[% islands %]" type="module">
+</script>
+    <script type="module">
+        import { hydrate } from "[% islands %]";
+        hydrate();
+    </script>
+    -->
     <script>
         var MSG_CONFIRM_DELETE = _("Are you sure you want to delete this news item? This cannot be undone.");
         $(document).ready(function () {
@@ -360,6 +375,10 @@
                 const [firstHelloIslandsElement] = document.getElementsByTagName("hello-islands");
                 firstHelloIslandsElement.message = "This is a delayed update to the message attribute of the web commponent.";
             }, 2000);
+
+            $("#surprise-button").on("click", () => {
+                $("#surprise").attr("warning", `<span>Yes, this is <span class="font-monospace">Dialog.vue</span> (in a wrapper component)!</span><span class="d-none">${Math.random()}</span>`);
+            });
         });
     </script>
 [% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue
new file mode 100644
index 0000000000..dd9a5da0a6
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/DialogIsland.vue
@@ -0,0 +1,107 @@
+<template>
+    <Dialog />
+</template>
+
+<script>
+import { inject, watch } from "vue";
+import Dialog from "../Dialog.vue";
+
+export default {
+    props: {
+        message: {
+            type: String,
+            default: null,
+        },
+        error: {
+            type: String,
+            default: null,
+        },
+        warning: {
+            type: String,
+            default: null,
+        },
+        confirmation: {
+            type: Object,
+            default: () => null,
+        },
+        isSubmitting: {
+            type: Boolean,
+            default: false,
+        },
+        isLoading: {
+            type: Boolean,
+            default: false,
+        },
+        acceptCallback: {
+            type: Function,
+            default: null,
+        },
+    },
+    setup(props) {
+        const mainStore = inject("mainStore");
+        const {
+            setMessage,
+            setError,
+            setWarning,
+            setConfirmation,
+            setSubmitting,
+            setLoading,
+            setAcceptCallback,
+        } = mainStore;
+
+        watch(
+            () => props.message,
+            newVal => {
+                setMessage(newVal);
+            }
+        );
+
+        watch(
+            () => props.error,
+            newVal => {
+                setError(newVal);
+            }
+        );
+
+        watch(
+            () => props.warning,
+            newVal => {
+                setWarning(newVal);
+            }
+        );
+
+        watch(
+            () => props.confirmation,
+            newVal => {
+                setConfirmation(newVal);
+            }
+        );
+
+        watch(
+            () => props.isSubmitting,
+            newVal => {
+                setSubmitting(newVal);
+            }
+        );
+
+        watch(
+            () => props.isLoading,
+            newVal => {
+                setLoading(newVal);
+            }
+        );
+
+        watch(
+            () => props.acceptCallback,
+            newVal => {
+                setAcceptCallback(newVal);
+            }
+        );
+
+        return {};
+    },
+    components: {
+        Dialog,
+    },
+};
+</script>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/HelloIslands.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue
similarity index 100%
rename from koha-tmpl/intranet-tmpl/prog/js/vue/components/HelloIslands.vue
rename to koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloIslands.vue
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/HelloWorld.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloWorld.vue
similarity index 100%
rename from koha-tmpl/intranet-tmpl/prog/js/vue/components/HelloWorld.vue
rename to koha-tmpl/intranet-tmpl/prog/js/vue/components/Islands/HelloWorld.vue
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
index c5e04a183a..9a96915af8 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts
@@ -1,5 +1,6 @@
 import { Component, defineCustomElement } from "vue";
 import { createPinia } from "pinia";
+import { $__ } from "../i18n";
 import { useMainStore } from "../stores/main";
 import { useNavigationStore } from "../stores/navigation";
 
@@ -27,7 +28,7 @@ export const componentRegistry: Map<string, WebComponentDynamicImport> =
                 importFn: async () => {
                     const module = await import(
                         /* webpackChunkName: "hello-islands" */
-                        "../components/HelloIslands.vue"
+                        "../components/Islands/HelloIslands.vue"
                     );
                     return module.default;
                 },
@@ -42,12 +43,27 @@ export const componentRegistry: Map<string, WebComponentDynamicImport> =
                 importFn: async () => {
                     const module = await import(
                         /* webpackChunkName: "hello-world" */
-                        "../components/HelloWorld.vue"
+                        "../components/Islands/HelloWorld.vue"
                     );
                     return module.default;
                 },
             },
         ],
+        [
+            "dialog-island",
+            {
+                importFn: async () => {
+                    const module = await import(
+                        /* webpackChunkName: "vue-dialog" */
+                        "../components/Islands/DialogIsland.vue"
+                    );
+                    return module.default;
+                },
+                config: {
+                    stores: ["mainStore"],
+                },
+            },
+        ],
     ]);
 
 /**
@@ -88,6 +104,7 @@ export function hydrate(): void {
                                     app.provide(store, storesMatrix[store]);
                                 });
                             }
+                            app.config.globalProperties.$__ = $__;
                             // Further config options can be added here as we expand this further
                         },
                     }),
@@ -97,4 +114,6 @@ export function hydrate(): void {
     });
 }
 
-hydrate();
+if (parseInt(document?.currentScript?.getAttribute("init") ?? "0", 10)) {
+    hydrate();
+}
diff --git a/rspack.config.js b/rspack.config.js
index 463c7baed3..749b1cb41e 100644
--- a/rspack.config.js
+++ b/rspack.config.js
@@ -3,8 +3,9 @@ const { VueLoaderPlugin } = require("vue-loader");
 const path = require("path");
 const rspack = require("@rspack/core");
 
-module.exports = {
-    resolve: {
+module.exports = [
+    {
+        resolve: {
         alias: {
             "@fetch": path.resolve(
                 __dirname,
@@ -13,90 +14,145 @@ module.exports = {
         },
     },
     experiments: {
-        css: true,
-    },
-    entry: {
-        erm: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/erm.ts",
-        preservation:
-            "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/preservation.ts",
-        "admin/record_sources":
-            "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/admin/record_sources.ts",
-        islands: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts",
-    },
-    output: {
-        filename: "[name].js",
-        path: path.resolve(
-            __dirname,
-            "koha-tmpl/intranet-tmpl/prog/js/vue/dist/"
-        ),
-        chunkFilename: "[name].[contenthash].js",
-        globalObject: "window",
-    },
-    module: {
-        rules: [
-            {
-                test: /\.vue$/,
-                loader: "vue-loader",
-                options: {
-                    experimentalInlineMatchResource: true,
-                },
-                exclude: [path.resolve(__dirname, "t/cypress/")],
-            },
-            {
-                test: /\.ts$/,
-                loader: "builtin:swc-loader",
-                options: {
-                    jsc: {
-                        parser: {
-                            syntax: "typescript",
-                        },
+            css: true,
+        },
+        entry: {
+            erm: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/erm.ts",
+            preservation:
+                "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/preservation.ts",
+            "admin/record_sources":
+                "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/admin/record_sources.ts",
+            islands: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts",
+        },
+        output: {
+            filename: "[name].js",
+            path: path.resolve(
+                __dirname,
+                "koha-tmpl/intranet-tmpl/prog/js/vue/dist/"
+            ),
+            chunkFilename: "[name].[contenthash].js",
+            globalObject: "window",
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.vue$/,
+                    loader: "vue-loader",
+                    options: {
+                        experimentalInlineMatchResource: true,
                     },
-                    appendTsSuffixTo: [/\.vue$/],
+                    exclude: [path.resolve(__dirname, "t/cypress/")],
                 },
-                exclude: [
-                    /node_modules/,
-                    path.resolve(__dirname, "t/cypress/"),
-                ],
-                type: "javascript/auto",
-            },
-            {
-                test: /\.css$/i,
-                type: "javascript/auto",
-                use: ["style-loader", "css-loader"],
-            },
+                {
+                    test: /\.ts$/,
+                    loader: "builtin:swc-loader",
+                    options: {
+                        jsc: {
+                            parser: {
+                                syntax: "typescript",
+                            },
+                        },
+                        appendTsSuffixTo: [/\.vue$/],
+                    },
+                    exclude: [
+                        /node_modules/,
+                        path.resolve(__dirname, "t/cypress/"),
+                    ],
+                    type: "javascript/auto",
+                },
+                {
+                    test: /\.css$/i,
+                    type: "javascript/auto",
+                    use: ["style-loader", "css-loader"],
+                },
+            ],
+        },
+        plugins: [
+            new VueLoaderPlugin(),
+            new rspack.DefinePlugin({
+                __VUE_OPTIONS_API__: true,
+                __VUE_PROD_DEVTOOLS__: false,
+                __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
+            }),
         ],
-    },
-    /**
-    optimization: {
-        splitChunks: {
-            chunks: "all",
-            cacheGroups: {
-                default: false, // Disable default cache groups to avoid affecting existing bundles
-                vendors: false, // Disable vendor caching
-                vue: {
-                    test: /[\\/]node_modules[\\/]vue[\\/]/,
-                    name: "vue",
-                    chunks: "all",
-                    enforce: true,
-                },
-            },
+        externals: {
+            jquery: "jQuery",
+            "datatables.net": "DataTable",
+            "datatables.net-buttons": "DataTable",
+            "datatables.net-buttons/js/buttons.html5": "DataTable",
+            "datatables.net-buttons/js/buttons.print": "DataTable",
+            "datatables.net-buttons/js/buttons.colVis": "DataTable",
         },
     },
-    */
-    plugins: [
-        new VueLoaderPlugin(),
-        new rspack.DefinePlugin({
-            __VUE_OPTIONS_API__: true,
-            __VUE_PROD_DEVTOOLS__: false,
-            __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
-        }),
-    ],
-    externals: {
-        jquery: "jQuery",
-        "datatables.net": "DataTable",
-        "datatables.net-buttons": "DataTable",
-        "datatables.net-buttons/js/buttons.html5": "DataTable",
-        "datatables.net-buttons/js/buttons.print": "DataTable",
-        "datatables.net-buttons/js/buttons.colVis": "DataTable",
+    {
+        experiments: {
+            css: true,
+            outputModule: true,
+        },
+        entry: {
+            islands: "./koha-tmpl/intranet-tmpl/prog/js/vue/modules/islands.ts",
+        },
+        output: {
+            filename: "[name].esm.js",
+            path: path.resolve(
+                __dirname,
+                "koha-tmpl/intranet-tmpl/prog/js/vue/dist/"
+            ),
+            chunkFilename: "[name].[contenthash].esm.js",
+            globalObject: "window",
+            library: {
+                type: "module",
+            },
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.vue$/,
+                    loader: "vue-loader",
+                    options: {
+                        experimentalInlineMatchResource: true,
+                    },
+                    exclude: [path.resolve(__dirname, "t/cypress/")],
+                },
+                {
+                    test: /\.ts$/,
+                    loader: "builtin:swc-loader",
+                    options: {
+                        jsc: {
+                            parser: {
+                                syntax: "typescript",
+                            },
+                        },
+                        appendTsSuffixTo: [/\.vue$/],
+                    },
+                    exclude: [
+                        /node_modules/,
+                        path.resolve(__dirname, "t/cypress/"),
+                    ],
+                    type: "javascript/auto",
+                },
+                {
+                    test: /\.css$/i,
+                    type: "javascript/auto",
+                    use: ["style-loader", "css-loader"],
+                },
+            ],
+        },
+        plugins: [
+            new VueLoaderPlugin(),
+            new rspack.DefinePlugin({
+                __VUE_OPTIONS_API__: true,
+                __VUE_PROD_DEVTOOLS__: false,
+                __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
+            }),
+        ],
+        externals: {
+            jquery: "jQuery",
+            "datatables.net": "DataTable",
+            "datatables.net-buttons": "DataTable",
+            "datatables.net-buttons/js/buttons.html5": "DataTable",
+            "datatables.net-buttons/js/buttons.print": "DataTable",
+            "datatables.net-buttons/js/buttons.colVis": "DataTable",
+        },
     },
-};
+];