feat(elements-vue): enhance Vue components to match React implementation

- Add new UI components: Icon, ProviderLogo, DefaultToast, DefaultSsoButtonContainer
- Add toast notification system with vue-sonner integration
- Fix recovery codes grid display (5-column layout)
- Fix provider logos in OIDC settings (show actual logos instead of letters)
- Remove wrapper div from OrySettingsCard (use Vue 3 fragments)
- Consolidate icon system into unified Icon.vue component
- Add provider logos support matching React implementation
- Simplify code and remove duplicate utilities
- Update dependencies for vue-sonner support

Author: Jorgagu

package-lock.json

@@ -48,6 +48,8 @@
     "@storybook/node-logger": "8.6.14",
     "@storybook/react": "8.6.14",
     "@storybook/react-vite": "8.6.14",
+    "@storybook/vue3": "8.6.14",
+    "@storybook/vue3-vite": "8.6.14",
     "@storybook/test-runner": "^0.23.0",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/types": "8.6.14",

package.json

@@ -6,7 +6,9 @@
     "type-check": "vue-tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "storybook": "storybook dev -p 6007",
+    "storybook:build": "storybook build"
   },
   "exports": {
     ".": {
@@ -49,24 +51,34 @@
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "tailwind-merge": "3.3.0",
-    "vue-i18n": "^11.0.0"
+    "vue-i18n": "^11.0.0",
+    "vue-sonner": "^2.0.0"
   },
   "peerDependencies": {
     "vue": "^3.4.0"
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "8.6.14",
+    "@storybook/addon-essentials": "8.6.14",
+    "@storybook/addon-interactions": "8.6.14",
+    "@storybook/vue3": "8.6.14",
+    "@storybook/vue3-vite": "8.6.14",
+    "@tailwindcss/vite": "^4.0.0",
     "@testing-library/vue": "^8.1.0",
     "@vitejs/plugin-vue": "^5.1.0",
     "@vue/test-utils": "^2.4.0",
     "autoprefixer": "10.4.21",
     "esbuild-plugin-vue-next": "^0.1.4",
     "happy-dom": "^15.0.0",
     "postcss": "8.4.47",
+    "storybook": "8.6.14",
+    "storybook-addon-mock": "5.0.0",
     "tailwindcss": "^3.4.0",
     "tsup": "8.4.0",
     "typescript": "^5.5.0",
     "unplugin-vue": "^7.1.0",
     "vite": "^5.4.0",
+    "vite-plugin-require": "1.2.14",
     "vitest": "^2.0.0",
     "vue": "^3.5.0",
     "vue-tsc": "^2.0.0"

packages/elements-vue/package.json

@@ -74,6 +74,21 @@
         ]
       },
       "dependsOn": ["build"]
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 6007,
+        "configDir": "packages/elements-vue/.storybook"
+      }
+    },
+    "storybook:build": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/elements-vue",
+        "configDir": "packages/elements-vue/.storybook"
+      }
     }
   }
 }

packages/elements-vue/project.json

@@ -15,6 +15,7 @@ import OryCardHeader from "../OryCardHeader.vue"
 import OryCardContent from "../OryCardContent.vue"
 import OryCardFooter from "../OryCardFooter.vue"
 import OryForm from "../../form/OryForm.vue"
+import OryFormSsoForm from "../../form/OryFormSsoForm.vue"
 import OryMessages from "../../form/OryMessages.vue"
 import OryNode from "../../form/nodes/OryNode.vue"
 import { handleAfterFormSubmit } from "./utils"
@@ -50,6 +51,7 @@ const showSsoDivider = computed(
     <OryCardHeader />
     <OryCardContent>
       <OryMessages :messages="flowContainer.flow.ui.messages" />
+      <OryFormSsoForm />
       <OryForm :on-after-submit="handleAfterFormSubmit(dispatchFormState)">
         <component :is="Form.Group">
           <component :is="Card.Divider" v-if="showSsoDivider" />

packages/elements-vue/src/components/card/two-step/ProvideIdentifierForm.vue

@@ -26,6 +26,7 @@ import OryCardHeader from "../OryCardHeader.vue"
 import OryCardContent from "../OryCardContent.vue"
 import OryCardFooter from "../OryCardFooter.vue"
 import OryForm from "../../form/OryForm.vue"
+import OryFormSsoForm from "../../form/OryFormSsoForm.vue"
 import OryMessages from "../../form/OryMessages.vue"
 import OryNode from "../../form/nodes/OryNode.vue"
 import { handleAfterFormSubmit, toAuthMethodPickerOptions } from "./utils"
@@ -109,7 +110,7 @@ function handleMethodClick(group: string) {
     <OryCardHeader />
     <OryCardContent>
       <OryMessages :messages="flowContainer.flow.ui.messages" />
-
+      <OryFormSsoForm />
       <OryForm
         v-if="hasAuthMethods"
         :on-after-submit="handleAfterFormSubmit(dispatchFormState)"

packages/elements-vue/src/components/card/two-step/SelectMethodForm.vue

@@ -1,8 +1,7 @@
 // Copyright © 2026 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { FlowType, UiNode, UiNodeGroupEnum } from "@ory/client-fetch"
-import type { OryFlowContainer } from "../../../util/flowContainer"
+import { UiNode, UiNodeGroupEnum } from "@ory/client-fetch"
 import { isUiNodeGroupEnum, type GroupedNodes } from "../../../util/ui"
 import type { FormStateAction } from "../../../composables/useOryFlow"
 
@@ -44,45 +43,6 @@ export function toAuthMethodPickerOptions(
   )
 }
 
-function isScreenSelectionNode(node: UiNode) {
-  if (
-    "name" in node.attributes &&
-    node.attributes.name === "screen" &&
-    "value" in node.attributes &&
-    node.attributes.value === "previous"
-  ) {
-    return true
-  }
-  if (
-    node.group === UiNodeGroupEnum.IdentifierFirst &&
-    "name" in node.attributes &&
-    node.attributes.name === "identifier" &&
-    node.attributes.type === "hidden"
-  ) {
-    return true
-  }
-  return false
-}
-
-/**
- * Check if the flow is in choosing method state
- */
-export function isChoosingMethod(flow: OryFlowContainer): boolean {
-  if (flow.flowType === FlowType.Login) {
-    const loginFlow = flow.flow as { requested_aal?: string; refresh?: boolean }
-    if (loginFlow.requested_aal === "aal2") {
-      return true
-    }
-    if (
-      loginFlow.refresh &&
-      !flow.flow.ui.nodes.some((n) => n.group === "code")
-    ) {
-      return true
-    }
-  }
-  return flow.flow.ui.nodes.some(isScreenSelectionNode)
-}
-
 /**
  * Get the final nodes to display based on the selected group
  */

packages/elements-vue/src/components/card/two-step/utils.ts

@@ -2,26 +2,64 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script setup lang="ts">
-import { watch } from "vue"
-import { FlowType } from "@ory/client-fetch"
+import { computed, watch } from "vue"
+import {
+  FlowType,
+  isUiNodeInputAttributes,
+  isUiNodeAnchorAttributes,
+  isUiNodeImageAttributes,
+  isUiNodeScriptAttributes,
+} from "@ory/client-fetch"
 import { useComponents } from "../../composables/useComponents"
 import { useOryForm } from "../../composables/useOryForm"
 import { provideOryForm } from "../../composables/useOryFormContext"
 import { useOryFlow } from "../../composables/useOryFlow"
+import { useOryIntl } from "../../composables/useOryIntl"
 
 const props = defineProps<{
   onAfterSubmit?: (method: string | number | boolean | undefined) => void
 }>()
 
 const components = useComponents()
-const { formState, flowType } = useOryFlow()
+const { flowContainer, formState, flowType } = useOryFlow()
+const intl = useOryIntl()
 const formContext = useOryForm({
   onAfterSubmit: props.onAfterSubmit,
 })
 const { handleSubmit, action, method, setValue } = formContext
 
 provideOryForm(formContext)
 
+const hasMethods = computed(() =>
+  flowContainer.value.flow.ui.nodes.some((node) => {
+    if (isUiNodeInputAttributes(node.attributes)) {
+      if (node.attributes.type === "hidden") {
+        return false
+      }
+      return node.attributes.name !== "csrf_token"
+    } else if (isUiNodeAnchorAttributes(node.attributes)) {
+      return true
+    } else if (isUiNodeImageAttributes(node.attributes)) {
+      return true
+    } else if (isUiNodeScriptAttributes(node.attributes)) {
+      return true
+    }
+    return false
+  }),
+)
+
+const noMethodsMessage = computed(() => {
+  const translationKey = "identities.messages.5000002"
+  const defaultMessage =
+    "No authentication methods are available for this request. Please contact the site or app owner."
+  const translated = intl.t(translationKey)
+  return {
+    id: 5000002,
+    text: translated === translationKey ? defaultMessage : translated,
+    type: "error" as const,
+  }
+})
+
 /**
  * Method field enforcement for code flows.
  * Sometimes the method input node is missing, so we force set it here.
@@ -43,7 +81,16 @@ watch(
 </script>
 
 <template>
+  <template v-if="!hasMethods">
+    <component :is="components.Message.Root">
+      <component
+        :is="components.Message.Content"
+        :message="noMethodsMessage"
+      />
+    </component>
+  </template>
   <component
+    v-else
     :is="components.Form.Root"
     :action="action"
     :method="method"

packages/elements-vue/src/components/form/OryForm.vue

@@ -0,0 +1,45 @@
+<!-- Copyright © 2026 Ory Corp -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { UiNodeGroupEnum, getNodeId } from "@ory/client-fetch"
+import { useComponents } from "../../composables/useComponents"
+import { useOryForm } from "../../composables/useOryForm"
+import { provideOryForm } from "../../composables/useOryFormContext"
+import { useOryFlow } from "../../composables/useOryFlow"
+import { isNodeVisible } from "../../util/ui"
+import OryNode from "./nodes/OryNode.vue"
+
+const { Form } = useComponents()
+const { flowContainer } = useOryFlow()
+
+const formContext = useOryForm({})
+const { handleSubmit, action, method } = formContext
+
+provideOryForm(formContext)
+
+const ssoNodes = computed(() =>
+  flowContainer.value.flow.ui.nodes.filter(
+    (node) =>
+      (node.group === UiNodeGroupEnum.Oidc ||
+        node.group === UiNodeGroupEnum.Saml) &&
+      isNodeVisible(node),
+  ),
+)
+</script>
+
+<template>
+  <component
+    v-if="ssoNodes.length > 0"
+    :is="Form.Root"
+    :action="action"
+    :method="method"
+    data-testid="ory/form/methods/oidc-saml"
+    @submit="handleSubmit"
+  >
+    <component :is="Form.SsoRoot" :nodes="ssoNodes">
+      <OryNode v-for="node in ssoNodes" :key="getNodeId(node)" :node="node" />
+    </component>
+  </component>
+</template>

packages/elements-vue/src/components/form/OryFormSsoForm.vue

@@ -1,30 +1,44 @@
 <!-- Copyright © 2026 Ory Corp -->
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
+<script lang="ts">
+const DEFAULT_HIDDEN_MESSAGE_IDS = [
+  1040009, 1060003, 1080003, 1010004, 1010014, 1040005, 1010016, 1010003,
+  1060004, 1060005, 1060006,
+]
+</script>
+
 <script setup lang="ts">
+import { computed } from "vue"
 import type { UiText } from "@ory/client-fetch"
 import { useComponents } from "../../composables/useComponents"
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     messages?: UiText[]
+    hiddenMessageIds?: number[]
   }>(),
   {
     messages: () => [],
+    hiddenMessageIds: () => DEFAULT_HIDDEN_MESSAGE_IDS,
   },
 )
 
 const components = useComponents()
+
+const filteredMessages = computed(() =>
+  props.messages?.filter((m) => !props.hiddenMessageIds.includes(m.id)) ?? [],
+)
 </script>
 
 <template>
   <component
     :is="components.Message.Root"
-    v-if="messages && messages.length > 0"
+    v-if="filteredMessages.length > 0"
   >
     <component
       :is="components.Message.Content"
-      v-for="message in messages"
+      v-for="message in filteredMessages"
       :key="message.id"
       :message="message"
     />