feat: add Vue 3 and Nuxt integration packages - #586

Open
Jorgagu wants to merge 3 commits into
ory:mainfrom
Jorgagu:feat/add-vue-nuxt-packages
Open

feat: add Vue 3 and Nuxt integration packages#586
Jorgagu wants to merge 3 commits into
ory:mainfrom
Jorgagu:feat/add-vue-nuxt-packages

Conversation

@Jorgagu

@JorgaguJorgagu commented Jan 18, 2026

Copy link
Copy Markdown
Contributor

This PR adds Vue 3 and Nuxt integration packages for Ory Elements, bringing feature parity with the existing React/Next.js implementation.

New Packages

@ory/elements-vue - Vue 3 component library for Ory authentication UIs

  • Complete set of UI components for Login, Registration, Recovery, Verification, Settings, and Consent flows
  • Vue 3 Composition API with <script setup> syntax
  • Full TypeScript support with proper type inference
  • Default theme with Tailwind CSS v4 styling
  • Internationalization support (80+ locales)
  • Session management via SessionProvider
  • Customizable components through slot overrides
  • Storybook setup for component development and documentation

@ory/nuxt - Nuxt 3/4 integration module

  • Auto-imported composables: useOryLogin, useOryRegistration, useOryRecovery, useOryVerification, useOrySettings, useOrySession, useOryLogout, useOryFlowError
  • Server-side proxy for secure cookie handling
  • Auth middleware for route protection
  • Environment-based SDK URL configuration (NUXT_PUBLIC_ORY_SDK_URL)
  • SSR-compatible session hydration

Example Application

Complete Nuxt example app demonstrating all authentication flows at examples/nuxt-app.

Related Issue or Design Document

Fixes#581

Checklist

  • I have read the contributing guidelines and signed the CLA.
  • I have referenced an issue containing the design document if my change introduces a new feature.
  • I have read the security policy.
  • I confirm that this pull request does not address a security vulnerability.
    If this pull request addresses a security vulnerability,
    I confirm that I got approval (please contact security@ory.sh) from the maintainers to push the changes.
  • I have added tests that prove my fix is effective or that my feature works.
  • I have added the necessary documentation within the code base (if appropriate).

Further comments

The Vue/Nuxt packages follow the same architecture patterns as the React/Next.js implementation:

  • Same component hierarchy and naming conventions
  • Same context/provider architecture (using Vue's provide/inject)
  • Same flow handling logic and state management
  • Same theming system structure with customizable components
  • Same utility functions and SDK helpers

All authentication methods are supported including password, passwordless (code), social login (OIDC), passkeys, WebAuthn, TOTP, and recovery codes.

This fixes the issue #581

@changeset-bot

changeset-botBot commented Jan 18, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 1bf47b5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel

vercelBot commented Jan 18, 2026

Copy link
Copy Markdown

@Jorgagu is attempting to deploy a commit to the ory Team on Vercel.

A member of the Team first needs to authorize it.

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from c71b462 to 6e9245bCompareJanuary 18, 2026 17:23
@codecov

codecovBot commented Jan 18, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 60.64%. Comparing base (f3fad4d) to head (1bf47b5).
⚠️ Report is 358 commits behind head on main.

Additional details and impacted files
@@ Coverage Diff @@## main #586 +/- ##
===========================================
+ Coverage 42.43% 60.64% +18.21% 
===========================================
Files 136 182 +46 Lines 2008 3679 +1671 Branches 288 610 +322 ===========================================
+ Hits 852 2231 +1379 - Misses 1149 1323 +174 - Partials 7 125 +118 
ComponentsCoverage Δ
@ory/elements-react60.48% <ø> (+23.69%)⬆️
@ory/nextjs61.51% <ø> (-4.47%)⬇️
🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Jorgagu

Copy link
Copy Markdown
ContributorAuthor

Hi @jonas-jonas@aeneasr@vinckr, this PR is ready for review 🎉

👋 @Jannik-Hm@Saganic, could you please test this as well and let me know if I missed anything during my own testing?

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch 5 times, most recently from b1f6174 to c1cc2f7CompareJanuary 19, 2026 10:05
@vinckr

Copy link
Copy Markdown
Member

Hey @Jorgagu
awesome, thanks!
Will take a look with @jonas-jonas as soon as time permits.

to resolve the format CI, can you run make format on your branch?

🐝

@Jorgagu

Copy link
Copy Markdown
ContributorAuthor

@vinckr thanks! I ran make format, but it also reformatted some files that weren’t changed in this PR.

@aeneasr

Copy link
Copy Markdown
Member

Cool stuff man! Given the massive size of the PR I'm not sure how quickly we can review this. We also need to figure out a way to add this to our e2e test suite (currently not open sourced) to ensure the advertised functionality matches the requirements. We also need to figure out who will be responsible on the team for maintaining those SDKs going forward (e.g. when we introduce new features). May I ask which approach you took to transfer the react elements to vue and nuxt? It will help us speed up review.

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 1723f6e to 74080aeCompareJanuary 27, 2026 12:11
@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 74080ae to 741b30aCompareMarch 14, 2026 19:54
Port @ory/elements-vue, @ory/nuxt, and the nuxt-app example onto the pnpm
workspace. Reference @ory/client-fetch 1.22.37 like the sibling packages,
use workspace protocol for internal deps, and wire nx release groups,
eslint vue support, and api-extractor reports for the new packages.
Port the component enhancement pass onto the pnpm workspace:
- replace the per-icon modules with a unified Icon component and extract
the icon typing into ui/types for lint-safe type imports
- add ProviderLogo with real OIDC provider logos and a provider-logos entry
- add settings toasts through vue-sonner (DefaultToast, showToast)
- extract SSO rendering into OryFormSsoForm and DefaultSsoButtonContainer
- handle flows without visible authentication methods in OryForm
- support the OAuth2 consent flow in the default card header
- keep storybook tooling at the workspace root per repo convention, adding
the vue3 framework packages at the shared storybook version
- regenerate the elements-vue API reports
Add a Storybook configuration for the Vue package mirroring the
elements-react setup: @storybook/vue3-vite framework, addon set
(essentials, interactions, a11y, storybook-addon-mock), Inter font
assets, and vite aliases resolving @ory/elements-vue to the package
source and $snapshots to the shared elements-react stub responses.
Port the full story tree (login, registration, recovery, verification,
settings, consent, error, customized) and shared story utilities.
Adaptations against the original branch content:
- import LoginFlowActiveEnum from the @ory/client-fetch package root
instead of a deep src/models path not exported by 1.22.37
- align captcha, organization, and refresh code stories with the
current stub-responses layout (interactive/hidden/client-error
captcha variants, organization-oidc/organization-saml splits,
renamed refresh code fixtures)
- load @tailwindcss/vite through a dynamic import because the package
is ESM-only and Storybook evaluates main.ts as CommonJS
- add an eslint override for packages/elements-vue/stories matching
the elements-react stories override
@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 741b30a to 1bf47b5CompareJuly 20, 2026 22:25
@coderabbitai

Copy link
Copy Markdown

Important

Review skipped

Too many files!

This PR contains 367 files, which is 267 over the limit of 100.

To get a review, narrow the scope:
• coderabbit review --committed # exclude uncommitted changes
• coderabbit review --dir # limit to a subdirectory
• coderabbit review --base # compare against a closer base

Upgrade to a paid plan to raise the limit.

Usage-priced reviews support at most 300 files.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 1c8d9337-1474-4668-a0f2-c31fdbc737b6

📥 Commits

Reviewing files that changed from the base of the PR and between 11d7877 and 1bf47b5.

⛔ Files ignored due to path filters (6)
  • examples/nuxt-app/public/favicon.ico is excluded by !**/*.ico
  • examples/nuxt-app/public/ory-logo.svg is excluded by !**/*.svg
  • packages/elements-vue/.storybook/public/InterVariable.woff2 is excluded by !**/*.woff2
  • packages/elements-vue/src/theme/default/assets/ory-badge-horizontal.svg is excluded by !**/*.svg
  • packages/elements-vue/src/theme/default/assets/ory-badge-vertical.svg is excluded by !**/*.svg
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (367)
  • .editorconfig
  • .github/workflows/release.yml
  • .gitignore
  • eslint.config.mjs
  • examples/nuxt-app/.env.example
  • examples/nuxt-app/.gitignore
  • examples/nuxt-app/README.md
  • examples/nuxt-app/app.vue
  • examples/nuxt-app/assets/css/main.css
  • examples/nuxt-app/layouts/auth.vue
  • examples/nuxt-app/layouts/default.vue
  • examples/nuxt-app/nuxt.config.ts
  • examples/nuxt-app/package.json
  • examples/nuxt-app/pages/error.vue
  • examples/nuxt-app/pages/index.vue
  • examples/nuxt-app/pages/login.vue
  • examples/nuxt-app/pages/recovery.vue
  • examples/nuxt-app/pages/registration.vue
  • examples/nuxt-app/pages/session.vue
  • examples/nuxt-app/pages/settings.vue
  • examples/nuxt-app/pages/verification.vue
  • examples/nuxt-app/project.json
  • nx.json
  • package.json
  • packages/elements-vue/.storybook/global.css
  • packages/elements-vue/.storybook/main.ts
  • packages/elements-vue/.storybook/preview-head.html
  • packages/elements-vue/.storybook/preview.ts
  • packages/elements-vue/.storybook/public/inter.css
  • packages/elements-vue/api-report/elements-vue-client.api.json
  • packages/elements-vue/api-report/elements-vue-client.api.md
  • packages/elements-vue/api-report/elements-vue-theme.api.json
  • packages/elements-vue/api-report/elements-vue-theme.api.md
  • packages/elements-vue/api-report/elements-vue.api.json
  • packages/elements-vue/api-report/elements-vue.api.md
  • packages/elements-vue/config/api-extractor-client.json
  • packages/elements-vue/config/api-extractor-core.json
  • packages/elements-vue/config/api-extractor-theme.json
  • packages/elements-vue/package.json
  • packages/elements-vue/project.json
  • packages/elements-vue/src/client/SessionProvider.vue
  • packages/elements-vue/src/client/index.ts
  • packages/elements-vue/src/client/useSession.spec.ts
  • packages/elements-vue/src/client/useSession.ts
  • packages/elements-vue/src/components/OryPageHeader.vue
  • packages/elements-vue/src/components/OryProvider.vue
  • packages/elements-vue/src/components/card/OryCard.vue
  • packages/elements-vue/src/components/card/OryCardContent.vue
  • packages/elements-vue/src/components/card/OryCardFooter.vue
  • packages/elements-vue/src/components/card/OryCardHeader.vue
  • packages/elements-vue/src/components/card/OryConsentCard.vue
  • packages/elements-vue/src/components/card/OrySelfServiceFlowCard.vue
  • packages/elements-vue/src/components/card/index.ts
  • packages/elements-vue/src/components/card/two-step/MethodActiveForm.vue
  • packages/elements-vue/src/components/card/two-step/ProvideIdentifierForm.vue
  • packages/elements-vue/src/components/card/two-step/SelectMethodForm.vue
  • packages/elements-vue/src/components/card/two-step/index.ts
  • packages/elements-vue/src/components/card/two-step/utils.ts
  • packages/elements-vue/src/components/form/OryForm.vue
  • packages/elements-vue/src/components/form/OryFormGroup.vue
  • packages/elements-vue/src/components/form/OryFormSsoForm.vue
  • packages/elements-vue/src/components/form/OryMessages.vue
  • packages/elements-vue/src/components/form/index.ts
  • packages/elements-vue/src/components/form/nodes/OryNode.vue
  • packages/elements-vue/src/components/form/nodes/index.ts
  • packages/elements-vue/src/components/index.ts
  • packages/elements-vue/src/components/settings/OrySettingsCard.vue
  • packages/elements-vue/src/components/settings/SettingsSection.vue
  • packages/elements-vue/src/components/settings/index.ts
  • packages/elements-vue/src/components/types.ts
  • packages/elements-vue/src/composables/index.ts
  • packages/elements-vue/src/composables/useComponents.spec.ts
  • packages/elements-vue/src/composables/useComponents.ts
  • packages/elements-vue/src/composables/useOryConfig.spec.ts
  • packages/elements-vue/src/composables/useOryConfig.ts
  • packages/elements-vue/src/composables/useOryFlow.spec.ts
  • packages/elements-vue/src/composables/useOryFlow.ts
  • packages/elements-vue/src/composables/useOryForm.ts
  • packages/elements-vue/src/composables/useOryFormContext.ts
  • packages/elements-vue/src/composables/useOryIntl.spec.ts
  • packages/elements-vue/src/composables/useOryIntl.ts
  • packages/elements-vue/src/composables/useResendCode.ts
  • packages/elements-vue/src/composables/useSlotContent.ts
  • packages/elements-vue/src/index.ts
  • packages/elements-vue/src/locales/af.json
  • packages/elements-vue/src/locales/ak.json
  • packages/elements-vue/src/locales/am.json
  • packages/elements-vue/src/locales/ar.json
  • packages/elements-vue/src/locales/as.json
  • packages/elements-vue/src/locales/az.json
  • packages/elements-vue/src/locales/be.json
  • packages/elements-vue/src/locales/bg.json
  • packages/elements-vue/src/locales/bm.json
  • packages/elements-vue/src/locales/bn.json
  • packages/elements-vue/src/locales/ca.json
  • packages/elements-vue/src/locales/cs.json
  • packages/elements-vue/src/locales/da.json
  • packages/elements-vue/src/locales/de.json
  • packages/elements-vue/src/locales/el.json
  • packages/elements-vue/src/locales/en.json
  • packages/elements-vue/src/locales/es.json
  • packages/elements-vue/src/locales/et.json
  • packages/elements-vue/src/locales/fa.json
  • packages/elements-vue/src/locales/fi.json
  • packages/elements-vue/src/locales/fr.json
  • packages/elements-vue/src/locales/gu.json
  • packages/elements-vue/src/locales/ha.json
  • packages/elements-vue/src/locales/he.json
  • packages/elements-vue/src/locales/hi.json
  • packages/elements-vue/src/locales/hr.json
  • packages/elements-vue/src/locales/hu.json
  • packages/elements-vue/src/locales/hy.json
  • packages/elements-vue/src/locales/id.json
  • packages/elements-vue/src/locales/ig.json
  • packages/elements-vue/src/locales/index.ts
  • packages/elements-vue/src/locales/it.json
  • packages/elements-vue/src/locales/ja.json
  • packages/elements-vue/src/locales/ka.json
  • packages/elements-vue/src/locales/kk.json
  • packages/elements-vue/src/locales/km.json
  • packages/elements-vue/src/locales/kn.json
  • packages/elements-vue/src/locales/ko.json
  • packages/elements-vue/src/locales/ku.json
  • packages/elements-vue/src/locales/ky.json
  • packages/elements-vue/src/locales/lt.json
  • packages/elements-vue/src/locales/lv.json
  • packages/elements-vue/src/locales/mk.json
  • packages/elements-vue/src/locales/ml.json
  • packages/elements-vue/src/locales/mn.json
  • packages/elements-vue/src/locales/mr.json
  • packages/elements-vue/src/locales/ms.json
  • packages/elements-vue/src/locales/my.json
  • packages/elements-vue/src/locales/ne.json
  • packages/elements-vue/src/locales/nl.json
  • packages/elements-vue/src/locales/no.json
  • packages/elements-vue/src/locales/or.json
  • packages/elements-vue/src/locales/pa.json
  • packages/elements-vue/src/locales/pl.json
  • packages/elements-vue/src/locales/ps.json
  • packages/elements-vue/src/locales/pt.json
  • packages/elements-vue/src/locales/ro.json
  • packages/elements-vue/src/locales/ru.json
  • packages/elements-vue/src/locales/sd.json
  • packages/elements-vue/src/locales/si.json
  • packages/elements-vue/src/locales/sk.json
  • packages/elements-vue/src/locales/sl.json
  • packages/elements-vue/src/locales/so.json
  • packages/elements-vue/src/locales/sq.json
  • packages/elements-vue/src/locales/sr.json
  • packages/elements-vue/src/locales/su.json
  • packages/elements-vue/src/locales/sv.json
  • packages/elements-vue/src/locales/sw.json
  • packages/elements-vue/src/locales/ta.json
  • packages/elements-vue/src/locales/te.json
  • packages/elements-vue/src/locales/tg.json
  • packages/elements-vue/src/locales/th.json
  • packages/elements-vue/src/locales/tk.json
  • packages/elements-vue/src/locales/tl.json
  • packages/elements-vue/src/locales/tr.json
  • packages/elements-vue/src/locales/ug.json
  • packages/elements-vue/src/locales/uk.json
  • packages/elements-vue/src/locales/ur.json
  • packages/elements-vue/src/locales/uz.json
  • packages/elements-vue/src/locales/vi.json
  • packages/elements-vue/src/locales/xh.json
  • packages/elements-vue/src/locales/yo.json
  • packages/elements-vue/src/locales/zh.json
  • packages/elements-vue/src/locales/zu.json
  • packages/elements-vue/src/theme/default/assets/icons/index.ts
  • packages/elements-vue/src/theme/default/components/card/DefaultAuthMethodListContainer.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultAuthMethodListItem.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultBadge.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCard.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardContent.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardFooter.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardHeader.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardLogo.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCurrentIdentifierButton.vue
  • packages/elements-vue/src/theme/default/components/card/index.ts
  • packages/elements-vue/src/theme/default/components/form/DefaultAnchor.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultButton.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCaptcha.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCheckbox.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCodeInput.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultConsentCheckbox.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultDivider.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultFormContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultGroupContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultImage.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultInput.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultLabel.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultMessage.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultMessageContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSection.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSectionContent.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSectionFooter.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSsoButton.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSsoButtonContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultText.vue
  • packages/elements-vue/src/theme/default/components/form/PinInput.vue
  • packages/elements-vue/src/theme/default/components/form/Spinner.vue
  • packages/elements-vue/src/theme/default/components/form/index.ts
  • packages/elements-vue/src/theme/default/components/index.ts
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsOidc.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsPasskey.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsRecoveryCodes.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsTotp.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsWebauthn.vue
  • packages/elements-vue/src/theme/default/components/settings/SettingsRemoveButton.vue
  • packages/elements-vue/src/theme/default/components/settings/index.ts
  • packages/elements-vue/src/theme/default/components/settings/utils.ts
  • packages/elements-vue/src/theme/default/components/ui/DefaultPageHeader.vue
  • packages/elements-vue/src/theme/default/components/ui/DefaultToast.vue
  • packages/elements-vue/src/theme/default/components/ui/Icon.vue
  • packages/elements-vue/src/theme/default/components/ui/ProviderLogo.vue
  • packages/elements-vue/src/theme/default/components/ui/UserAvatar.vue
  • packages/elements-vue/src/theme/default/components/ui/UserMenu.vue
  • packages/elements-vue/src/theme/default/components/ui/index.ts
  • packages/elements-vue/src/theme/default/components/ui/types.ts
  • packages/elements-vue/src/theme/default/flows/Consent.vue
  • packages/elements-vue/src/theme/default/flows/Error.vue
  • packages/elements-vue/src/theme/default/flows/Login.vue
  • packages/elements-vue/src/theme/default/flows/Recovery.vue
  • packages/elements-vue/src/theme/default/flows/Registration.vue
  • packages/elements-vue/src/theme/default/flows/Settings.vue
  • packages/elements-vue/src/theme/default/flows/Verification.vue
  • packages/elements-vue/src/theme/default/flows/index.ts
  • packages/elements-vue/src/theme/default/flows/types.ts
  • packages/elements-vue/src/theme/default/getOryComponents.ts
  • packages/elements-vue/src/theme/default/index.ts
  • packages/elements-vue/src/theme/default/provider-logos/index.ts
  • packages/elements-vue/src/theme/default/styles.css
  • packages/elements-vue/src/theme/default/utils/cn.ts
  • packages/elements-vue/src/theme/default/utils/constructCardHeader.ts
  • packages/elements-vue/src/theme/default/utils/i18n.ts
  • packages/elements-vue/src/theme/default/utils/logout.ts
  • packages/elements-vue/src/theme/default/utils/oauth2.ts
  • packages/elements-vue/src/theme/default/utils/url.ts
  • packages/elements-vue/src/theme/default/utils/user.ts
  • packages/elements-vue/src/types.ts
  • packages/elements-vue/src/util/client.ts
  • packages/elements-vue/src/util/flowContainer.ts
  • packages/elements-vue/src/util/getLogoutUrl.ts
  • packages/elements-vue/src/util/i18n/index.ts
  • packages/elements-vue/src/util/index.ts
  • packages/elements-vue/src/util/nodeGroups.spec.ts
  • packages/elements-vue/src/util/nodeGroups.ts
  • packages/elements-vue/src/util/nodes.spec.ts
  • packages/elements-vue/src/util/nodes.ts
  • packages/elements-vue/src/util/onSubmitLogin.ts
  • packages/elements-vue/src/util/onSubmitRecovery.ts
  • packages/elements-vue/src/util/onSubmitRegistration.ts
  • packages/elements-vue/src/util/onSubmitSettings.ts
  • packages/elements-vue/src/util/onSubmitVerification.ts
  • packages/elements-vue/src/util/removeFalsyValues.spec.ts
  • packages/elements-vue/src/util/removeFalsyValues.ts
  • packages/elements-vue/src/util/sdk-helpers/error.ts
  • packages/elements-vue/src/util/sdk-helpers/index.ts
  • packages/elements-vue/src/util/sdk-helpers/urlHelpers.ts
  • packages/elements-vue/src/util/sdk-helpers/utils.ts
  • packages/elements-vue/src/util/showToast.ts
  • packages/elements-vue/src/util/submitHandler.ts
  • packages/elements-vue/src/util/test-id.spec.ts
  • packages/elements-vue/src/util/test-id.ts
  • packages/elements-vue/src/util/ui/index.spec.ts
  • packages/elements-vue/src/util/ui/index.ts
  • packages/elements-vue/stories/components/consent/consent.stories.ts
  • packages/elements-vue/stories/components/error/error.stories.ts
  • packages/elements-vue/stories/components/error/errors/oidc_continuity.json
  • packages/elements-vue/stories/components/login/1fa/account-linking.stories.ts
  • packages/elements-vue/stories/components/login/1fa/all-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/captcha-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/code-refresh-with-password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/code-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods-with-mitigation.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods-without-mitigation.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/captcha.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/code.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/oidc.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/passkey.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/saml.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/webauthn.stories.ts
  • packages/elements-vue/stories/components/login/1fa/oidc-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/organization.stories.ts
  • packages/elements-vue/stories/components/login/1fa/passkey-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/password-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/saml-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/all.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/captcha.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/code.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/none.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/oidc.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/passkey.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/saml.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/webauthn.stories.ts
  • packages/elements-vue/stories/components/login/1fa/webauthn-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/all.refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/all.stories.ts
  • packages/elements-vue/stories/components/login/2fa/code-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/code.stories.ts
  • packages/elements-vue/stories/components/login/2fa/lookup_secret-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/lookup_secret.stories.ts
  • packages/elements-vue/stories/components/login/2fa/totp-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/totp.stories.ts
  • packages/elements-vue/stories/components/login/2fa/webauthn-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/webauthn.stories.ts
  • packages/elements-vue/stories/components/recovery/code.stories.ts
  • packages/elements-vue/stories/components/recovery_v2/code.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/all-methods.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/captcha.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/code.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/oidc.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/password.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/saml.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/webauthn.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/all-methods.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/captcha.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/code.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/oidc.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/organization.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/password.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/saml.stories.ts
  • packages/elements-vue/stories/components/settings/all-2fa.stories.ts
  • packages/elements-vue/stories/components/settings/all.stories.ts
  • packages/elements-vue/stories/components/settings/lookup_secrets.stories.ts
  • packages/elements-vue/stories/components/settings/oidc.stories.ts
  • packages/elements-vue/stories/components/settings/passkey.stories.ts
  • packages/elements-vue/stories/components/settings/saml.stories.ts
  • packages/elements-vue/stories/components/settings/totp.stories.ts
  • packages/elements-vue/stories/components/settings/webauthn.stories.ts
  • packages/elements-vue/stories/components/verification/code.stories.ts
  • packages/elements-vue/stories/customized/components/MyCustomCardHeader.vue
  • packages/elements-vue/stories/customized/input.stories.ts
  • packages/elements-vue/stories/utils.ts
  • packages/elements-vue/tsconfig.json
  • packages/elements-vue/tsup.config.ts
  • packages/elements-vue/vitest.config.ts
  • packages/nuxt/.nuxtrc
  • packages/nuxt/api-report/nuxt.api.json
  • packages/nuxt/api-report/nuxt.api.md
  • packages/nuxt/config/api-extractor.json
  • packages/nuxt/package.json
  • packages/nuxt/project.json
  • packages/nuxt/src/__mocks__/imports.ts
  • packages/nuxt/src/module.ts
  • packages/nuxt/src/runtime/composables/index.ts
  • packages/nuxt/src/runtime/composables/useOryConfig.ts
  • packages/nuxt/src/runtime/composables/useOryFlow.ts
  • packages/nuxt/src/runtime/composables/useOryFlowError.ts
  • packages/nuxt/src/runtime/composables/useOryLogout.ts
  • packages/nuxt/src/runtime/composables/useOrySession.ts
  • packages/nuxt/src/runtime/middleware/auth.ts
  • packages/nuxt/src/runtime/server/proxy.ts
  • packages/nuxt/src/runtime/types.ts
  • packages/nuxt/src/runtime/utils/cookie.spec.ts
  • packages/nuxt/src/runtime/utils/cookie.ts
  • packages/nuxt/src/runtime/utils/headers.spec.ts
  • packages/nuxt/src/runtime/utils/headers.ts
  • packages/nuxt/src/runtime/utils/rewrite.spec.ts
  • packages/nuxt/src/runtime/utils/rewrite.ts
  • packages/nuxt/src/runtime/utils/sdk.spec.ts
  • packages/nuxt/src/runtime/utils/sdk.ts
  • packages/nuxt/tsconfig.json
  • packages/nuxt/vitest.config.ts

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Please provide elements packages for other frameworks

3 participants

@Jorgagu@vinckr@aeneasr
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

feat: add Vue 3 and Nuxt integration packages - #586

Open
Jorgagu wants to merge 3 commits into
ory:mainfrom
Jorgagu:feat/add-vue-nuxt-packages
Open

feat: add Vue 3 and Nuxt integration packages#586
Jorgagu wants to merge 3 commits into
ory:mainfrom
Jorgagu:feat/add-vue-nuxt-packages

Conversation

@Jorgagu

@JorgaguJorgagu commented Jan 18, 2026

Copy link
Copy Markdown
Contributor

This PR adds Vue 3 and Nuxt integration packages for Ory Elements, bringing feature parity with the existing React/Next.js implementation.

New Packages

@ory/elements-vue - Vue 3 component library for Ory authentication UIs

  • Complete set of UI components for Login, Registration, Recovery, Verification, Settings, and Consent flows
  • Vue 3 Composition API with <script setup> syntax
  • Full TypeScript support with proper type inference
  • Default theme with Tailwind CSS v4 styling
  • Internationalization support (80+ locales)
  • Session management via SessionProvider
  • Customizable components through slot overrides
  • Storybook setup for component development and documentation

@ory/nuxt - Nuxt 3/4 integration module

  • Auto-imported composables: useOryLogin, useOryRegistration, useOryRecovery, useOryVerification, useOrySettings, useOrySession, useOryLogout, useOryFlowError
  • Server-side proxy for secure cookie handling
  • Auth middleware for route protection
  • Environment-based SDK URL configuration (NUXT_PUBLIC_ORY_SDK_URL)
  • SSR-compatible session hydration

Example Application

Complete Nuxt example app demonstrating all authentication flows at examples/nuxt-app.

Related Issue or Design Document

Fixes#581

Checklist

  • I have read the contributing guidelines and signed the CLA.
  • I have referenced an issue containing the design document if my change introduces a new feature.
  • I have read the security policy.
  • I confirm that this pull request does not address a security vulnerability.
    If this pull request addresses a security vulnerability,
    I confirm that I got approval (please contact security@ory.sh) from the maintainers to push the changes.
  • I have added tests that prove my fix is effective or that my feature works.
  • I have added the necessary documentation within the code base (if appropriate).

Further comments

The Vue/Nuxt packages follow the same architecture patterns as the React/Next.js implementation:

  • Same component hierarchy and naming conventions
  • Same context/provider architecture (using Vue's provide/inject)
  • Same flow handling logic and state management
  • Same theming system structure with customizable components
  • Same utility functions and SDK helpers

All authentication methods are supported including password, passwordless (code), social login (OIDC), passkeys, WebAuthn, TOTP, and recovery codes.

This fixes the issue #581

@changeset-bot

changeset-botBot commented Jan 18, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 1bf47b5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel

vercelBot commented Jan 18, 2026

Copy link
Copy Markdown

@Jorgagu is attempting to deploy a commit to the ory Team on Vercel.

A member of the Team first needs to authorize it.

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from c71b462 to 6e9245bCompareJanuary 18, 2026 17:23
@codecov

codecovBot commented Jan 18, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 60.64%. Comparing base (f3fad4d) to head (1bf47b5).
⚠️ Report is 358 commits behind head on main.

Additional details and impacted files
@@ Coverage Diff @@## main #586 +/- ##
===========================================
+ Coverage 42.43% 60.64% +18.21% 
===========================================
Files 136 182 +46 Lines 2008 3679 +1671 Branches 288 610 +322 ===========================================
+ Hits 852 2231 +1379 - Misses 1149 1323 +174 - Partials 7 125 +118 
ComponentsCoverage Δ
@ory/elements-react60.48% <ø> (+23.69%)⬆️
@ory/nextjs61.51% <ø> (-4.47%)⬇️
🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Jorgagu

Copy link
Copy Markdown
ContributorAuthor

Hi @jonas-jonas@aeneasr@vinckr, this PR is ready for review 🎉

👋 @Jannik-Hm@Saganic, could you please test this as well and let me know if I missed anything during my own testing?

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch 5 times, most recently from b1f6174 to c1cc2f7CompareJanuary 19, 2026 10:05
@vinckr

Copy link
Copy Markdown
Member

Hey @Jorgagu
awesome, thanks!
Will take a look with @jonas-jonas as soon as time permits.

to resolve the format CI, can you run make format on your branch?

🐝

@Jorgagu

Copy link
Copy Markdown
ContributorAuthor

@vinckr thanks! I ran make format, but it also reformatted some files that weren’t changed in this PR.

@aeneasr

Copy link
Copy Markdown
Member

Cool stuff man! Given the massive size of the PR I'm not sure how quickly we can review this. We also need to figure out a way to add this to our e2e test suite (currently not open sourced) to ensure the advertised functionality matches the requirements. We also need to figure out who will be responsible on the team for maintaining those SDKs going forward (e.g. when we introduce new features). May I ask which approach you took to transfer the react elements to vue and nuxt? It will help us speed up review.

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 1723f6e to 74080aeCompareJanuary 27, 2026 12:11
@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 74080ae to 741b30aCompareMarch 14, 2026 19:54
Port @ory/elements-vue, @ory/nuxt, and the nuxt-app example onto the pnpm
workspace. Reference @ory/client-fetch 1.22.37 like the sibling packages,
use workspace protocol for internal deps, and wire nx release groups,
eslint vue support, and api-extractor reports for the new packages.
Port the component enhancement pass onto the pnpm workspace:
- replace the per-icon modules with a unified Icon component and extract
the icon typing into ui/types for lint-safe type imports
- add ProviderLogo with real OIDC provider logos and a provider-logos entry
- add settings toasts through vue-sonner (DefaultToast, showToast)
- extract SSO rendering into OryFormSsoForm and DefaultSsoButtonContainer
- handle flows without visible authentication methods in OryForm
- support the OAuth2 consent flow in the default card header
- keep storybook tooling at the workspace root per repo convention, adding
the vue3 framework packages at the shared storybook version
- regenerate the elements-vue API reports
Add a Storybook configuration for the Vue package mirroring the
elements-react setup: @storybook/vue3-vite framework, addon set
(essentials, interactions, a11y, storybook-addon-mock), Inter font
assets, and vite aliases resolving @ory/elements-vue to the package
source and $snapshots to the shared elements-react stub responses.
Port the full story tree (login, registration, recovery, verification,
settings, consent, error, customized) and shared story utilities.
Adaptations against the original branch content:
- import LoginFlowActiveEnum from the @ory/client-fetch package root
instead of a deep src/models path not exported by 1.22.37
- align captcha, organization, and refresh code stories with the
current stub-responses layout (interactive/hidden/client-error
captcha variants, organization-oidc/organization-saml splits,
renamed refresh code fixtures)
- load @tailwindcss/vite through a dynamic import because the package
is ESM-only and Storybook evaluates main.ts as CommonJS
- add an eslint override for packages/elements-vue/stories matching
the elements-react stories override
@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 741b30a to 1bf47b5CompareJuly 20, 2026 22:25
@coderabbitai

Copy link
Copy Markdown

Important

Review skipped

Too many files!

This PR contains 367 files, which is 267 over the limit of 100.

To get a review, narrow the scope:
• coderabbit review --committed # exclude uncommitted changes
• coderabbit review --dir # limit to a subdirectory
• coderabbit review --base # compare against a closer base

Upgrade to a paid plan to raise the limit.

Usage-priced reviews support at most 300 files.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 1c8d9337-1474-4668-a0f2-c31fdbc737b6

📥 Commits

Reviewing files that changed from the base of the PR and between 11d7877 and 1bf47b5.

⛔ Files ignored due to path filters (6)
  • examples/nuxt-app/public/favicon.ico is excluded by !**/*.ico
  • examples/nuxt-app/public/ory-logo.svg is excluded by !**/*.svg
  • packages/elements-vue/.storybook/public/InterVariable.woff2 is excluded by !**/*.woff2
  • packages/elements-vue/src/theme/default/assets/ory-badge-horizontal.svg is excluded by !**/*.svg
  • packages/elements-vue/src/theme/default/assets/ory-badge-vertical.svg is excluded by !**/*.svg
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (367)
  • .editorconfig
  • .github/workflows/release.yml
  • .gitignore
  • eslint.config.mjs
  • examples/nuxt-app/.env.example
  • examples/nuxt-app/.gitignore
  • examples/nuxt-app/README.md
  • examples/nuxt-app/app.vue
  • examples/nuxt-app/assets/css/main.css
  • examples/nuxt-app/layouts/auth.vue
  • examples/nuxt-app/layouts/default.vue
  • examples/nuxt-app/nuxt.config.ts
  • examples/nuxt-app/package.json
  • examples/nuxt-app/pages/error.vue
  • examples/nuxt-app/pages/index.vue
  • examples/nuxt-app/pages/login.vue
  • examples/nuxt-app/pages/recovery.vue
  • examples/nuxt-app/pages/registration.vue
  • examples/nuxt-app/pages/session.vue
  • examples/nuxt-app/pages/settings.vue
  • examples/nuxt-app/pages/verification.vue
  • examples/nuxt-app/project.json
  • nx.json
  • package.json
  • packages/elements-vue/.storybook/global.css
  • packages/elements-vue/.storybook/main.ts
  • packages/elements-vue/.storybook/preview-head.html
  • packages/elements-vue/.storybook/preview.ts
  • packages/elements-vue/.storybook/public/inter.css
  • packages/elements-vue/api-report/elements-vue-client.api.json
  • packages/elements-vue/api-report/elements-vue-client.api.md
  • packages/elements-vue/api-report/elements-vue-theme.api.json
  • packages/elements-vue/api-report/elements-vue-theme.api.md
  • packages/elements-vue/api-report/elements-vue.api.json
  • packages/elements-vue/api-report/elements-vue.api.md
  • packages/elements-vue/config/api-extractor-client.json
  • packages/elements-vue/config/api-extractor-core.json
  • packages/elements-vue/config/api-extractor-theme.json
  • packages/elements-vue/package.json
  • packages/elements-vue/project.json
  • packages/elements-vue/src/client/SessionProvider.vue
  • packages/elements-vue/src/client/index.ts
  • packages/elements-vue/src/client/useSession.spec.ts
  • packages/elements-vue/src/client/useSession.ts
  • packages/elements-vue/src/components/OryPageHeader.vue
  • packages/elements-vue/src/components/OryProvider.vue
  • packages/elements-vue/src/components/card/OryCard.vue
  • packages/elements-vue/src/components/card/OryCardContent.vue
  • packages/elements-vue/src/components/card/OryCardFooter.vue
  • packages/elements-vue/src/components/card/OryCardHeader.vue
  • packages/elements-vue/src/components/card/OryConsentCard.vue
  • packages/elements-vue/src/components/card/OrySelfServiceFlowCard.vue
  • packages/elements-vue/src/components/card/index.ts
  • packages/elements-vue/src/components/card/two-step/MethodActiveForm.vue
  • packages/elements-vue/src/components/card/two-step/ProvideIdentifierForm.vue
  • packages/elements-vue/src/components/card/two-step/SelectMethodForm.vue
  • packages/elements-vue/src/components/card/two-step/index.ts
  • packages/elements-vue/src/components/card/two-step/utils.ts
  • packages/elements-vue/src/components/form/OryForm.vue
  • packages/elements-vue/src/components/form/OryFormGroup.vue
  • packages/elements-vue/src/components/form/OryFormSsoForm.vue
  • packages/elements-vue/src/components/form/OryMessages.vue
  • packages/elements-vue/src/components/form/index.ts
  • packages/elements-vue/src/components/form/nodes/OryNode.vue
  • packages/elements-vue/src/components/form/nodes/index.ts
  • packages/elements-vue/src/components/index.ts
  • packages/elements-vue/src/components/settings/OrySettingsCard.vue
  • packages/elements-vue/src/components/settings/SettingsSection.vue
  • packages/elements-vue/src/components/settings/index.ts
  • packages/elements-vue/src/components/types.ts
  • packages/elements-vue/src/composables/index.ts
  • packages/elements-vue/src/composables/useComponents.spec.ts
  • packages/elements-vue/src/composables/useComponents.ts
  • packages/elements-vue/src/composables/useOryConfig.spec.ts
  • packages/elements-vue/src/composables/useOryConfig.ts
  • packages/elements-vue/src/composables/useOryFlow.spec.ts
  • packages/elements-vue/src/composables/useOryFlow.ts
  • packages/elements-vue/src/composables/useOryForm.ts
  • packages/elements-vue/src/composables/useOryFormContext.ts
  • packages/elements-vue/src/composables/useOryIntl.spec.ts
  • packages/elements-vue/src/composables/useOryIntl.ts
  • packages/elements-vue/src/composables/useResendCode.ts
  • packages/elements-vue/src/composables/useSlotContent.ts
  • packages/elements-vue/src/index.ts
  • packages/elements-vue/src/locales/af.json
  • packages/elements-vue/src/locales/ak.json
  • packages/elements-vue/src/locales/am.json
  • packages/elements-vue/src/locales/ar.json
  • packages/elements-vue/src/locales/as.json
  • packages/elements-vue/src/locales/az.json
  • packages/elements-vue/src/locales/be.json
  • packages/elements-vue/src/locales/bg.json
  • packages/elements-vue/src/locales/bm.json
  • packages/elements-vue/src/locales/bn.json
  • packages/elements-vue/src/locales/ca.json
  • packages/elements-vue/src/locales/cs.json
  • packages/elements-vue/src/locales/da.json
  • packages/elements-vue/src/locales/de.json
  • packages/elements-vue/src/locales/el.json
  • packages/elements-vue/src/locales/en.json
  • packages/elements-vue/src/locales/es.json
  • packages/elements-vue/src/locales/et.json
  • packages/elements-vue/src/locales/fa.json
  • packages/elements-vue/src/locales/fi.json
  • packages/elements-vue/src/locales/fr.json
  • packages/elements-vue/src/locales/gu.json
  • packages/elements-vue/src/locales/ha.json
  • packages/elements-vue/src/locales/he.json
  • packages/elements-vue/src/locales/hi.json
  • packages/elements-vue/src/locales/hr.json
  • packages/elements-vue/src/locales/hu.json
  • packages/elements-vue/src/locales/hy.json
  • packages/elements-vue/src/locales/id.json
  • packages/elements-vue/src/locales/ig.json
  • packages/elements-vue/src/locales/index.ts
  • packages/elements-vue/src/locales/it.json
  • packages/elements-vue/src/locales/ja.json
  • packages/elements-vue/src/locales/ka.json
  • packages/elements-vue/src/locales/kk.json
  • packages/elements-vue/src/locales/km.json
  • packages/elements-vue/src/locales/kn.json
  • packages/elements-vue/src/locales/ko.json
  • packages/elements-vue/src/locales/ku.json
  • packages/elements-vue/src/locales/ky.json
  • packages/elements-vue/src/locales/lt.json
  • packages/elements-vue/src/locales/lv.json
  • packages/elements-vue/src/locales/mk.json
  • packages/elements-vue/src/locales/ml.json
  • packages/elements-vue/src/locales/mn.json
  • packages/elements-vue/src/locales/mr.json
  • packages/elements-vue/src/locales/ms.json
  • packages/elements-vue/src/locales/my.json
  • packages/elements-vue/src/locales/ne.json
  • packages/elements-vue/src/locales/nl.json
  • packages/elements-vue/src/locales/no.json
  • packages/elements-vue/src/locales/or.json
  • packages/elements-vue/src/locales/pa.json
  • packages/elements-vue/src/locales/pl.json
  • packages/elements-vue/src/locales/ps.json
  • packages/elements-vue/src/locales/pt.json
  • packages/elements-vue/src/locales/ro.json
  • packages/elements-vue/src/locales/ru.json
  • packages/elements-vue/src/locales/sd.json
  • packages/elements-vue/src/locales/si.json
  • packages/elements-vue/src/locales/sk.json
  • packages/elements-vue/src/locales/sl.json
  • packages/elements-vue/src/locales/so.json
  • packages/elements-vue/src/locales/sq.json
  • packages/elements-vue/src/locales/sr.json
  • packages/elements-vue/src/locales/su.json
  • packages/elements-vue/src/locales/sv.json
  • packages/elements-vue/src/locales/sw.json
  • packages/elements-vue/src/locales/ta.json
  • packages/elements-vue/src/locales/te.json
  • packages/elements-vue/src/locales/tg.json
  • packages/elements-vue/src/locales/th.json
  • packages/elements-vue/src/locales/tk.json
  • packages/elements-vue/src/locales/tl.json
  • packages/elements-vue/src/locales/tr.json
  • packages/elements-vue/src/locales/ug.json
  • packages/elements-vue/src/locales/uk.json
  • packages/elements-vue/src/locales/ur.json
  • packages/elements-vue/src/locales/uz.json
  • packages/elements-vue/src/locales/vi.json
  • packages/elements-vue/src/locales/xh.json
  • packages/elements-vue/src/locales/yo.json
  • packages/elements-vue/src/locales/zh.json
  • packages/elements-vue/src/locales/zu.json
  • packages/elements-vue/src/theme/default/assets/icons/index.ts
  • packages/elements-vue/src/theme/default/components/card/DefaultAuthMethodListContainer.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultAuthMethodListItem.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultBadge.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCard.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardContent.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardFooter.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardHeader.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardLogo.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCurrentIdentifierButton.vue
  • packages/elements-vue/src/theme/default/components/card/index.ts
  • packages/elements-vue/src/theme/default/components/form/DefaultAnchor.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultButton.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCaptcha.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCheckbox.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCodeInput.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultConsentCheckbox.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultDivider.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultFormContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultGroupContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultImage.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultInput.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultLabel.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultMessage.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultMessageContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSection.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSectionContent.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSectionFooter.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSsoButton.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSsoButtonContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultText.vue
  • packages/elements-vue/src/theme/default/components/form/PinInput.vue
  • packages/elements-vue/src/theme/default/components/form/Spinner.vue
  • packages/elements-vue/src/theme/default/components/form/index.ts
  • packages/elements-vue/src/theme/default/components/index.ts
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsOidc.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsPasskey.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsRecoveryCodes.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsTotp.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsWebauthn.vue
  • packages/elements-vue/src/theme/default/components/settings/SettingsRemoveButton.vue
  • packages/elements-vue/src/theme/default/components/settings/index.ts
  • packages/elements-vue/src/theme/default/components/settings/utils.ts
  • packages/elements-vue/src/theme/default/components/ui/DefaultPageHeader.vue
  • packages/elements-vue/src/theme/default/components/ui/DefaultToast.vue
  • packages/elements-vue/src/theme/default/components/ui/Icon.vue
  • packages/elements-vue/src/theme/default/components/ui/ProviderLogo.vue
  • packages/elements-vue/src/theme/default/components/ui/UserAvatar.vue
  • packages/elements-vue/src/theme/default/components/ui/UserMenu.vue
  • packages/elements-vue/src/theme/default/components/ui/index.ts
  • packages/elements-vue/src/theme/default/components/ui/types.ts
  • packages/elements-vue/src/theme/default/flows/Consent.vue
  • packages/elements-vue/src/theme/default/flows/Error.vue
  • packages/elements-vue/src/theme/default/flows/Login.vue
  • packages/elements-vue/src/theme/default/flows/Recovery.vue
  • packages/elements-vue/src/theme/default/flows/Registration.vue
  • packages/elements-vue/src/theme/default/flows/Settings.vue
  • packages/elements-vue/src/theme/default/flows/Verification.vue
  • packages/elements-vue/src/theme/default/flows/index.ts
  • packages/elements-vue/src/theme/default/flows/types.ts
  • packages/elements-vue/src/theme/default/getOryComponents.ts
  • packages/elements-vue/src/theme/default/index.ts
  • packages/elements-vue/src/theme/default/provider-logos/index.ts
  • packages/elements-vue/src/theme/default/styles.css
  • packages/elements-vue/src/theme/default/utils/cn.ts
  • packages/elements-vue/src/theme/default/utils/constructCardHeader.ts
  • packages/elements-vue/src/theme/default/utils/i18n.ts
  • packages/elements-vue/src/theme/default/utils/logout.ts
  • packages/elements-vue/src/theme/default/utils/oauth2.ts
  • packages/elements-vue/src/theme/default/utils/url.ts
  • packages/elements-vue/src/theme/default/utils/user.ts
  • packages/elements-vue/src/types.ts
  • packages/elements-vue/src/util/client.ts
  • packages/elements-vue/src/util/flowContainer.ts
  • packages/elements-vue/src/util/getLogoutUrl.ts
  • packages/elements-vue/src/util/i18n/index.ts
  • packages/elements-vue/src/util/index.ts
  • packages/elements-vue/src/util/nodeGroups.spec.ts
  • packages/elements-vue/src/util/nodeGroups.ts
  • packages/elements-vue/src/util/nodes.spec.ts
  • packages/elements-vue/src/util/nodes.ts
  • packages/elements-vue/src/util/onSubmitLogin.ts
  • packages/elements-vue/src/util/onSubmitRecovery.ts
  • packages/elements-vue/src/util/onSubmitRegistration.ts
  • packages/elements-vue/src/util/onSubmitSettings.ts
  • packages/elements-vue/src/util/onSubmitVerification.ts
  • packages/elements-vue/src/util/removeFalsyValues.spec.ts
  • packages/elements-vue/src/util/removeFalsyValues.ts
  • packages/elements-vue/src/util/sdk-helpers/error.ts
  • packages/elements-vue/src/util/sdk-helpers/index.ts
  • packages/elements-vue/src/util/sdk-helpers/urlHelpers.ts
  • packages/elements-vue/src/util/sdk-helpers/utils.ts
  • packages/elements-vue/src/util/showToast.ts
  • packages/elements-vue/src/util/submitHandler.ts
  • packages/elements-vue/src/util/test-id.spec.ts
  • packages/elements-vue/src/util/test-id.ts
  • packages/elements-vue/src/util/ui/index.spec.ts
  • packages/elements-vue/src/util/ui/index.ts
  • packages/elements-vue/stories/components/consent/consent.stories.ts
  • packages/elements-vue/stories/components/error/error.stories.ts
  • packages/elements-vue/stories/components/error/errors/oidc_continuity.json
  • packages/elements-vue/stories/components/login/1fa/account-linking.stories.ts
  • packages/elements-vue/stories/components/login/1fa/all-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/captcha-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/code-refresh-with-password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/code-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods-with-mitigation.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods-without-mitigation.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/captcha.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/code.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/oidc.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/passkey.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/saml.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/webauthn.stories.ts
  • packages/elements-vue/stories/components/login/1fa/oidc-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/organization.stories.ts
  • packages/elements-vue/stories/components/login/1fa/passkey-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/password-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/saml-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/all.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/captcha.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/code.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/none.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/oidc.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/passkey.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/saml.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/webauthn.stories.ts
  • packages/elements-vue/stories/components/login/1fa/webauthn-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/all.refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/all.stories.ts
  • packages/elements-vue/stories/components/login/2fa/code-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/code.stories.ts
  • packages/elements-vue/stories/components/login/2fa/lookup_secret-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/lookup_secret.stories.ts
  • packages/elements-vue/stories/components/login/2fa/totp-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/totp.stories.ts
  • packages/elements-vue/stories/components/login/2fa/webauthn-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/webauthn.stories.ts
  • packages/elements-vue/stories/components/recovery/code.stories.ts
  • packages/elements-vue/stories/components/recovery_v2/code.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/all-methods.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/captcha.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/code.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/oidc.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/password.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/saml.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/webauthn.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/all-methods.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/captcha.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/code.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/oidc.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/organization.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/password.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/saml.stories.ts
  • packages/elements-vue/stories/components/settings/all-2fa.stories.ts
  • packages/elements-vue/stories/components/settings/all.stories.ts
  • packages/elements-vue/stories/components/settings/lookup_secrets.stories.ts
  • packages/elements-vue/stories/components/settings/oidc.stories.ts
  • packages/elements-vue/stories/components/settings/passkey.stories.ts
  • packages/elements-vue/stories/components/settings/saml.stories.ts
  • packages/elements-vue/stories/components/settings/totp.stories.ts
  • packages/elements-vue/stories/components/settings/webauthn.stories.ts
  • packages/elements-vue/stories/components/verification/code.stories.ts
  • packages/elements-vue/stories/customized/components/MyCustomCardHeader.vue
  • packages/elements-vue/stories/customized/input.stories.ts
  • packages/elements-vue/stories/utils.ts
  • packages/elements-vue/tsconfig.json
  • packages/elements-vue/tsup.config.ts
  • packages/elements-vue/vitest.config.ts
  • packages/nuxt/.nuxtrc
  • packages/nuxt/api-report/nuxt.api.json
  • packages/nuxt/api-report/nuxt.api.md
  • packages/nuxt/config/api-extractor.json
  • packages/nuxt/package.json
  • packages/nuxt/project.json
  • packages/nuxt/src/__mocks__/imports.ts
  • packages/nuxt/src/module.ts
  • packages/nuxt/src/runtime/composables/index.ts
  • packages/nuxt/src/runtime/composables/useOryConfig.ts
  • packages/nuxt/src/runtime/composables/useOryFlow.ts
  • packages/nuxt/src/runtime/composables/useOryFlowError.ts
  • packages/nuxt/src/runtime/composables/useOryLogout.ts
  • packages/nuxt/src/runtime/composables/useOrySession.ts
  • packages/nuxt/src/runtime/middleware/auth.ts
  • packages/nuxt/src/runtime/server/proxy.ts
  • packages/nuxt/src/runtime/types.ts
  • packages/nuxt/src/runtime/utils/cookie.spec.ts
  • packages/nuxt/src/runtime/utils/cookie.ts
  • packages/nuxt/src/runtime/utils/headers.spec.ts
  • packages/nuxt/src/runtime/utils/headers.ts
  • packages/nuxt/src/runtime/utils/rewrite.spec.ts
  • packages/nuxt/src/runtime/utils/rewrite.ts
  • packages/nuxt/src/runtime/utils/sdk.spec.ts
  • packages/nuxt/src/runtime/utils/sdk.ts
  • packages/nuxt/tsconfig.json
  • packages/nuxt/vitest.config.ts

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Please provide elements packages for other frameworks

3 participants

@Jorgagu@vinckr@aeneasr
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat: add Vue 3 and Nuxt integration packages - #586

Open
Jorgagu wants to merge 3 commits into
ory:mainfrom
Jorgagu:feat/add-vue-nuxt-packages
Open

feat: add Vue 3 and Nuxt integration packages#586
Jorgagu wants to merge 3 commits into
ory:mainfrom
Jorgagu:feat/add-vue-nuxt-packages

Conversation

@Jorgagu

@JorgaguJorgagu commented Jan 18, 2026

Copy link
Copy Markdown
Contributor

This PR adds Vue 3 and Nuxt integration packages for Ory Elements, bringing feature parity with the existing React/Next.js implementation.

New Packages

@ory/elements-vue - Vue 3 component library for Ory authentication UIs

  • Complete set of UI components for Login, Registration, Recovery, Verification, Settings, and Consent flows
  • Vue 3 Composition API with <script setup> syntax
  • Full TypeScript support with proper type inference
  • Default theme with Tailwind CSS v4 styling
  • Internationalization support (80+ locales)
  • Session management via SessionProvider
  • Customizable components through slot overrides
  • Storybook setup for component development and documentation

@ory/nuxt - Nuxt 3/4 integration module

  • Auto-imported composables: useOryLogin, useOryRegistration, useOryRecovery, useOryVerification, useOrySettings, useOrySession, useOryLogout, useOryFlowError
  • Server-side proxy for secure cookie handling
  • Auth middleware for route protection
  • Environment-based SDK URL configuration (NUXT_PUBLIC_ORY_SDK_URL)
  • SSR-compatible session hydration

Example Application

Complete Nuxt example app demonstrating all authentication flows at examples/nuxt-app.

Related Issue or Design Document

Fixes#581

Checklist

  • I have read the contributing guidelines and signed the CLA.
  • I have referenced an issue containing the design document if my change introduces a new feature.
  • I have read the security policy.
  • I confirm that this pull request does not address a security vulnerability.
    If this pull request addresses a security vulnerability,
    I confirm that I got approval (please contact security@ory.sh) from the maintainers to push the changes.
  • I have added tests that prove my fix is effective or that my feature works.
  • I have added the necessary documentation within the code base (if appropriate).

Further comments

The Vue/Nuxt packages follow the same architecture patterns as the React/Next.js implementation:

  • Same component hierarchy and naming conventions
  • Same context/provider architecture (using Vue's provide/inject)
  • Same flow handling logic and state management
  • Same theming system structure with customizable components
  • Same utility functions and SDK helpers

All authentication methods are supported including password, passwordless (code), social login (OIDC), passkeys, WebAuthn, TOTP, and recovery codes.

This fixes the issue #581

@changeset-bot

changeset-botBot commented Jan 18, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 1bf47b5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel

vercelBot commented Jan 18, 2026

Copy link
Copy Markdown

@Jorgagu is attempting to deploy a commit to the ory Team on Vercel.

A member of the Team first needs to authorize it.

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from c71b462 to 6e9245bCompareJanuary 18, 2026 17:23
@codecov

codecovBot commented Jan 18, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 60.64%. Comparing base (f3fad4d) to head (1bf47b5).
⚠️ Report is 358 commits behind head on main.

Additional details and impacted files
@@ Coverage Diff @@## main #586 +/- ##
===========================================
+ Coverage 42.43% 60.64% +18.21% 
===========================================
Files 136 182 +46 Lines 2008 3679 +1671 Branches 288 610 +322 ===========================================
+ Hits 852 2231 +1379 - Misses 1149 1323 +174 - Partials 7 125 +118 
ComponentsCoverage Δ
@ory/elements-react60.48% <ø> (+23.69%)⬆️
@ory/nextjs61.51% <ø> (-4.47%)⬇️
🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Jorgagu

Copy link
Copy Markdown
ContributorAuthor

Hi @jonas-jonas@aeneasr@vinckr, this PR is ready for review 🎉

👋 @Jannik-Hm@Saganic, could you please test this as well and let me know if I missed anything during my own testing?

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch 5 times, most recently from b1f6174 to c1cc2f7CompareJanuary 19, 2026 10:05
@vinckr

Copy link
Copy Markdown
Member

Hey @Jorgagu
awesome, thanks!
Will take a look with @jonas-jonas as soon as time permits.

to resolve the format CI, can you run make format on your branch?

🐝

@Jorgagu

Copy link
Copy Markdown
ContributorAuthor

@vinckr thanks! I ran make format, but it also reformatted some files that weren’t changed in this PR.

@aeneasr

Copy link
Copy Markdown
Member

Cool stuff man! Given the massive size of the PR I'm not sure how quickly we can review this. We also need to figure out a way to add this to our e2e test suite (currently not open sourced) to ensure the advertised functionality matches the requirements. We also need to figure out who will be responsible on the team for maintaining those SDKs going forward (e.g. when we introduce new features). May I ask which approach you took to transfer the react elements to vue and nuxt? It will help us speed up review.

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 1723f6e to 74080aeCompareJanuary 27, 2026 12:11
@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 74080ae to 741b30aCompareMarch 14, 2026 19:54
Port @ory/elements-vue, @ory/nuxt, and the nuxt-app example onto the pnpm
workspace. Reference @ory/client-fetch 1.22.37 like the sibling packages,
use workspace protocol for internal deps, and wire nx release groups,
eslint vue support, and api-extractor reports for the new packages.
Port the component enhancement pass onto the pnpm workspace:
- replace the per-icon modules with a unified Icon component and extract
the icon typing into ui/types for lint-safe type imports
- add ProviderLogo with real OIDC provider logos and a provider-logos entry
- add settings toasts through vue-sonner (DefaultToast, showToast)
- extract SSO rendering into OryFormSsoForm and DefaultSsoButtonContainer
- handle flows without visible authentication methods in OryForm
- support the OAuth2 consent flow in the default card header
- keep storybook tooling at the workspace root per repo convention, adding
the vue3 framework packages at the shared storybook version
- regenerate the elements-vue API reports
Add a Storybook configuration for the Vue package mirroring the
elements-react setup: @storybook/vue3-vite framework, addon set
(essentials, interactions, a11y, storybook-addon-mock), Inter font
assets, and vite aliases resolving @ory/elements-vue to the package
source and $snapshots to the shared elements-react stub responses.
Port the full story tree (login, registration, recovery, verification,
settings, consent, error, customized) and shared story utilities.
Adaptations against the original branch content:
- import LoginFlowActiveEnum from the @ory/client-fetch package root
instead of a deep src/models path not exported by 1.22.37
- align captcha, organization, and refresh code stories with the
current stub-responses layout (interactive/hidden/client-error
captcha variants, organization-oidc/organization-saml splits,
renamed refresh code fixtures)
- load @tailwindcss/vite through a dynamic import because the package
is ESM-only and Storybook evaluates main.ts as CommonJS
- add an eslint override for packages/elements-vue/stories matching
the elements-react stories override
@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 741b30a to 1bf47b5CompareJuly 20, 2026 22:25
@coderabbitai

Copy link
Copy Markdown

Important

Review skipped

Too many files!

This PR contains 367 files, which is 267 over the limit of 100.

To get a review, narrow the scope:
• coderabbit review --committed # exclude uncommitted changes
• coderabbit review --dir # limit to a subdirectory
• coderabbit review --base # compare against a closer base

Upgrade to a paid plan to raise the limit.

Usage-priced reviews support at most 300 files.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 1c8d9337-1474-4668-a0f2-c31fdbc737b6

📥 Commits

Reviewing files that changed from the base of the PR and between 11d7877 and 1bf47b5.

⛔ Files ignored due to path filters (6)
  • examples/nuxt-app/public/favicon.ico is excluded by !**/*.ico
  • examples/nuxt-app/public/ory-logo.svg is excluded by !**/*.svg
  • packages/elements-vue/.storybook/public/InterVariable.woff2 is excluded by !**/*.woff2
  • packages/elements-vue/src/theme/default/assets/ory-badge-horizontal.svg is excluded by !**/*.svg
  • packages/elements-vue/src/theme/default/assets/ory-badge-vertical.svg is excluded by !**/*.svg
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (367)
  • .editorconfig
  • .github/workflows/release.yml
  • .gitignore
  • eslint.config.mjs
  • examples/nuxt-app/.env.example
  • examples/nuxt-app/.gitignore
  • examples/nuxt-app/README.md
  • examples/nuxt-app/app.vue
  • examples/nuxt-app/assets/css/main.css
  • examples/nuxt-app/layouts/auth.vue
  • examples/nuxt-app/layouts/default.vue
  • examples/nuxt-app/nuxt.config.ts
  • examples/nuxt-app/package.json
  • examples/nuxt-app/pages/error.vue
  • examples/nuxt-app/pages/index.vue
  • examples/nuxt-app/pages/login.vue
  • examples/nuxt-app/pages/recovery.vue
  • examples/nuxt-app/pages/registration.vue
  • examples/nuxt-app/pages/session.vue
  • examples/nuxt-app/pages/settings.vue
  • examples/nuxt-app/pages/verification.vue
  • examples/nuxt-app/project.json
  • nx.json
  • package.json
  • packages/elements-vue/.storybook/global.css
  • packages/elements-vue/.storybook/main.ts
  • packages/elements-vue/.storybook/preview-head.html
  • packages/elements-vue/.storybook/preview.ts
  • packages/elements-vue/.storybook/public/inter.css
  • packages/elements-vue/api-report/elements-vue-client.api.json
  • packages/elements-vue/api-report/elements-vue-client.api.md
  • packages/elements-vue/api-report/elements-vue-theme.api.json
  • packages/elements-vue/api-report/elements-vue-theme.api.md
  • packages/elements-vue/api-report/elements-vue.api.json
  • packages/elements-vue/api-report/elements-vue.api.md
  • packages/elements-vue/config/api-extractor-client.json
  • packages/elements-vue/config/api-extractor-core.json
  • packages/elements-vue/config/api-extractor-theme.json
  • packages/elements-vue/package.json
  • packages/elements-vue/project.json
  • packages/elements-vue/src/client/SessionProvider.vue
  • packages/elements-vue/src/client/index.ts
  • packages/elements-vue/src/client/useSession.spec.ts
  • packages/elements-vue/src/client/useSession.ts
  • packages/elements-vue/src/components/OryPageHeader.vue
  • packages/elements-vue/src/components/OryProvider.vue
  • packages/elements-vue/src/components/card/OryCard.vue
  • packages/elements-vue/src/components/card/OryCardContent.vue
  • packages/elements-vue/src/components/card/OryCardFooter.vue
  • packages/elements-vue/src/components/card/OryCardHeader.vue
  • packages/elements-vue/src/components/card/OryConsentCard.vue
  • packages/elements-vue/src/components/card/OrySelfServiceFlowCard.vue
  • packages/elements-vue/src/components/card/index.ts
  • packages/elements-vue/src/components/card/two-step/MethodActiveForm.vue
  • packages/elements-vue/src/components/card/two-step/ProvideIdentifierForm.vue
  • packages/elements-vue/src/components/card/two-step/SelectMethodForm.vue
  • packages/elements-vue/src/components/card/two-step/index.ts
  • packages/elements-vue/src/components/card/two-step/utils.ts
  • packages/elements-vue/src/components/form/OryForm.vue
  • packages/elements-vue/src/components/form/OryFormGroup.vue
  • packages/elements-vue/src/components/form/OryFormSsoForm.vue
  • packages/elements-vue/src/components/form/OryMessages.vue
  • packages/elements-vue/src/components/form/index.ts
  • packages/elements-vue/src/components/form/nodes/OryNode.vue
  • packages/elements-vue/src/components/form/nodes/index.ts
  • packages/elements-vue/src/components/index.ts
  • packages/elements-vue/src/components/settings/OrySettingsCard.vue
  • packages/elements-vue/src/components/settings/SettingsSection.vue
  • packages/elements-vue/src/components/settings/index.ts
  • packages/elements-vue/src/components/types.ts
  • packages/elements-vue/src/composables/index.ts
  • packages/elements-vue/src/composables/useComponents.spec.ts
  • packages/elements-vue/src/composables/useComponents.ts
  • packages/elements-vue/src/composables/useOryConfig.spec.ts
  • packages/elements-vue/src/composables/useOryConfig.ts
  • packages/elements-vue/src/composables/useOryFlow.spec.ts
  • packages/elements-vue/src/composables/useOryFlow.ts
  • packages/elements-vue/src/composables/useOryForm.ts
  • packages/elements-vue/src/composables/useOryFormContext.ts
  • packages/elements-vue/src/composables/useOryIntl.spec.ts
  • packages/elements-vue/src/composables/useOryIntl.ts
  • packages/elements-vue/src/composables/useResendCode.ts
  • packages/elements-vue/src/composables/useSlotContent.ts
  • packages/elements-vue/src/index.ts
  • packages/elements-vue/src/locales/af.json
  • packages/elements-vue/src/locales/ak.json
  • packages/elements-vue/src/locales/am.json
  • packages/elements-vue/src/locales/ar.json
  • packages/elements-vue/src/locales/as.json
  • packages/elements-vue/src/locales/az.json
  • packages/elements-vue/src/locales/be.json
  • packages/elements-vue/src/locales/bg.json
  • packages/elements-vue/src/locales/bm.json
  • packages/elements-vue/src/locales/bn.json
  • packages/elements-vue/src/locales/ca.json
  • packages/elements-vue/src/locales/cs.json
  • packages/elements-vue/src/locales/da.json
  • packages/elements-vue/src/locales/de.json
  • packages/elements-vue/src/locales/el.json
  • packages/elements-vue/src/locales/en.json
  • packages/elements-vue/src/locales/es.json
  • packages/elements-vue/src/locales/et.json
  • packages/elements-vue/src/locales/fa.json
  • packages/elements-vue/src/locales/fi.json
  • packages/elements-vue/src/locales/fr.json
  • packages/elements-vue/src/locales/gu.json
  • packages/elements-vue/src/locales/ha.json
  • packages/elements-vue/src/locales/he.json
  • packages/elements-vue/src/locales/hi.json
  • packages/elements-vue/src/locales/hr.json
  • packages/elements-vue/src/locales/hu.json
  • packages/elements-vue/src/locales/hy.json
  • packages/elements-vue/src/locales/id.json
  • packages/elements-vue/src/locales/ig.json
  • packages/elements-vue/src/locales/index.ts
  • packages/elements-vue/src/locales/it.json
  • packages/elements-vue/src/locales/ja.json
  • packages/elements-vue/src/locales/ka.json
  • packages/elements-vue/src/locales/kk.json
  • packages/elements-vue/src/locales/km.json
  • packages/elements-vue/src/locales/kn.json
  • packages/elements-vue/src/locales/ko.json
  • packages/elements-vue/src/locales/ku.json
  • packages/elements-vue/src/locales/ky.json
  • packages/elements-vue/src/locales/lt.json
  • packages/elements-vue/src/locales/lv.json
  • packages/elements-vue/src/locales/mk.json
  • packages/elements-vue/src/locales/ml.json
  • packages/elements-vue/src/locales/mn.json
  • packages/elements-vue/src/locales/mr.json
  • packages/elements-vue/src/locales/ms.json
  • packages/elements-vue/src/locales/my.json
  • packages/elements-vue/src/locales/ne.json
  • packages/elements-vue/src/locales/nl.json
  • packages/elements-vue/src/locales/no.json
  • packages/elements-vue/src/locales/or.json
  • packages/elements-vue/src/locales/pa.json
  • packages/elements-vue/src/locales/pl.json
  • packages/elements-vue/src/locales/ps.json
  • packages/elements-vue/src/locales/pt.json
  • packages/elements-vue/src/locales/ro.json
  • packages/elements-vue/src/locales/ru.json
  • packages/elements-vue/src/locales/sd.json
  • packages/elements-vue/src/locales/si.json
  • packages/elements-vue/src/locales/sk.json
  • packages/elements-vue/src/locales/sl.json
  • packages/elements-vue/src/locales/so.json
  • packages/elements-vue/src/locales/sq.json
  • packages/elements-vue/src/locales/sr.json
  • packages/elements-vue/src/locales/su.json
  • packages/elements-vue/src/locales/sv.json
  • packages/elements-vue/src/locales/sw.json
  • packages/elements-vue/src/locales/ta.json
  • packages/elements-vue/src/locales/te.json
  • packages/elements-vue/src/locales/tg.json
  • packages/elements-vue/src/locales/th.json
  • packages/elements-vue/src/locales/tk.json
  • packages/elements-vue/src/locales/tl.json
  • packages/elements-vue/src/locales/tr.json
  • packages/elements-vue/src/locales/ug.json
  • packages/elements-vue/src/locales/uk.json
  • packages/elements-vue/src/locales/ur.json
  • packages/elements-vue/src/locales/uz.json
  • packages/elements-vue/src/locales/vi.json
  • packages/elements-vue/src/locales/xh.json
  • packages/elements-vue/src/locales/yo.json
  • packages/elements-vue/src/locales/zh.json
  • packages/elements-vue/src/locales/zu.json
  • packages/elements-vue/src/theme/default/assets/icons/index.ts
  • packages/elements-vue/src/theme/default/components/card/DefaultAuthMethodListContainer.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultAuthMethodListItem.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultBadge.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCard.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardContent.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardFooter.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardHeader.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardLogo.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCurrentIdentifierButton.vue
  • packages/elements-vue/src/theme/default/components/card/index.ts
  • packages/elements-vue/src/theme/default/components/form/DefaultAnchor.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultButton.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCaptcha.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCheckbox.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCodeInput.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultConsentCheckbox.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultDivider.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultFormContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultGroupContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultImage.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultInput.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultLabel.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultMessage.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultMessageContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSection.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSectionContent.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSectionFooter.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSsoButton.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSsoButtonContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultText.vue
  • packages/elements-vue/src/theme/default/components/form/PinInput.vue
  • packages/elements-vue/src/theme/default/components/form/Spinner.vue
  • packages/elements-vue/src/theme/default/components/form/index.ts
  • packages/elements-vue/src/theme/default/components/index.ts
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsOidc.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsPasskey.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsRecoveryCodes.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsTotp.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsWebauthn.vue
  • packages/elements-vue/src/theme/default/components/settings/SettingsRemoveButton.vue
  • packages/elements-vue/src/theme/default/components/settings/index.ts
  • packages/elements-vue/src/theme/default/components/settings/utils.ts
  • packages/elements-vue/src/theme/default/components/ui/DefaultPageHeader.vue
  • packages/elements-vue/src/theme/default/components/ui/DefaultToast.vue
  • packages/elements-vue/src/theme/default/components/ui/Icon.vue
  • packages/elements-vue/src/theme/default/components/ui/ProviderLogo.vue
  • packages/elements-vue/src/theme/default/components/ui/UserAvatar.vue
  • packages/elements-vue/src/theme/default/components/ui/UserMenu.vue
  • packages/elements-vue/src/theme/default/components/ui/index.ts
  • packages/elements-vue/src/theme/default/components/ui/types.ts
  • packages/elements-vue/src/theme/default/flows/Consent.vue
  • packages/elements-vue/src/theme/default/flows/Error.vue
  • packages/elements-vue/src/theme/default/flows/Login.vue
  • packages/elements-vue/src/theme/default/flows/Recovery.vue
  • packages/elements-vue/src/theme/default/flows/Registration.vue
  • packages/elements-vue/src/theme/default/flows/Settings.vue
  • packages/elements-vue/src/theme/default/flows/Verification.vue
  • packages/elements-vue/src/theme/default/flows/index.ts
  • packages/elements-vue/src/theme/default/flows/types.ts
  • packages/elements-vue/src/theme/default/getOryComponents.ts
  • packages/elements-vue/src/theme/default/index.ts
  • packages/elements-vue/src/theme/default/provider-logos/index.ts
  • packages/elements-vue/src/theme/default/styles.css
  • packages/elements-vue/src/theme/default/utils/cn.ts
  • packages/elements-vue/src/theme/default/utils/constructCardHeader.ts
  • packages/elements-vue/src/theme/default/utils/i18n.ts
  • packages/elements-vue/src/theme/default/utils/logout.ts
  • packages/elements-vue/src/theme/default/utils/oauth2.ts
  • packages/elements-vue/src/theme/default/utils/url.ts
  • packages/elements-vue/src/theme/default/utils/user.ts
  • packages/elements-vue/src/types.ts
  • packages/elements-vue/src/util/client.ts
  • packages/elements-vue/src/util/flowContainer.ts
  • packages/elements-vue/src/util/getLogoutUrl.ts
  • packages/elements-vue/src/util/i18n/index.ts
  • packages/elements-vue/src/util/index.ts
  • packages/elements-vue/src/util/nodeGroups.spec.ts
  • packages/elements-vue/src/util/nodeGroups.ts
  • packages/elements-vue/src/util/nodes.spec.ts
  • packages/elements-vue/src/util/nodes.ts
  • packages/elements-vue/src/util/onSubmitLogin.ts
  • packages/elements-vue/src/util/onSubmitRecovery.ts
  • packages/elements-vue/src/util/onSubmitRegistration.ts
  • packages/elements-vue/src/util/onSubmitSettings.ts
  • packages/elements-vue/src/util/onSubmitVerification.ts
  • packages/elements-vue/src/util/removeFalsyValues.spec.ts
  • packages/elements-vue/src/util/removeFalsyValues.ts
  • packages/elements-vue/src/util/sdk-helpers/error.ts
  • packages/elements-vue/src/util/sdk-helpers/index.ts
  • packages/elements-vue/src/util/sdk-helpers/urlHelpers.ts
  • packages/elements-vue/src/util/sdk-helpers/utils.ts
  • packages/elements-vue/src/util/showToast.ts
  • packages/elements-vue/src/util/submitHandler.ts
  • packages/elements-vue/src/util/test-id.spec.ts
  • packages/elements-vue/src/util/test-id.ts
  • packages/elements-vue/src/util/ui/index.spec.ts
  • packages/elements-vue/src/util/ui/index.ts
  • packages/elements-vue/stories/components/consent/consent.stories.ts
  • packages/elements-vue/stories/components/error/error.stories.ts
  • packages/elements-vue/stories/components/error/errors/oidc_continuity.json
  • packages/elements-vue/stories/components/login/1fa/account-linking.stories.ts
  • packages/elements-vue/stories/components/login/1fa/all-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/captcha-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/code-refresh-with-password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/code-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods-with-mitigation.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods-without-mitigation.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/captcha.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/code.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/oidc.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/passkey.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/saml.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/webauthn.stories.ts
  • packages/elements-vue/stories/components/login/1fa/oidc-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/organization.stories.ts
  • packages/elements-vue/stories/components/login/1fa/passkey-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/password-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/saml-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/all.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/captcha.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/code.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/none.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/oidc.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/passkey.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/saml.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/webauthn.stories.ts
  • packages/elements-vue/stories/components/login/1fa/webauthn-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/all.refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/all.stories.ts
  • packages/elements-vue/stories/components/login/2fa/code-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/code.stories.ts
  • packages/elements-vue/stories/components/login/2fa/lookup_secret-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/lookup_secret.stories.ts
  • packages/elements-vue/stories/components/login/2fa/totp-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/totp.stories.ts
  • packages/elements-vue/stories/components/login/2fa/webauthn-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/webauthn.stories.ts
  • packages/elements-vue/stories/components/recovery/code.stories.ts
  • packages/elements-vue/stories/components/recovery_v2/code.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/all-methods.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/captcha.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/code.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/oidc.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/password.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/saml.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/webauthn.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/all-methods.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/captcha.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/code.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/oidc.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/organization.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/password.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/saml.stories.ts
  • packages/elements-vue/stories/components/settings/all-2fa.stories.ts
  • packages/elements-vue/stories/components/settings/all.stories.ts
  • packages/elements-vue/stories/components/settings/lookup_secrets.stories.ts
  • packages/elements-vue/stories/components/settings/oidc.stories.ts
  • packages/elements-vue/stories/components/settings/passkey.stories.ts
  • packages/elements-vue/stories/components/settings/saml.stories.ts
  • packages/elements-vue/stories/components/settings/totp.stories.ts
  • packages/elements-vue/stories/components/settings/webauthn.stories.ts
  • packages/elements-vue/stories/components/verification/code.stories.ts
  • packages/elements-vue/stories/customized/components/MyCustomCardHeader.vue
  • packages/elements-vue/stories/customized/input.stories.ts
  • packages/elements-vue/stories/utils.ts
  • packages/elements-vue/tsconfig.json
  • packages/elements-vue/tsup.config.ts
  • packages/elements-vue/vitest.config.ts
  • packages/nuxt/.nuxtrc
  • packages/nuxt/api-report/nuxt.api.json
  • packages/nuxt/api-report/nuxt.api.md
  • packages/nuxt/config/api-extractor.json
  • packages/nuxt/package.json
  • packages/nuxt/project.json
  • packages/nuxt/src/__mocks__/imports.ts
  • packages/nuxt/src/module.ts
  • packages/nuxt/src/runtime/composables/index.ts
  • packages/nuxt/src/runtime/composables/useOryConfig.ts
  • packages/nuxt/src/runtime/composables/useOryFlow.ts
  • packages/nuxt/src/runtime/composables/useOryFlowError.ts
  • packages/nuxt/src/runtime/composables/useOryLogout.ts
  • packages/nuxt/src/runtime/composables/useOrySession.ts
  • packages/nuxt/src/runtime/middleware/auth.ts
  • packages/nuxt/src/runtime/server/proxy.ts
  • packages/nuxt/src/runtime/types.ts
  • packages/nuxt/src/runtime/utils/cookie.spec.ts
  • packages/nuxt/src/runtime/utils/cookie.ts
  • packages/nuxt/src/runtime/utils/headers.spec.ts
  • packages/nuxt/src/runtime/utils/headers.ts
  • packages/nuxt/src/runtime/utils/rewrite.spec.ts
  • packages/nuxt/src/runtime/utils/rewrite.ts
  • packages/nuxt/src/runtime/utils/sdk.spec.ts
  • packages/nuxt/src/runtime/utils/sdk.ts
  • packages/nuxt/tsconfig.json
  • packages/nuxt/vitest.config.ts

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Please provide elements packages for other frameworks

3 participants

@Jorgagu@vinckr@aeneasr
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat: add Vue 3 and Nuxt integration packages - #586

Open
Jorgagu wants to merge 3 commits into
ory:mainfrom
Jorgagu:feat/add-vue-nuxt-packages
Open

feat: add Vue 3 and Nuxt integration packages#586
Jorgagu wants to merge 3 commits into
ory:mainfrom
Jorgagu:feat/add-vue-nuxt-packages

Conversation

@Jorgagu

@JorgaguJorgagu commented Jan 18, 2026

Copy link
Copy Markdown
Contributor

This PR adds Vue 3 and Nuxt integration packages for Ory Elements, bringing feature parity with the existing React/Next.js implementation.

New Packages

@ory/elements-vue - Vue 3 component library for Ory authentication UIs

  • Complete set of UI components for Login, Registration, Recovery, Verification, Settings, and Consent flows
  • Vue 3 Composition API with <script setup> syntax
  • Full TypeScript support with proper type inference
  • Default theme with Tailwind CSS v4 styling
  • Internationalization support (80+ locales)
  • Session management via SessionProvider
  • Customizable components through slot overrides
  • Storybook setup for component development and documentation

@ory/nuxt - Nuxt 3/4 integration module

  • Auto-imported composables: useOryLogin, useOryRegistration, useOryRecovery, useOryVerification, useOrySettings, useOrySession, useOryLogout, useOryFlowError
  • Server-side proxy for secure cookie handling
  • Auth middleware for route protection
  • Environment-based SDK URL configuration (NUXT_PUBLIC_ORY_SDK_URL)
  • SSR-compatible session hydration

Example Application

Complete Nuxt example app demonstrating all authentication flows at examples/nuxt-app.

Related Issue or Design Document

Fixes#581

Checklist

  • I have read the contributing guidelines and signed the CLA.
  • I have referenced an issue containing the design document if my change introduces a new feature.
  • I have read the security policy.
  • I confirm that this pull request does not address a security vulnerability.
    If this pull request addresses a security vulnerability,
    I confirm that I got approval (please contact security@ory.sh) from the maintainers to push the changes.
  • I have added tests that prove my fix is effective or that my feature works.
  • I have added the necessary documentation within the code base (if appropriate).

Further comments

The Vue/Nuxt packages follow the same architecture patterns as the React/Next.js implementation:

  • Same component hierarchy and naming conventions
  • Same context/provider architecture (using Vue's provide/inject)
  • Same flow handling logic and state management
  • Same theming system structure with customizable components
  • Same utility functions and SDK helpers

All authentication methods are supported including password, passwordless (code), social login (OIDC), passkeys, WebAuthn, TOTP, and recovery codes.

This fixes the issue #581

@changeset-bot

changeset-botBot commented Jan 18, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 1bf47b5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel

vercelBot commented Jan 18, 2026

Copy link
Copy Markdown

@Jorgagu is attempting to deploy a commit to the ory Team on Vercel.

A member of the Team first needs to authorize it.

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from c71b462 to 6e9245bCompareJanuary 18, 2026 17:23
@codecov

codecovBot commented Jan 18, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 60.64%. Comparing base (f3fad4d) to head (1bf47b5).
⚠️ Report is 358 commits behind head on main.

Additional details and impacted files
@@ Coverage Diff @@## main #586 +/- ##
===========================================
+ Coverage 42.43% 60.64% +18.21% 
===========================================
Files 136 182 +46 Lines 2008 3679 +1671 Branches 288 610 +322 ===========================================
+ Hits 852 2231 +1379 - Misses 1149 1323 +174 - Partials 7 125 +118 
ComponentsCoverage Δ
@ory/elements-react60.48% <ø> (+23.69%)⬆️
@ory/nextjs61.51% <ø> (-4.47%)⬇️
🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Jorgagu

Copy link
Copy Markdown
ContributorAuthor

Hi @jonas-jonas@aeneasr@vinckr, this PR is ready for review 🎉

👋 @Jannik-Hm@Saganic, could you please test this as well and let me know if I missed anything during my own testing?

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch 5 times, most recently from b1f6174 to c1cc2f7CompareJanuary 19, 2026 10:05
@vinckr

Copy link
Copy Markdown
Member

Hey @Jorgagu
awesome, thanks!
Will take a look with @jonas-jonas as soon as time permits.

to resolve the format CI, can you run make format on your branch?

🐝

@Jorgagu

Copy link
Copy Markdown
ContributorAuthor

@vinckr thanks! I ran make format, but it also reformatted some files that weren’t changed in this PR.

@aeneasr

Copy link
Copy Markdown
Member

Cool stuff man! Given the massive size of the PR I'm not sure how quickly we can review this. We also need to figure out a way to add this to our e2e test suite (currently not open sourced) to ensure the advertised functionality matches the requirements. We also need to figure out who will be responsible on the team for maintaining those SDKs going forward (e.g. when we introduce new features). May I ask which approach you took to transfer the react elements to vue and nuxt? It will help us speed up review.

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 1723f6e to 74080aeCompareJanuary 27, 2026 12:11
@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 74080ae to 741b30aCompareMarch 14, 2026 19:54
Port @ory/elements-vue, @ory/nuxt, and the nuxt-app example onto the pnpm
workspace. Reference @ory/client-fetch 1.22.37 like the sibling packages,
use workspace protocol for internal deps, and wire nx release groups,
eslint vue support, and api-extractor reports for the new packages.
Port the component enhancement pass onto the pnpm workspace:
- replace the per-icon modules with a unified Icon component and extract
the icon typing into ui/types for lint-safe type imports
- add ProviderLogo with real OIDC provider logos and a provider-logos entry
- add settings toasts through vue-sonner (DefaultToast, showToast)
- extract SSO rendering into OryFormSsoForm and DefaultSsoButtonContainer
- handle flows without visible authentication methods in OryForm
- support the OAuth2 consent flow in the default card header
- keep storybook tooling at the workspace root per repo convention, adding
the vue3 framework packages at the shared storybook version
- regenerate the elements-vue API reports
Add a Storybook configuration for the Vue package mirroring the
elements-react setup: @storybook/vue3-vite framework, addon set
(essentials, interactions, a11y, storybook-addon-mock), Inter font
assets, and vite aliases resolving @ory/elements-vue to the package
source and $snapshots to the shared elements-react stub responses.
Port the full story tree (login, registration, recovery, verification,
settings, consent, error, customized) and shared story utilities.
Adaptations against the original branch content:
- import LoginFlowActiveEnum from the @ory/client-fetch package root
instead of a deep src/models path not exported by 1.22.37
- align captcha, organization, and refresh code stories with the
current stub-responses layout (interactive/hidden/client-error
captcha variants, organization-oidc/organization-saml splits,
renamed refresh code fixtures)
- load @tailwindcss/vite through a dynamic import because the package
is ESM-only and Storybook evaluates main.ts as CommonJS
- add an eslint override for packages/elements-vue/stories matching
the elements-react stories override
@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 741b30a to 1bf47b5CompareJuly 20, 2026 22:25
@coderabbitai

Copy link
Copy Markdown

Important

Review skipped

Too many files!

This PR contains 367 files, which is 267 over the limit of 100.

To get a review, narrow the scope:
• coderabbit review --committed # exclude uncommitted changes
• coderabbit review --dir # limit to a subdirectory
• coderabbit review --base # compare against a closer base

Upgrade to a paid plan to raise the limit.

Usage-priced reviews support at most 300 files.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 1c8d9337-1474-4668-a0f2-c31fdbc737b6

📥 Commits

Reviewing files that changed from the base of the PR and between 11d7877 and 1bf47b5.

⛔ Files ignored due to path filters (6)
  • examples/nuxt-app/public/favicon.ico is excluded by !**/*.ico
  • examples/nuxt-app/public/ory-logo.svg is excluded by !**/*.svg
  • packages/elements-vue/.storybook/public/InterVariable.woff2 is excluded by !**/*.woff2
  • packages/elements-vue/src/theme/default/assets/ory-badge-horizontal.svg is excluded by !**/*.svg
  • packages/elements-vue/src/theme/default/assets/ory-badge-vertical.svg is excluded by !**/*.svg
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (367)
  • .editorconfig
  • .github/workflows/release.yml
  • .gitignore
  • eslint.config.mjs
  • examples/nuxt-app/.env.example
  • examples/nuxt-app/.gitignore
  • examples/nuxt-app/README.md
  • examples/nuxt-app/app.vue
  • examples/nuxt-app/assets/css/main.css
  • examples/nuxt-app/layouts/auth.vue
  • examples/nuxt-app/layouts/default.vue
  • examples/nuxt-app/nuxt.config.ts
  • examples/nuxt-app/package.json
  • examples/nuxt-app/pages/error.vue
  • examples/nuxt-app/pages/index.vue
  • examples/nuxt-app/pages/login.vue
  • examples/nuxt-app/pages/recovery.vue
  • examples/nuxt-app/pages/registration.vue
  • examples/nuxt-app/pages/session.vue
  • examples/nuxt-app/pages/settings.vue
  • examples/nuxt-app/pages/verification.vue
  • examples/nuxt-app/project.json
  • nx.json
  • package.json
  • packages/elements-vue/.storybook/global.css
  • packages/elements-vue/.storybook/main.ts
  • packages/elements-vue/.storybook/preview-head.html
  • packages/elements-vue/.storybook/preview.ts
  • packages/elements-vue/.storybook/public/inter.css
  • packages/elements-vue/api-report/elements-vue-client.api.json
  • packages/elements-vue/api-report/elements-vue-client.api.md
  • packages/elements-vue/api-report/elements-vue-theme.api.json
  • packages/elements-vue/api-report/elements-vue-theme.api.md
  • packages/elements-vue/api-report/elements-vue.api.json
  • packages/elements-vue/api-report/elements-vue.api.md
  • packages/elements-vue/config/api-extractor-client.json
  • packages/elements-vue/config/api-extractor-core.json
  • packages/elements-vue/config/api-extractor-theme.json
  • packages/elements-vue/package.json
  • packages/elements-vue/project.json
  • packages/elements-vue/src/client/SessionProvider.vue
  • packages/elements-vue/src/client/index.ts
  • packages/elements-vue/src/client/useSession.spec.ts
  • packages/elements-vue/src/client/useSession.ts
  • packages/elements-vue/src/components/OryPageHeader.vue
  • packages/elements-vue/src/components/OryProvider.vue
  • packages/elements-vue/src/components/card/OryCard.vue
  • packages/elements-vue/src/components/card/OryCardContent.vue
  • packages/elements-vue/src/components/card/OryCardFooter.vue
  • packages/elements-vue/src/components/card/OryCardHeader.vue
  • packages/elements-vue/src/components/card/OryConsentCard.vue
  • packages/elements-vue/src/components/card/OrySelfServiceFlowCard.vue
  • packages/elements-vue/src/components/card/index.ts
  • packages/elements-vue/src/components/card/two-step/MethodActiveForm.vue
  • packages/elements-vue/src/components/card/two-step/ProvideIdentifierForm.vue
  • packages/elements-vue/src/components/card/two-step/SelectMethodForm.vue
  • packages/elements-vue/src/components/card/two-step/index.ts
  • packages/elements-vue/src/components/card/two-step/utils.ts
  • packages/elements-vue/src/components/form/OryForm.vue
  • packages/elements-vue/src/components/form/OryFormGroup.vue
  • packages/elements-vue/src/components/form/OryFormSsoForm.vue
  • packages/elements-vue/src/components/form/OryMessages.vue
  • packages/elements-vue/src/components/form/index.ts
  • packages/elements-vue/src/components/form/nodes/OryNode.vue
  • packages/elements-vue/src/components/form/nodes/index.ts
  • packages/elements-vue/src/components/index.ts
  • packages/elements-vue/src/components/settings/OrySettingsCard.vue
  • packages/elements-vue/src/components/settings/SettingsSection.vue
  • packages/elements-vue/src/components/settings/index.ts
  • packages/elements-vue/src/components/types.ts
  • packages/elements-vue/src/composables/index.ts
  • packages/elements-vue/src/composables/useComponents.spec.ts
  • packages/elements-vue/src/composables/useComponents.ts
  • packages/elements-vue/src/composables/useOryConfig.spec.ts
  • packages/elements-vue/src/composables/useOryConfig.ts
  • packages/elements-vue/src/composables/useOryFlow.spec.ts
  • packages/elements-vue/src/composables/useOryFlow.ts
  • packages/elements-vue/src/composables/useOryForm.ts
  • packages/elements-vue/src/composables/useOryFormContext.ts
  • packages/elements-vue/src/composables/useOryIntl.spec.ts
  • packages/elements-vue/src/composables/useOryIntl.ts
  • packages/elements-vue/src/composables/useResendCode.ts
  • packages/elements-vue/src/composables/useSlotContent.ts
  • packages/elements-vue/src/index.ts
  • packages/elements-vue/src/locales/af.json
  • packages/elements-vue/src/locales/ak.json
  • packages/elements-vue/src/locales/am.json
  • packages/elements-vue/src/locales/ar.json
  • packages/elements-vue/src/locales/as.json
  • packages/elements-vue/src/locales/az.json
  • packages/elements-vue/src/locales/be.json
  • packages/elements-vue/src/locales/bg.json
  • packages/elements-vue/src/locales/bm.json
  • packages/elements-vue/src/locales/bn.json
  • packages/elements-vue/src/locales/ca.json
  • packages/elements-vue/src/locales/cs.json
  • packages/elements-vue/src/locales/da.json
  • packages/elements-vue/src/locales/de.json
  • packages/elements-vue/src/locales/el.json
  • packages/elements-vue/src/locales/en.json
  • packages/elements-vue/src/locales/es.json
  • packages/elements-vue/src/locales/et.json
  • packages/elements-vue/src/locales/fa.json
  • packages/elements-vue/src/locales/fi.json
  • packages/elements-vue/src/locales/fr.json
  • packages/elements-vue/src/locales/gu.json
  • packages/elements-vue/src/locales/ha.json
  • packages/elements-vue/src/locales/he.json
  • packages/elements-vue/src/locales/hi.json
  • packages/elements-vue/src/locales/hr.json
  • packages/elements-vue/src/locales/hu.json
  • packages/elements-vue/src/locales/hy.json
  • packages/elements-vue/src/locales/id.json
  • packages/elements-vue/src/locales/ig.json
  • packages/elements-vue/src/locales/index.ts
  • packages/elements-vue/src/locales/it.json
  • packages/elements-vue/src/locales/ja.json
  • packages/elements-vue/src/locales/ka.json
  • packages/elements-vue/src/locales/kk.json
  • packages/elements-vue/src/locales/km.json
  • packages/elements-vue/src/locales/kn.json
  • packages/elements-vue/src/locales/ko.json
  • packages/elements-vue/src/locales/ku.json
  • packages/elements-vue/src/locales/ky.json
  • packages/elements-vue/src/locales/lt.json
  • packages/elements-vue/src/locales/lv.json
  • packages/elements-vue/src/locales/mk.json
  • packages/elements-vue/src/locales/ml.json
  • packages/elements-vue/src/locales/mn.json
  • packages/elements-vue/src/locales/mr.json
  • packages/elements-vue/src/locales/ms.json
  • packages/elements-vue/src/locales/my.json
  • packages/elements-vue/src/locales/ne.json
  • packages/elements-vue/src/locales/nl.json
  • packages/elements-vue/src/locales/no.json
  • packages/elements-vue/src/locales/or.json
  • packages/elements-vue/src/locales/pa.json
  • packages/elements-vue/src/locales/pl.json
  • packages/elements-vue/src/locales/ps.json
  • packages/elements-vue/src/locales/pt.json
  • packages/elements-vue/src/locales/ro.json
  • packages/elements-vue/src/locales/ru.json
  • packages/elements-vue/src/locales/sd.json
  • packages/elements-vue/src/locales/si.json
  • packages/elements-vue/src/locales/sk.json
  • packages/elements-vue/src/locales/sl.json
  • packages/elements-vue/src/locales/so.json
  • packages/elements-vue/src/locales/sq.json
  • packages/elements-vue/src/locales/sr.json
  • packages/elements-vue/src/locales/su.json
  • packages/elements-vue/src/locales/sv.json
  • packages/elements-vue/src/locales/sw.json
  • packages/elements-vue/src/locales/ta.json
  • packages/elements-vue/src/locales/te.json
  • packages/elements-vue/src/locales/tg.json
  • packages/elements-vue/src/locales/th.json
  • packages/elements-vue/src/locales/tk.json
  • packages/elements-vue/src/locales/tl.json
  • packages/elements-vue/src/locales/tr.json
  • packages/elements-vue/src/locales/ug.json
  • packages/elements-vue/src/locales/uk.json
  • packages/elements-vue/src/locales/ur.json
  • packages/elements-vue/src/locales/uz.json
  • packages/elements-vue/src/locales/vi.json
  • packages/elements-vue/src/locales/xh.json
  • packages/elements-vue/src/locales/yo.json
  • packages/elements-vue/src/locales/zh.json
  • packages/elements-vue/src/locales/zu.json
  • packages/elements-vue/src/theme/default/assets/icons/index.ts
  • packages/elements-vue/src/theme/default/components/card/DefaultAuthMethodListContainer.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultAuthMethodListItem.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultBadge.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCard.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardContent.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardFooter.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardHeader.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardLogo.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCurrentIdentifierButton.vue
  • packages/elements-vue/src/theme/default/components/card/index.ts
  • packages/elements-vue/src/theme/default/components/form/DefaultAnchor.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultButton.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCaptcha.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCheckbox.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCodeInput.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultConsentCheckbox.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultDivider.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultFormContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultGroupContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultImage.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultInput.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultLabel.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultMessage.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultMessageContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSection.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSectionContent.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSectionFooter.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSsoButton.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSsoButtonContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultText.vue
  • packages/elements-vue/src/theme/default/components/form/PinInput.vue
  • packages/elements-vue/src/theme/default/components/form/Spinner.vue
  • packages/elements-vue/src/theme/default/components/form/index.ts
  • packages/elements-vue/src/theme/default/components/index.ts
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsOidc.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsPasskey.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsRecoveryCodes.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsTotp.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsWebauthn.vue
  • packages/elements-vue/src/theme/default/components/settings/SettingsRemoveButton.vue
  • packages/elements-vue/src/theme/default/components/settings/index.ts
  • packages/elements-vue/src/theme/default/components/settings/utils.ts
  • packages/elements-vue/src/theme/default/components/ui/DefaultPageHeader.vue
  • packages/elements-vue/src/theme/default/components/ui/DefaultToast.vue
  • packages/elements-vue/src/theme/default/components/ui/Icon.vue
  • packages/elements-vue/src/theme/default/components/ui/ProviderLogo.vue
  • packages/elements-vue/src/theme/default/components/ui/UserAvatar.vue
  • packages/elements-vue/src/theme/default/components/ui/UserMenu.vue
  • packages/elements-vue/src/theme/default/components/ui/index.ts
  • packages/elements-vue/src/theme/default/components/ui/types.ts
  • packages/elements-vue/src/theme/default/flows/Consent.vue
  • packages/elements-vue/src/theme/default/flows/Error.vue
  • packages/elements-vue/src/theme/default/flows/Login.vue
  • packages/elements-vue/src/theme/default/flows/Recovery.vue
  • packages/elements-vue/src/theme/default/flows/Registration.vue
  • packages/elements-vue/src/theme/default/flows/Settings.vue
  • packages/elements-vue/src/theme/default/flows/Verification.vue
  • packages/elements-vue/src/theme/default/flows/index.ts
  • packages/elements-vue/src/theme/default/flows/types.ts
  • packages/elements-vue/src/theme/default/getOryComponents.ts
  • packages/elements-vue/src/theme/default/index.ts
  • packages/elements-vue/src/theme/default/provider-logos/index.ts
  • packages/elements-vue/src/theme/default/styles.css
  • packages/elements-vue/src/theme/default/utils/cn.ts
  • packages/elements-vue/src/theme/default/utils/constructCardHeader.ts
  • packages/elements-vue/src/theme/default/utils/i18n.ts
  • packages/elements-vue/src/theme/default/utils/logout.ts
  • packages/elements-vue/src/theme/default/utils/oauth2.ts
  • packages/elements-vue/src/theme/default/utils/url.ts
  • packages/elements-vue/src/theme/default/utils/user.ts
  • packages/elements-vue/src/types.ts
  • packages/elements-vue/src/util/client.ts
  • packages/elements-vue/src/util/flowContainer.ts
  • packages/elements-vue/src/util/getLogoutUrl.ts
  • packages/elements-vue/src/util/i18n/index.ts
  • packages/elements-vue/src/util/index.ts
  • packages/elements-vue/src/util/nodeGroups.spec.ts
  • packages/elements-vue/src/util/nodeGroups.ts
  • packages/elements-vue/src/util/nodes.spec.ts
  • packages/elements-vue/src/util/nodes.ts
  • packages/elements-vue/src/util/onSubmitLogin.ts
  • packages/elements-vue/src/util/onSubmitRecovery.ts
  • packages/elements-vue/src/util/onSubmitRegistration.ts
  • packages/elements-vue/src/util/onSubmitSettings.ts
  • packages/elements-vue/src/util/onSubmitVerification.ts
  • packages/elements-vue/src/util/removeFalsyValues.spec.ts
  • packages/elements-vue/src/util/removeFalsyValues.ts
  • packages/elements-vue/src/util/sdk-helpers/error.ts
  • packages/elements-vue/src/util/sdk-helpers/index.ts
  • packages/elements-vue/src/util/sdk-helpers/urlHelpers.ts
  • packages/elements-vue/src/util/sdk-helpers/utils.ts
  • packages/elements-vue/src/util/showToast.ts
  • packages/elements-vue/src/util/submitHandler.ts
  • packages/elements-vue/src/util/test-id.spec.ts
  • packages/elements-vue/src/util/test-id.ts
  • packages/elements-vue/src/util/ui/index.spec.ts
  • packages/elements-vue/src/util/ui/index.ts
  • packages/elements-vue/stories/components/consent/consent.stories.ts
  • packages/elements-vue/stories/components/error/error.stories.ts
  • packages/elements-vue/stories/components/error/errors/oidc_continuity.json
  • packages/elements-vue/stories/components/login/1fa/account-linking.stories.ts
  • packages/elements-vue/stories/components/login/1fa/all-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/captcha-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/code-refresh-with-password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/code-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods-with-mitigation.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods-without-mitigation.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/captcha.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/code.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/oidc.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/passkey.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/saml.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/webauthn.stories.ts
  • packages/elements-vue/stories/components/login/1fa/oidc-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/organization.stories.ts
  • packages/elements-vue/stories/components/login/1fa/passkey-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/password-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/saml-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/all.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/captcha.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/code.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/none.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/oidc.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/passkey.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/saml.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/webauthn.stories.ts
  • packages/elements-vue/stories/components/login/1fa/webauthn-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/all.refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/all.stories.ts
  • packages/elements-vue/stories/components/login/2fa/code-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/code.stories.ts
  • packages/elements-vue/stories/components/login/2fa/lookup_secret-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/lookup_secret.stories.ts
  • packages/elements-vue/stories/components/login/2fa/totp-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/totp.stories.ts
  • packages/elements-vue/stories/components/login/2fa/webauthn-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/webauthn.stories.ts
  • packages/elements-vue/stories/components/recovery/code.stories.ts
  • packages/elements-vue/stories/components/recovery_v2/code.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/all-methods.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/captcha.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/code.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/oidc.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/password.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/saml.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/webauthn.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/all-methods.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/captcha.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/code.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/oidc.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/organization.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/password.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/saml.stories.ts
  • packages/elements-vue/stories/components/settings/all-2fa.stories.ts
  • packages/elements-vue/stories/components/settings/all.stories.ts
  • packages/elements-vue/stories/components/settings/lookup_secrets.stories.ts
  • packages/elements-vue/stories/components/settings/oidc.stories.ts
  • packages/elements-vue/stories/components/settings/passkey.stories.ts
  • packages/elements-vue/stories/components/settings/saml.stories.ts
  • packages/elements-vue/stories/components/settings/totp.stories.ts
  • packages/elements-vue/stories/components/settings/webauthn.stories.ts
  • packages/elements-vue/stories/components/verification/code.stories.ts
  • packages/elements-vue/stories/customized/components/MyCustomCardHeader.vue
  • packages/elements-vue/stories/customized/input.stories.ts
  • packages/elements-vue/stories/utils.ts
  • packages/elements-vue/tsconfig.json
  • packages/elements-vue/tsup.config.ts
  • packages/elements-vue/vitest.config.ts
  • packages/nuxt/.nuxtrc
  • packages/nuxt/api-report/nuxt.api.json
  • packages/nuxt/api-report/nuxt.api.md
  • packages/nuxt/config/api-extractor.json
  • packages/nuxt/package.json
  • packages/nuxt/project.json
  • packages/nuxt/src/__mocks__/imports.ts
  • packages/nuxt/src/module.ts
  • packages/nuxt/src/runtime/composables/index.ts
  • packages/nuxt/src/runtime/composables/useOryConfig.ts
  • packages/nuxt/src/runtime/composables/useOryFlow.ts
  • packages/nuxt/src/runtime/composables/useOryFlowError.ts
  • packages/nuxt/src/runtime/composables/useOryLogout.ts
  • packages/nuxt/src/runtime/composables/useOrySession.ts
  • packages/nuxt/src/runtime/middleware/auth.ts
  • packages/nuxt/src/runtime/server/proxy.ts
  • packages/nuxt/src/runtime/types.ts
  • packages/nuxt/src/runtime/utils/cookie.spec.ts
  • packages/nuxt/src/runtime/utils/cookie.ts
  • packages/nuxt/src/runtime/utils/headers.spec.ts
  • packages/nuxt/src/runtime/utils/headers.ts
  • packages/nuxt/src/runtime/utils/rewrite.spec.ts
  • packages/nuxt/src/runtime/utils/rewrite.ts
  • packages/nuxt/src/runtime/utils/sdk.spec.ts
  • packages/nuxt/src/runtime/utils/sdk.ts
  • packages/nuxt/tsconfig.json
  • packages/nuxt/vitest.config.ts

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Please provide elements packages for other frameworks

3 participants

@Jorgagu@vinckr@aeneasr
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

feat: add Vue 3 and Nuxt integration packages - #586

Open
Jorgagu wants to merge 3 commits into
ory:mainfrom
Jorgagu:feat/add-vue-nuxt-packages
Open

feat: add Vue 3 and Nuxt integration packages#586
Jorgagu wants to merge 3 commits into
ory:mainfrom
Jorgagu:feat/add-vue-nuxt-packages

Conversation

@Jorgagu

@JorgaguJorgagu commented Jan 18, 2026

Copy link
Copy Markdown
Contributor

This PR adds Vue 3 and Nuxt integration packages for Ory Elements, bringing feature parity with the existing React/Next.js implementation.

New Packages

@ory/elements-vue - Vue 3 component library for Ory authentication UIs

  • Complete set of UI components for Login, Registration, Recovery, Verification, Settings, and Consent flows
  • Vue 3 Composition API with <script setup> syntax
  • Full TypeScript support with proper type inference
  • Default theme with Tailwind CSS v4 styling
  • Internationalization support (80+ locales)
  • Session management via SessionProvider
  • Customizable components through slot overrides
  • Storybook setup for component development and documentation

@ory/nuxt - Nuxt 3/4 integration module

  • Auto-imported composables: useOryLogin, useOryRegistration, useOryRecovery, useOryVerification, useOrySettings, useOrySession, useOryLogout, useOryFlowError
  • Server-side proxy for secure cookie handling
  • Auth middleware for route protection
  • Environment-based SDK URL configuration (NUXT_PUBLIC_ORY_SDK_URL)
  • SSR-compatible session hydration

Example Application

Complete Nuxt example app demonstrating all authentication flows at examples/nuxt-app.

Related Issue or Design Document

Fixes#581

Checklist

  • I have read the contributing guidelines and signed the CLA.
  • I have referenced an issue containing the design document if my change introduces a new feature.
  • I have read the security policy.
  • I confirm that this pull request does not address a security vulnerability.
    If this pull request addresses a security vulnerability,
    I confirm that I got approval (please contact security@ory.sh) from the maintainers to push the changes.
  • I have added tests that prove my fix is effective or that my feature works.
  • I have added the necessary documentation within the code base (if appropriate).

Further comments

The Vue/Nuxt packages follow the same architecture patterns as the React/Next.js implementation:

  • Same component hierarchy and naming conventions
  • Same context/provider architecture (using Vue's provide/inject)
  • Same flow handling logic and state management
  • Same theming system structure with customizable components
  • Same utility functions and SDK helpers

All authentication methods are supported including password, passwordless (code), social login (OIDC), passkeys, WebAuthn, TOTP, and recovery codes.

This fixes the issue #581

@changeset-bot

changeset-botBot commented Jan 18, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 1bf47b5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel

vercelBot commented Jan 18, 2026

Copy link
Copy Markdown

@Jorgagu is attempting to deploy a commit to the ory Team on Vercel.

A member of the Team first needs to authorize it.

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from c71b462 to 6e9245bCompareJanuary 18, 2026 17:23
@codecov

codecovBot commented Jan 18, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 60.64%. Comparing base (f3fad4d) to head (1bf47b5).
⚠️ Report is 358 commits behind head on main.

Additional details and impacted files
@@ Coverage Diff @@## main #586 +/- ##
===========================================
+ Coverage 42.43% 60.64% +18.21% 
===========================================
Files 136 182 +46 Lines 2008 3679 +1671 Branches 288 610 +322 ===========================================
+ Hits 852 2231 +1379 - Misses 1149 1323 +174 - Partials 7 125 +118 
ComponentsCoverage Δ
@ory/elements-react60.48% <ø> (+23.69%)⬆️
@ory/nextjs61.51% <ø> (-4.47%)⬇️
🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Jorgagu

Copy link
Copy Markdown
ContributorAuthor

Hi @jonas-jonas@aeneasr@vinckr, this PR is ready for review 🎉

👋 @Jannik-Hm@Saganic, could you please test this as well and let me know if I missed anything during my own testing?

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch 5 times, most recently from b1f6174 to c1cc2f7CompareJanuary 19, 2026 10:05
@vinckr

Copy link
Copy Markdown
Member

Hey @Jorgagu
awesome, thanks!
Will take a look with @jonas-jonas as soon as time permits.

to resolve the format CI, can you run make format on your branch?

🐝

@Jorgagu

Copy link
Copy Markdown
ContributorAuthor

@vinckr thanks! I ran make format, but it also reformatted some files that weren’t changed in this PR.

@aeneasr

Copy link
Copy Markdown
Member

Cool stuff man! Given the massive size of the PR I'm not sure how quickly we can review this. We also need to figure out a way to add this to our e2e test suite (currently not open sourced) to ensure the advertised functionality matches the requirements. We also need to figure out who will be responsible on the team for maintaining those SDKs going forward (e.g. when we introduce new features). May I ask which approach you took to transfer the react elements to vue and nuxt? It will help us speed up review.

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 1723f6e to 74080aeCompareJanuary 27, 2026 12:11
@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 74080ae to 741b30aCompareMarch 14, 2026 19:54
Port @ory/elements-vue, @ory/nuxt, and the nuxt-app example onto the pnpm
workspace. Reference @ory/client-fetch 1.22.37 like the sibling packages,
use workspace protocol for internal deps, and wire nx release groups,
eslint vue support, and api-extractor reports for the new packages.
Port the component enhancement pass onto the pnpm workspace:
- replace the per-icon modules with a unified Icon component and extract
the icon typing into ui/types for lint-safe type imports
- add ProviderLogo with real OIDC provider logos and a provider-logos entry
- add settings toasts through vue-sonner (DefaultToast, showToast)
- extract SSO rendering into OryFormSsoForm and DefaultSsoButtonContainer
- handle flows without visible authentication methods in OryForm
- support the OAuth2 consent flow in the default card header
- keep storybook tooling at the workspace root per repo convention, adding
the vue3 framework packages at the shared storybook version
- regenerate the elements-vue API reports
Add a Storybook configuration for the Vue package mirroring the
elements-react setup: @storybook/vue3-vite framework, addon set
(essentials, interactions, a11y, storybook-addon-mock), Inter font
assets, and vite aliases resolving @ory/elements-vue to the package
source and $snapshots to the shared elements-react stub responses.
Port the full story tree (login, registration, recovery, verification,
settings, consent, error, customized) and shared story utilities.
Adaptations against the original branch content:
- import LoginFlowActiveEnum from the @ory/client-fetch package root
instead of a deep src/models path not exported by 1.22.37
- align captcha, organization, and refresh code stories with the
current stub-responses layout (interactive/hidden/client-error
captcha variants, organization-oidc/organization-saml splits,
renamed refresh code fixtures)
- load @tailwindcss/vite through a dynamic import because the package
is ESM-only and Storybook evaluates main.ts as CommonJS
- add an eslint override for packages/elements-vue/stories matching
the elements-react stories override
@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 741b30a to 1bf47b5CompareJuly 20, 2026 22:25
@coderabbitai

Copy link
Copy Markdown

Important

Review skipped

Too many files!

This PR contains 367 files, which is 267 over the limit of 100.

To get a review, narrow the scope:
• coderabbit review --committed # exclude uncommitted changes
• coderabbit review --dir # limit to a subdirectory
• coderabbit review --base # compare against a closer base

Upgrade to a paid plan to raise the limit.

Usage-priced reviews support at most 300 files.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 1c8d9337-1474-4668-a0f2-c31fdbc737b6

📥 Commits

Reviewing files that changed from the base of the PR and between 11d7877 and 1bf47b5.

⛔ Files ignored due to path filters (6)
  • examples/nuxt-app/public/favicon.ico is excluded by !**/*.ico
  • examples/nuxt-app/public/ory-logo.svg is excluded by !**/*.svg
  • packages/elements-vue/.storybook/public/InterVariable.woff2 is excluded by !**/*.woff2
  • packages/elements-vue/src/theme/default/assets/ory-badge-horizontal.svg is excluded by !**/*.svg
  • packages/elements-vue/src/theme/default/assets/ory-badge-vertical.svg is excluded by !**/*.svg
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (367)
  • .editorconfig
  • .github/workflows/release.yml
  • .gitignore
  • eslint.config.mjs
  • examples/nuxt-app/.env.example
  • examples/nuxt-app/.gitignore
  • examples/nuxt-app/README.md
  • examples/nuxt-app/app.vue
  • examples/nuxt-app/assets/css/main.css
  • examples/nuxt-app/layouts/auth.vue
  • examples/nuxt-app/layouts/default.vue
  • examples/nuxt-app/nuxt.config.ts
  • examples/nuxt-app/package.json
  • examples/nuxt-app/pages/error.vue
  • examples/nuxt-app/pages/index.vue
  • examples/nuxt-app/pages/login.vue
  • examples/nuxt-app/pages/recovery.vue
  • examples/nuxt-app/pages/registration.vue
  • examples/nuxt-app/pages/session.vue
  • examples/nuxt-app/pages/settings.vue
  • examples/nuxt-app/pages/verification.vue
  • examples/nuxt-app/project.json
  • nx.json
  • package.json
  • packages/elements-vue/.storybook/global.css
  • packages/elements-vue/.storybook/main.ts
  • packages/elements-vue/.storybook/preview-head.html
  • packages/elements-vue/.storybook/preview.ts
  • packages/elements-vue/.storybook/public/inter.css
  • packages/elements-vue/api-report/elements-vue-client.api.json
  • packages/elements-vue/api-report/elements-vue-client.api.md
  • packages/elements-vue/api-report/elements-vue-theme.api.json
  • packages/elements-vue/api-report/elements-vue-theme.api.md
  • packages/elements-vue/api-report/elements-vue.api.json
  • packages/elements-vue/api-report/elements-vue.api.md
  • packages/elements-vue/config/api-extractor-client.json
  • packages/elements-vue/config/api-extractor-core.json
  • packages/elements-vue/config/api-extractor-theme.json
  • packages/elements-vue/package.json
  • packages/elements-vue/project.json
  • packages/elements-vue/src/client/SessionProvider.vue
  • packages/elements-vue/src/client/index.ts
  • packages/elements-vue/src/client/useSession.spec.ts
  • packages/elements-vue/src/client/useSession.ts
  • packages/elements-vue/src/components/OryPageHeader.vue
  • packages/elements-vue/src/components/OryProvider.vue
  • packages/elements-vue/src/components/card/OryCard.vue
  • packages/elements-vue/src/components/card/OryCardContent.vue
  • packages/elements-vue/src/components/card/OryCardFooter.vue
  • packages/elements-vue/src/components/card/OryCardHeader.vue
  • packages/elements-vue/src/components/card/OryConsentCard.vue
  • packages/elements-vue/src/components/card/OrySelfServiceFlowCard.vue
  • packages/elements-vue/src/components/card/index.ts
  • packages/elements-vue/src/components/card/two-step/MethodActiveForm.vue
  • packages/elements-vue/src/components/card/two-step/ProvideIdentifierForm.vue
  • packages/elements-vue/src/components/card/two-step/SelectMethodForm.vue
  • packages/elements-vue/src/components/card/two-step/index.ts
  • packages/elements-vue/src/components/card/two-step/utils.ts
  • packages/elements-vue/src/components/form/OryForm.vue
  • packages/elements-vue/src/components/form/OryFormGroup.vue
  • packages/elements-vue/src/components/form/OryFormSsoForm.vue
  • packages/elements-vue/src/components/form/OryMessages.vue
  • packages/elements-vue/src/components/form/index.ts
  • packages/elements-vue/src/components/form/nodes/OryNode.vue
  • packages/elements-vue/src/components/form/nodes/index.ts
  • packages/elements-vue/src/components/index.ts
  • packages/elements-vue/src/components/settings/OrySettingsCard.vue
  • packages/elements-vue/src/components/settings/SettingsSection.vue
  • packages/elements-vue/src/components/settings/index.ts
  • packages/elements-vue/src/components/types.ts
  • packages/elements-vue/src/composables/index.ts
  • packages/elements-vue/src/composables/useComponents.spec.ts
  • packages/elements-vue/src/composables/useComponents.ts
  • packages/elements-vue/src/composables/useOryConfig.spec.ts
  • packages/elements-vue/src/composables/useOryConfig.ts
  • packages/elements-vue/src/composables/useOryFlow.spec.ts
  • packages/elements-vue/src/composables/useOryFlow.ts
  • packages/elements-vue/src/composables/useOryForm.ts
  • packages/elements-vue/src/composables/useOryFormContext.ts
  • packages/elements-vue/src/composables/useOryIntl.spec.ts
  • packages/elements-vue/src/composables/useOryIntl.ts
  • packages/elements-vue/src/composables/useResendCode.ts
  • packages/elements-vue/src/composables/useSlotContent.ts
  • packages/elements-vue/src/index.ts
  • packages/elements-vue/src/locales/af.json
  • packages/elements-vue/src/locales/ak.json
  • packages/elements-vue/src/locales/am.json
  • packages/elements-vue/src/locales/ar.json
  • packages/elements-vue/src/locales/as.json
  • packages/elements-vue/src/locales/az.json
  • packages/elements-vue/src/locales/be.json
  • packages/elements-vue/src/locales/bg.json
  • packages/elements-vue/src/locales/bm.json
  • packages/elements-vue/src/locales/bn.json
  • packages/elements-vue/src/locales/ca.json
  • packages/elements-vue/src/locales/cs.json
  • packages/elements-vue/src/locales/da.json
  • packages/elements-vue/src/locales/de.json
  • packages/elements-vue/src/locales/el.json
  • packages/elements-vue/src/locales/en.json
  • packages/elements-vue/src/locales/es.json
  • packages/elements-vue/src/locales/et.json
  • packages/elements-vue/src/locales/fa.json
  • packages/elements-vue/src/locales/fi.json
  • packages/elements-vue/src/locales/fr.json
  • packages/elements-vue/src/locales/gu.json
  • packages/elements-vue/src/locales/ha.json
  • packages/elements-vue/src/locales/he.json
  • packages/elements-vue/src/locales/hi.json
  • packages/elements-vue/src/locales/hr.json
  • packages/elements-vue/src/locales/hu.json
  • packages/elements-vue/src/locales/hy.json
  • packages/elements-vue/src/locales/id.json
  • packages/elements-vue/src/locales/ig.json
  • packages/elements-vue/src/locales/index.ts
  • packages/elements-vue/src/locales/it.json
  • packages/elements-vue/src/locales/ja.json
  • packages/elements-vue/src/locales/ka.json
  • packages/elements-vue/src/locales/kk.json
  • packages/elements-vue/src/locales/km.json
  • packages/elements-vue/src/locales/kn.json
  • packages/elements-vue/src/locales/ko.json
  • packages/elements-vue/src/locales/ku.json
  • packages/elements-vue/src/locales/ky.json
  • packages/elements-vue/src/locales/lt.json
  • packages/elements-vue/src/locales/lv.json
  • packages/elements-vue/src/locales/mk.json
  • packages/elements-vue/src/locales/ml.json
  • packages/elements-vue/src/locales/mn.json
  • packages/elements-vue/src/locales/mr.json
  • packages/elements-vue/src/locales/ms.json
  • packages/elements-vue/src/locales/my.json
  • packages/elements-vue/src/locales/ne.json
  • packages/elements-vue/src/locales/nl.json
  • packages/elements-vue/src/locales/no.json
  • packages/elements-vue/src/locales/or.json
  • packages/elements-vue/src/locales/pa.json
  • packages/elements-vue/src/locales/pl.json
  • packages/elements-vue/src/locales/ps.json
  • packages/elements-vue/src/locales/pt.json
  • packages/elements-vue/src/locales/ro.json
  • packages/elements-vue/src/locales/ru.json
  • packages/elements-vue/src/locales/sd.json
  • packages/elements-vue/src/locales/si.json
  • packages/elements-vue/src/locales/sk.json
  • packages/elements-vue/src/locales/sl.json
  • packages/elements-vue/src/locales/so.json
  • packages/elements-vue/src/locales/sq.json
  • packages/elements-vue/src/locales/sr.json
  • packages/elements-vue/src/locales/su.json
  • packages/elements-vue/src/locales/sv.json
  • packages/elements-vue/src/locales/sw.json
  • packages/elements-vue/src/locales/ta.json
  • packages/elements-vue/src/locales/te.json
  • packages/elements-vue/src/locales/tg.json
  • packages/elements-vue/src/locales/th.json
  • packages/elements-vue/src/locales/tk.json
  • packages/elements-vue/src/locales/tl.json
  • packages/elements-vue/src/locales/tr.json
  • packages/elements-vue/src/locales/ug.json
  • packages/elements-vue/src/locales/uk.json
  • packages/elements-vue/src/locales/ur.json
  • packages/elements-vue/src/locales/uz.json
  • packages/elements-vue/src/locales/vi.json
  • packages/elements-vue/src/locales/xh.json
  • packages/elements-vue/src/locales/yo.json
  • packages/elements-vue/src/locales/zh.json
  • packages/elements-vue/src/locales/zu.json
  • packages/elements-vue/src/theme/default/assets/icons/index.ts
  • packages/elements-vue/src/theme/default/components/card/DefaultAuthMethodListContainer.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultAuthMethodListItem.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultBadge.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCard.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardContent.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardFooter.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardHeader.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardLogo.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCurrentIdentifierButton.vue
  • packages/elements-vue/src/theme/default/components/card/index.ts
  • packages/elements-vue/src/theme/default/components/form/DefaultAnchor.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultButton.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCaptcha.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCheckbox.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCodeInput.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultConsentCheckbox.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultDivider.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultFormContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultGroupContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultImage.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultInput.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultLabel.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultMessage.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultMessageContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSection.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSectionContent.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSectionFooter.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSsoButton.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSsoButtonContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultText.vue
  • packages/elements-vue/src/theme/default/components/form/PinInput.vue
  • packages/elements-vue/src/theme/default/components/form/Spinner.vue
  • packages/elements-vue/src/theme/default/components/form/index.ts
  • packages/elements-vue/src/theme/default/components/index.ts
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsOidc.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsPasskey.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsRecoveryCodes.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsTotp.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsWebauthn.vue
  • packages/elements-vue/src/theme/default/components/settings/SettingsRemoveButton.vue
  • packages/elements-vue/src/theme/default/components/settings/index.ts
  • packages/elements-vue/src/theme/default/components/settings/utils.ts
  • packages/elements-vue/src/theme/default/components/ui/DefaultPageHeader.vue
  • packages/elements-vue/src/theme/default/components/ui/DefaultToast.vue
  • packages/elements-vue/src/theme/default/components/ui/Icon.vue
  • packages/elements-vue/src/theme/default/components/ui/ProviderLogo.vue
  • packages/elements-vue/src/theme/default/components/ui/UserAvatar.vue
  • packages/elements-vue/src/theme/default/components/ui/UserMenu.vue
  • packages/elements-vue/src/theme/default/components/ui/index.ts
  • packages/elements-vue/src/theme/default/components/ui/types.ts
  • packages/elements-vue/src/theme/default/flows/Consent.vue
  • packages/elements-vue/src/theme/default/flows/Error.vue
  • packages/elements-vue/src/theme/default/flows/Login.vue
  • packages/elements-vue/src/theme/default/flows/Recovery.vue
  • packages/elements-vue/src/theme/default/flows/Registration.vue
  • packages/elements-vue/src/theme/default/flows/Settings.vue
  • packages/elements-vue/src/theme/default/flows/Verification.vue
  • packages/elements-vue/src/theme/default/flows/index.ts
  • packages/elements-vue/src/theme/default/flows/types.ts
  • packages/elements-vue/src/theme/default/getOryComponents.ts
  • packages/elements-vue/src/theme/default/index.ts
  • packages/elements-vue/src/theme/default/provider-logos/index.ts
  • packages/elements-vue/src/theme/default/styles.css
  • packages/elements-vue/src/theme/default/utils/cn.ts
  • packages/elements-vue/src/theme/default/utils/constructCardHeader.ts
  • packages/elements-vue/src/theme/default/utils/i18n.ts
  • packages/elements-vue/src/theme/default/utils/logout.ts
  • packages/elements-vue/src/theme/default/utils/oauth2.ts
  • packages/elements-vue/src/theme/default/utils/url.ts
  • packages/elements-vue/src/theme/default/utils/user.ts
  • packages/elements-vue/src/types.ts
  • packages/elements-vue/src/util/client.ts
  • packages/elements-vue/src/util/flowContainer.ts
  • packages/elements-vue/src/util/getLogoutUrl.ts
  • packages/elements-vue/src/util/i18n/index.ts
  • packages/elements-vue/src/util/index.ts
  • packages/elements-vue/src/util/nodeGroups.spec.ts
  • packages/elements-vue/src/util/nodeGroups.ts
  • packages/elements-vue/src/util/nodes.spec.ts
  • packages/elements-vue/src/util/nodes.ts
  • packages/elements-vue/src/util/onSubmitLogin.ts
  • packages/elements-vue/src/util/onSubmitRecovery.ts
  • packages/elements-vue/src/util/onSubmitRegistration.ts
  • packages/elements-vue/src/util/onSubmitSettings.ts
  • packages/elements-vue/src/util/onSubmitVerification.ts
  • packages/elements-vue/src/util/removeFalsyValues.spec.ts
  • packages/elements-vue/src/util/removeFalsyValues.ts
  • packages/elements-vue/src/util/sdk-helpers/error.ts
  • packages/elements-vue/src/util/sdk-helpers/index.ts
  • packages/elements-vue/src/util/sdk-helpers/urlHelpers.ts
  • packages/elements-vue/src/util/sdk-helpers/utils.ts
  • packages/elements-vue/src/util/showToast.ts
  • packages/elements-vue/src/util/submitHandler.ts
  • packages/elements-vue/src/util/test-id.spec.ts
  • packages/elements-vue/src/util/test-id.ts
  • packages/elements-vue/src/util/ui/index.spec.ts
  • packages/elements-vue/src/util/ui/index.ts
  • packages/elements-vue/stories/components/consent/consent.stories.ts
  • packages/elements-vue/stories/components/error/error.stories.ts
  • packages/elements-vue/stories/components/error/errors/oidc_continuity.json
  • packages/elements-vue/stories/components/login/1fa/account-linking.stories.ts
  • packages/elements-vue/stories/components/login/1fa/all-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/captcha-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/code-refresh-with-password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/code-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods-with-mitigation.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods-without-mitigation.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/captcha.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/code.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/oidc.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/passkey.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/saml.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/webauthn.stories.ts
  • packages/elements-vue/stories/components/login/1fa/oidc-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/organization.stories.ts
  • packages/elements-vue/stories/components/login/1fa/passkey-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/password-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/saml-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/all.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/captcha.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/code.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/none.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/oidc.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/passkey.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/saml.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/webauthn.stories.ts
  • packages/elements-vue/stories/components/login/1fa/webauthn-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/all.refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/all.stories.ts
  • packages/elements-vue/stories/components/login/2fa/code-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/code.stories.ts
  • packages/elements-vue/stories/components/login/2fa/lookup_secret-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/lookup_secret.stories.ts
  • packages/elements-vue/stories/components/login/2fa/totp-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/totp.stories.ts
  • packages/elements-vue/stories/components/login/2fa/webauthn-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/webauthn.stories.ts
  • packages/elements-vue/stories/components/recovery/code.stories.ts
  • packages/elements-vue/stories/components/recovery_v2/code.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/all-methods.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/captcha.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/code.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/oidc.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/password.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/saml.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/webauthn.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/all-methods.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/captcha.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/code.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/oidc.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/organization.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/password.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/saml.stories.ts
  • packages/elements-vue/stories/components/settings/all-2fa.stories.ts
  • packages/elements-vue/stories/components/settings/all.stories.ts
  • packages/elements-vue/stories/components/settings/lookup_secrets.stories.ts
  • packages/elements-vue/stories/components/settings/oidc.stories.ts
  • packages/elements-vue/stories/components/settings/passkey.stories.ts
  • packages/elements-vue/stories/components/settings/saml.stories.ts
  • packages/elements-vue/stories/components/settings/totp.stories.ts
  • packages/elements-vue/stories/components/settings/webauthn.stories.ts
  • packages/elements-vue/stories/components/verification/code.stories.ts
  • packages/elements-vue/stories/customized/components/MyCustomCardHeader.vue
  • packages/elements-vue/stories/customized/input.stories.ts
  • packages/elements-vue/stories/utils.ts
  • packages/elements-vue/tsconfig.json
  • packages/elements-vue/tsup.config.ts
  • packages/elements-vue/vitest.config.ts
  • packages/nuxt/.nuxtrc
  • packages/nuxt/api-report/nuxt.api.json
  • packages/nuxt/api-report/nuxt.api.md
  • packages/nuxt/config/api-extractor.json
  • packages/nuxt/package.json
  • packages/nuxt/project.json
  • packages/nuxt/src/__mocks__/imports.ts
  • packages/nuxt/src/module.ts
  • packages/nuxt/src/runtime/composables/index.ts
  • packages/nuxt/src/runtime/composables/useOryConfig.ts
  • packages/nuxt/src/runtime/composables/useOryFlow.ts
  • packages/nuxt/src/runtime/composables/useOryFlowError.ts
  • packages/nuxt/src/runtime/composables/useOryLogout.ts
  • packages/nuxt/src/runtime/composables/useOrySession.ts
  • packages/nuxt/src/runtime/middleware/auth.ts
  • packages/nuxt/src/runtime/server/proxy.ts
  • packages/nuxt/src/runtime/types.ts
  • packages/nuxt/src/runtime/utils/cookie.spec.ts
  • packages/nuxt/src/runtime/utils/cookie.ts
  • packages/nuxt/src/runtime/utils/headers.spec.ts
  • packages/nuxt/src/runtime/utils/headers.ts
  • packages/nuxt/src/runtime/utils/rewrite.spec.ts
  • packages/nuxt/src/runtime/utils/rewrite.ts
  • packages/nuxt/src/runtime/utils/sdk.spec.ts
  • packages/nuxt/src/runtime/utils/sdk.ts
  • packages/nuxt/tsconfig.json
  • packages/nuxt/vitest.config.ts

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Please provide elements packages for other frameworks

3 participants

@Jorgagu@vinckr@aeneasr
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat: add Vue 3 and Nuxt integration packages - #586

Open
Jorgagu wants to merge 3 commits into
ory:mainfrom
Jorgagu:feat/add-vue-nuxt-packages
Open

feat: add Vue 3 and Nuxt integration packages#586
Jorgagu wants to merge 3 commits into
ory:mainfrom
Jorgagu:feat/add-vue-nuxt-packages

Conversation

@Jorgagu

@JorgaguJorgagu commented Jan 18, 2026

Copy link
Copy Markdown
Contributor

This PR adds Vue 3 and Nuxt integration packages for Ory Elements, bringing feature parity with the existing React/Next.js implementation.

New Packages

@ory/elements-vue - Vue 3 component library for Ory authentication UIs

  • Complete set of UI components for Login, Registration, Recovery, Verification, Settings, and Consent flows
  • Vue 3 Composition API with <script setup> syntax
  • Full TypeScript support with proper type inference
  • Default theme with Tailwind CSS v4 styling
  • Internationalization support (80+ locales)
  • Session management via SessionProvider
  • Customizable components through slot overrides
  • Storybook setup for component development and documentation

@ory/nuxt - Nuxt 3/4 integration module

  • Auto-imported composables: useOryLogin, useOryRegistration, useOryRecovery, useOryVerification, useOrySettings, useOrySession, useOryLogout, useOryFlowError
  • Server-side proxy for secure cookie handling
  • Auth middleware for route protection
  • Environment-based SDK URL configuration (NUXT_PUBLIC_ORY_SDK_URL)
  • SSR-compatible session hydration

Example Application

Complete Nuxt example app demonstrating all authentication flows at examples/nuxt-app.

Related Issue or Design Document

Fixes#581

Checklist

  • I have read the contributing guidelines and signed the CLA.
  • I have referenced an issue containing the design document if my change introduces a new feature.
  • I have read the security policy.
  • I confirm that this pull request does not address a security vulnerability.
    If this pull request addresses a security vulnerability,
    I confirm that I got approval (please contact security@ory.sh) from the maintainers to push the changes.
  • I have added tests that prove my fix is effective or that my feature works.
  • I have added the necessary documentation within the code base (if appropriate).

Further comments

The Vue/Nuxt packages follow the same architecture patterns as the React/Next.js implementation:

  • Same component hierarchy and naming conventions
  • Same context/provider architecture (using Vue's provide/inject)
  • Same flow handling logic and state management
  • Same theming system structure with customizable components
  • Same utility functions and SDK helpers

All authentication methods are supported including password, passwordless (code), social login (OIDC), passkeys, WebAuthn, TOTP, and recovery codes.

This fixes the issue #581

@changeset-bot

changeset-botBot commented Jan 18, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 1bf47b5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel

vercelBot commented Jan 18, 2026

Copy link
Copy Markdown

@Jorgagu is attempting to deploy a commit to the ory Team on Vercel.

A member of the Team first needs to authorize it.

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from c71b462 to 6e9245bCompareJanuary 18, 2026 17:23
@codecov

codecovBot commented Jan 18, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 60.64%. Comparing base (f3fad4d) to head (1bf47b5).
⚠️ Report is 358 commits behind head on main.

Additional details and impacted files
@@ Coverage Diff @@## main #586 +/- ##
===========================================
+ Coverage 42.43% 60.64% +18.21% 
===========================================
Files 136 182 +46 Lines 2008 3679 +1671 Branches 288 610 +322 ===========================================
+ Hits 852 2231 +1379 - Misses 1149 1323 +174 - Partials 7 125 +118 
ComponentsCoverage Δ
@ory/elements-react60.48% <ø> (+23.69%)⬆️
@ory/nextjs61.51% <ø> (-4.47%)⬇️
🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Jorgagu

Copy link
Copy Markdown
ContributorAuthor

Hi @jonas-jonas@aeneasr@vinckr, this PR is ready for review 🎉

👋 @Jannik-Hm@Saganic, could you please test this as well and let me know if I missed anything during my own testing?

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch 5 times, most recently from b1f6174 to c1cc2f7CompareJanuary 19, 2026 10:05
@vinckr

Copy link
Copy Markdown
Member

Hey @Jorgagu
awesome, thanks!
Will take a look with @jonas-jonas as soon as time permits.

to resolve the format CI, can you run make format on your branch?

🐝

@Jorgagu

Copy link
Copy Markdown
ContributorAuthor

@vinckr thanks! I ran make format, but it also reformatted some files that weren’t changed in this PR.

@aeneasr

Copy link
Copy Markdown
Member

Cool stuff man! Given the massive size of the PR I'm not sure how quickly we can review this. We also need to figure out a way to add this to our e2e test suite (currently not open sourced) to ensure the advertised functionality matches the requirements. We also need to figure out who will be responsible on the team for maintaining those SDKs going forward (e.g. when we introduce new features). May I ask which approach you took to transfer the react elements to vue and nuxt? It will help us speed up review.

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 1723f6e to 74080aeCompareJanuary 27, 2026 12:11
@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 74080ae to 741b30aCompareMarch 14, 2026 19:54
Port @ory/elements-vue, @ory/nuxt, and the nuxt-app example onto the pnpm
workspace. Reference @ory/client-fetch 1.22.37 like the sibling packages,
use workspace protocol for internal deps, and wire nx release groups,
eslint vue support, and api-extractor reports for the new packages.
Port the component enhancement pass onto the pnpm workspace:
- replace the per-icon modules with a unified Icon component and extract
the icon typing into ui/types for lint-safe type imports
- add ProviderLogo with real OIDC provider logos and a provider-logos entry
- add settings toasts through vue-sonner (DefaultToast, showToast)
- extract SSO rendering into OryFormSsoForm and DefaultSsoButtonContainer
- handle flows without visible authentication methods in OryForm
- support the OAuth2 consent flow in the default card header
- keep storybook tooling at the workspace root per repo convention, adding
the vue3 framework packages at the shared storybook version
- regenerate the elements-vue API reports
Add a Storybook configuration for the Vue package mirroring the
elements-react setup: @storybook/vue3-vite framework, addon set
(essentials, interactions, a11y, storybook-addon-mock), Inter font
assets, and vite aliases resolving @ory/elements-vue to the package
source and $snapshots to the shared elements-react stub responses.
Port the full story tree (login, registration, recovery, verification,
settings, consent, error, customized) and shared story utilities.
Adaptations against the original branch content:
- import LoginFlowActiveEnum from the @ory/client-fetch package root
instead of a deep src/models path not exported by 1.22.37
- align captcha, organization, and refresh code stories with the
current stub-responses layout (interactive/hidden/client-error
captcha variants, organization-oidc/organization-saml splits,
renamed refresh code fixtures)
- load @tailwindcss/vite through a dynamic import because the package
is ESM-only and Storybook evaluates main.ts as CommonJS
- add an eslint override for packages/elements-vue/stories matching
the elements-react stories override
@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 741b30a to 1bf47b5CompareJuly 20, 2026 22:25
@coderabbitai

Copy link
Copy Markdown

Important

Review skipped

Too many files!

This PR contains 367 files, which is 267 over the limit of 100.

To get a review, narrow the scope:
• coderabbit review --committed # exclude uncommitted changes
• coderabbit review --dir # limit to a subdirectory
• coderabbit review --base # compare against a closer base

Upgrade to a paid plan to raise the limit.

Usage-priced reviews support at most 300 files.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 1c8d9337-1474-4668-a0f2-c31fdbc737b6

📥 Commits

Reviewing files that changed from the base of the PR and between 11d7877 and 1bf47b5.

⛔ Files ignored due to path filters (6)
  • examples/nuxt-app/public/favicon.ico is excluded by !**/*.ico
  • examples/nuxt-app/public/ory-logo.svg is excluded by !**/*.svg
  • packages/elements-vue/.storybook/public/InterVariable.woff2 is excluded by !**/*.woff2
  • packages/elements-vue/src/theme/default/assets/ory-badge-horizontal.svg is excluded by !**/*.svg
  • packages/elements-vue/src/theme/default/assets/ory-badge-vertical.svg is excluded by !**/*.svg
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (367)
  • .editorconfig
  • .github/workflows/release.yml
  • .gitignore
  • eslint.config.mjs
  • examples/nuxt-app/.env.example
  • examples/nuxt-app/.gitignore
  • examples/nuxt-app/README.md
  • examples/nuxt-app/app.vue
  • examples/nuxt-app/assets/css/main.css
  • examples/nuxt-app/layouts/auth.vue
  • examples/nuxt-app/layouts/default.vue
  • examples/nuxt-app/nuxt.config.ts
  • examples/nuxt-app/package.json
  • examples/nuxt-app/pages/error.vue
  • examples/nuxt-app/pages/index.vue
  • examples/nuxt-app/pages/login.vue
  • examples/nuxt-app/pages/recovery.vue
  • examples/nuxt-app/pages/registration.vue
  • examples/nuxt-app/pages/session.vue
  • examples/nuxt-app/pages/settings.vue
  • examples/nuxt-app/pages/verification.vue
  • examples/nuxt-app/project.json
  • nx.json
  • package.json
  • packages/elements-vue/.storybook/global.css
  • packages/elements-vue/.storybook/main.ts
  • packages/elements-vue/.storybook/preview-head.html
  • packages/elements-vue/.storybook/preview.ts
  • packages/elements-vue/.storybook/public/inter.css
  • packages/elements-vue/api-report/elements-vue-client.api.json
  • packages/elements-vue/api-report/elements-vue-client.api.md
  • packages/elements-vue/api-report/elements-vue-theme.api.json
  • packages/elements-vue/api-report/elements-vue-theme.api.md
  • packages/elements-vue/api-report/elements-vue.api.json
  • packages/elements-vue/api-report/elements-vue.api.md
  • packages/elements-vue/config/api-extractor-client.json
  • packages/elements-vue/config/api-extractor-core.json
  • packages/elements-vue/config/api-extractor-theme.json
  • packages/elements-vue/package.json
  • packages/elements-vue/project.json
  • packages/elements-vue/src/client/SessionProvider.vue
  • packages/elements-vue/src/client/index.ts
  • packages/elements-vue/src/client/useSession.spec.ts
  • packages/elements-vue/src/client/useSession.ts
  • packages/elements-vue/src/components/OryPageHeader.vue
  • packages/elements-vue/src/components/OryProvider.vue
  • packages/elements-vue/src/components/card/OryCard.vue
  • packages/elements-vue/src/components/card/OryCardContent.vue
  • packages/elements-vue/src/components/card/OryCardFooter.vue
  • packages/elements-vue/src/components/card/OryCardHeader.vue
  • packages/elements-vue/src/components/card/OryConsentCard.vue
  • packages/elements-vue/src/components/card/OrySelfServiceFlowCard.vue
  • packages/elements-vue/src/components/card/index.ts
  • packages/elements-vue/src/components/card/two-step/MethodActiveForm.vue
  • packages/elements-vue/src/components/card/two-step/ProvideIdentifierForm.vue
  • packages/elements-vue/src/components/card/two-step/SelectMethodForm.vue
  • packages/elements-vue/src/components/card/two-step/index.ts
  • packages/elements-vue/src/components/card/two-step/utils.ts
  • packages/elements-vue/src/components/form/OryForm.vue
  • packages/elements-vue/src/components/form/OryFormGroup.vue
  • packages/elements-vue/src/components/form/OryFormSsoForm.vue
  • packages/elements-vue/src/components/form/OryMessages.vue
  • packages/elements-vue/src/components/form/index.ts
  • packages/elements-vue/src/components/form/nodes/OryNode.vue
  • packages/elements-vue/src/components/form/nodes/index.ts
  • packages/elements-vue/src/components/index.ts
  • packages/elements-vue/src/components/settings/OrySettingsCard.vue
  • packages/elements-vue/src/components/settings/SettingsSection.vue
  • packages/elements-vue/src/components/settings/index.ts
  • packages/elements-vue/src/components/types.ts
  • packages/elements-vue/src/composables/index.ts
  • packages/elements-vue/src/composables/useComponents.spec.ts
  • packages/elements-vue/src/composables/useComponents.ts
  • packages/elements-vue/src/composables/useOryConfig.spec.ts
  • packages/elements-vue/src/composables/useOryConfig.ts
  • packages/elements-vue/src/composables/useOryFlow.spec.ts
  • packages/elements-vue/src/composables/useOryFlow.ts
  • packages/elements-vue/src/composables/useOryForm.ts
  • packages/elements-vue/src/composables/useOryFormContext.ts
  • packages/elements-vue/src/composables/useOryIntl.spec.ts
  • packages/elements-vue/src/composables/useOryIntl.ts
  • packages/elements-vue/src/composables/useResendCode.ts
  • packages/elements-vue/src/composables/useSlotContent.ts
  • packages/elements-vue/src/index.ts
  • packages/elements-vue/src/locales/af.json
  • packages/elements-vue/src/locales/ak.json
  • packages/elements-vue/src/locales/am.json
  • packages/elements-vue/src/locales/ar.json
  • packages/elements-vue/src/locales/as.json
  • packages/elements-vue/src/locales/az.json
  • packages/elements-vue/src/locales/be.json
  • packages/elements-vue/src/locales/bg.json
  • packages/elements-vue/src/locales/bm.json
  • packages/elements-vue/src/locales/bn.json
  • packages/elements-vue/src/locales/ca.json
  • packages/elements-vue/src/locales/cs.json
  • packages/elements-vue/src/locales/da.json
  • packages/elements-vue/src/locales/de.json
  • packages/elements-vue/src/locales/el.json
  • packages/elements-vue/src/locales/en.json
  • packages/elements-vue/src/locales/es.json
  • packages/elements-vue/src/locales/et.json
  • packages/elements-vue/src/locales/fa.json
  • packages/elements-vue/src/locales/fi.json
  • packages/elements-vue/src/locales/fr.json
  • packages/elements-vue/src/locales/gu.json
  • packages/elements-vue/src/locales/ha.json
  • packages/elements-vue/src/locales/he.json
  • packages/elements-vue/src/locales/hi.json
  • packages/elements-vue/src/locales/hr.json
  • packages/elements-vue/src/locales/hu.json
  • packages/elements-vue/src/locales/hy.json
  • packages/elements-vue/src/locales/id.json
  • packages/elements-vue/src/locales/ig.json
  • packages/elements-vue/src/locales/index.ts
  • packages/elements-vue/src/locales/it.json
  • packages/elements-vue/src/locales/ja.json
  • packages/elements-vue/src/locales/ka.json
  • packages/elements-vue/src/locales/kk.json
  • packages/elements-vue/src/locales/km.json
  • packages/elements-vue/src/locales/kn.json
  • packages/elements-vue/src/locales/ko.json
  • packages/elements-vue/src/locales/ku.json
  • packages/elements-vue/src/locales/ky.json
  • packages/elements-vue/src/locales/lt.json
  • packages/elements-vue/src/locales/lv.json
  • packages/elements-vue/src/locales/mk.json
  • packages/elements-vue/src/locales/ml.json
  • packages/elements-vue/src/locales/mn.json
  • packages/elements-vue/src/locales/mr.json
  • packages/elements-vue/src/locales/ms.json
  • packages/elements-vue/src/locales/my.json
  • packages/elements-vue/src/locales/ne.json
  • packages/elements-vue/src/locales/nl.json
  • packages/elements-vue/src/locales/no.json
  • packages/elements-vue/src/locales/or.json
  • packages/elements-vue/src/locales/pa.json
  • packages/elements-vue/src/locales/pl.json
  • packages/elements-vue/src/locales/ps.json
  • packages/elements-vue/src/locales/pt.json
  • packages/elements-vue/src/locales/ro.json
  • packages/elements-vue/src/locales/ru.json
  • packages/elements-vue/src/locales/sd.json
  • packages/elements-vue/src/locales/si.json
  • packages/elements-vue/src/locales/sk.json
  • packages/elements-vue/src/locales/sl.json
  • packages/elements-vue/src/locales/so.json
  • packages/elements-vue/src/locales/sq.json
  • packages/elements-vue/src/locales/sr.json
  • packages/elements-vue/src/locales/su.json
  • packages/elements-vue/src/locales/sv.json
  • packages/elements-vue/src/locales/sw.json
  • packages/elements-vue/src/locales/ta.json
  • packages/elements-vue/src/locales/te.json
  • packages/elements-vue/src/locales/tg.json
  • packages/elements-vue/src/locales/th.json
  • packages/elements-vue/src/locales/tk.json
  • packages/elements-vue/src/locales/tl.json
  • packages/elements-vue/src/locales/tr.json
  • packages/elements-vue/src/locales/ug.json
  • packages/elements-vue/src/locales/uk.json
  • packages/elements-vue/src/locales/ur.json
  • packages/elements-vue/src/locales/uz.json
  • packages/elements-vue/src/locales/vi.json
  • packages/elements-vue/src/locales/xh.json
  • packages/elements-vue/src/locales/yo.json
  • packages/elements-vue/src/locales/zh.json
  • packages/elements-vue/src/locales/zu.json
  • packages/elements-vue/src/theme/default/assets/icons/index.ts
  • packages/elements-vue/src/theme/default/components/card/DefaultAuthMethodListContainer.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultAuthMethodListItem.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultBadge.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCard.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardContent.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardFooter.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardHeader.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardLogo.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCurrentIdentifierButton.vue
  • packages/elements-vue/src/theme/default/components/card/index.ts
  • packages/elements-vue/src/theme/default/components/form/DefaultAnchor.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultButton.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCaptcha.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCheckbox.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCodeInput.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultConsentCheckbox.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultDivider.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultFormContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultGroupContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultImage.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultInput.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultLabel.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultMessage.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultMessageContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSection.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSectionContent.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSectionFooter.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSsoButton.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSsoButtonContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultText.vue
  • packages/elements-vue/src/theme/default/components/form/PinInput.vue
  • packages/elements-vue/src/theme/default/components/form/Spinner.vue
  • packages/elements-vue/src/theme/default/components/form/index.ts
  • packages/elements-vue/src/theme/default/components/index.ts
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsOidc.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsPasskey.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsRecoveryCodes.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsTotp.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsWebauthn.vue
  • packages/elements-vue/src/theme/default/components/settings/SettingsRemoveButton.vue
  • packages/elements-vue/src/theme/default/components/settings/index.ts
  • packages/elements-vue/src/theme/default/components/settings/utils.ts
  • packages/elements-vue/src/theme/default/components/ui/DefaultPageHeader.vue
  • packages/elements-vue/src/theme/default/components/ui/DefaultToast.vue
  • packages/elements-vue/src/theme/default/components/ui/Icon.vue
  • packages/elements-vue/src/theme/default/components/ui/ProviderLogo.vue
  • packages/elements-vue/src/theme/default/components/ui/UserAvatar.vue
  • packages/elements-vue/src/theme/default/components/ui/UserMenu.vue
  • packages/elements-vue/src/theme/default/components/ui/index.ts
  • packages/elements-vue/src/theme/default/components/ui/types.ts
  • packages/elements-vue/src/theme/default/flows/Consent.vue
  • packages/elements-vue/src/theme/default/flows/Error.vue
  • packages/elements-vue/src/theme/default/flows/Login.vue
  • packages/elements-vue/src/theme/default/flows/Recovery.vue
  • packages/elements-vue/src/theme/default/flows/Registration.vue
  • packages/elements-vue/src/theme/default/flows/Settings.vue
  • packages/elements-vue/src/theme/default/flows/Verification.vue
  • packages/elements-vue/src/theme/default/flows/index.ts
  • packages/elements-vue/src/theme/default/flows/types.ts
  • packages/elements-vue/src/theme/default/getOryComponents.ts
  • packages/elements-vue/src/theme/default/index.ts
  • packages/elements-vue/src/theme/default/provider-logos/index.ts
  • packages/elements-vue/src/theme/default/styles.css
  • packages/elements-vue/src/theme/default/utils/cn.ts
  • packages/elements-vue/src/theme/default/utils/constructCardHeader.ts
  • packages/elements-vue/src/theme/default/utils/i18n.ts
  • packages/elements-vue/src/theme/default/utils/logout.ts
  • packages/elements-vue/src/theme/default/utils/oauth2.ts
  • packages/elements-vue/src/theme/default/utils/url.ts
  • packages/elements-vue/src/theme/default/utils/user.ts
  • packages/elements-vue/src/types.ts
  • packages/elements-vue/src/util/client.ts
  • packages/elements-vue/src/util/flowContainer.ts
  • packages/elements-vue/src/util/getLogoutUrl.ts
  • packages/elements-vue/src/util/i18n/index.ts
  • packages/elements-vue/src/util/index.ts
  • packages/elements-vue/src/util/nodeGroups.spec.ts
  • packages/elements-vue/src/util/nodeGroups.ts
  • packages/elements-vue/src/util/nodes.spec.ts
  • packages/elements-vue/src/util/nodes.ts
  • packages/elements-vue/src/util/onSubmitLogin.ts
  • packages/elements-vue/src/util/onSubmitRecovery.ts
  • packages/elements-vue/src/util/onSubmitRegistration.ts
  • packages/elements-vue/src/util/onSubmitSettings.ts
  • packages/elements-vue/src/util/onSubmitVerification.ts
  • packages/elements-vue/src/util/removeFalsyValues.spec.ts
  • packages/elements-vue/src/util/removeFalsyValues.ts
  • packages/elements-vue/src/util/sdk-helpers/error.ts
  • packages/elements-vue/src/util/sdk-helpers/index.ts
  • packages/elements-vue/src/util/sdk-helpers/urlHelpers.ts
  • packages/elements-vue/src/util/sdk-helpers/utils.ts
  • packages/elements-vue/src/util/showToast.ts
  • packages/elements-vue/src/util/submitHandler.ts
  • packages/elements-vue/src/util/test-id.spec.ts
  • packages/elements-vue/src/util/test-id.ts
  • packages/elements-vue/src/util/ui/index.spec.ts
  • packages/elements-vue/src/util/ui/index.ts
  • packages/elements-vue/stories/components/consent/consent.stories.ts
  • packages/elements-vue/stories/components/error/error.stories.ts
  • packages/elements-vue/stories/components/error/errors/oidc_continuity.json
  • packages/elements-vue/stories/components/login/1fa/account-linking.stories.ts
  • packages/elements-vue/stories/components/login/1fa/all-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/captcha-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/code-refresh-with-password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/code-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods-with-mitigation.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods-without-mitigation.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/captcha.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/code.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/oidc.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/passkey.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/saml.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/webauthn.stories.ts
  • packages/elements-vue/stories/components/login/1fa/oidc-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/organization.stories.ts
  • packages/elements-vue/stories/components/login/1fa/passkey-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/password-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/saml-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/all.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/captcha.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/code.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/none.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/oidc.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/passkey.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/saml.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/webauthn.stories.ts
  • packages/elements-vue/stories/components/login/1fa/webauthn-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/all.refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/all.stories.ts
  • packages/elements-vue/stories/components/login/2fa/code-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/code.stories.ts
  • packages/elements-vue/stories/components/login/2fa/lookup_secret-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/lookup_secret.stories.ts
  • packages/elements-vue/stories/components/login/2fa/totp-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/totp.stories.ts
  • packages/elements-vue/stories/components/login/2fa/webauthn-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/webauthn.stories.ts
  • packages/elements-vue/stories/components/recovery/code.stories.ts
  • packages/elements-vue/stories/components/recovery_v2/code.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/all-methods.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/captcha.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/code.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/oidc.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/password.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/saml.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/webauthn.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/all-methods.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/captcha.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/code.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/oidc.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/organization.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/password.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/saml.stories.ts
  • packages/elements-vue/stories/components/settings/all-2fa.stories.ts
  • packages/elements-vue/stories/components/settings/all.stories.ts
  • packages/elements-vue/stories/components/settings/lookup_secrets.stories.ts
  • packages/elements-vue/stories/components/settings/oidc.stories.ts
  • packages/elements-vue/stories/components/settings/passkey.stories.ts
  • packages/elements-vue/stories/components/settings/saml.stories.ts
  • packages/elements-vue/stories/components/settings/totp.stories.ts
  • packages/elements-vue/stories/components/settings/webauthn.stories.ts
  • packages/elements-vue/stories/components/verification/code.stories.ts
  • packages/elements-vue/stories/customized/components/MyCustomCardHeader.vue
  • packages/elements-vue/stories/customized/input.stories.ts
  • packages/elements-vue/stories/utils.ts
  • packages/elements-vue/tsconfig.json
  • packages/elements-vue/tsup.config.ts
  • packages/elements-vue/vitest.config.ts
  • packages/nuxt/.nuxtrc
  • packages/nuxt/api-report/nuxt.api.json
  • packages/nuxt/api-report/nuxt.api.md
  • packages/nuxt/config/api-extractor.json
  • packages/nuxt/package.json
  • packages/nuxt/project.json
  • packages/nuxt/src/__mocks__/imports.ts
  • packages/nuxt/src/module.ts
  • packages/nuxt/src/runtime/composables/index.ts
  • packages/nuxt/src/runtime/composables/useOryConfig.ts
  • packages/nuxt/src/runtime/composables/useOryFlow.ts
  • packages/nuxt/src/runtime/composables/useOryFlowError.ts
  • packages/nuxt/src/runtime/composables/useOryLogout.ts
  • packages/nuxt/src/runtime/composables/useOrySession.ts
  • packages/nuxt/src/runtime/middleware/auth.ts
  • packages/nuxt/src/runtime/server/proxy.ts
  • packages/nuxt/src/runtime/types.ts
  • packages/nuxt/src/runtime/utils/cookie.spec.ts
  • packages/nuxt/src/runtime/utils/cookie.ts
  • packages/nuxt/src/runtime/utils/headers.spec.ts
  • packages/nuxt/src/runtime/utils/headers.ts
  • packages/nuxt/src/runtime/utils/rewrite.spec.ts
  • packages/nuxt/src/runtime/utils/rewrite.ts
  • packages/nuxt/src/runtime/utils/sdk.spec.ts
  • packages/nuxt/src/runtime/utils/sdk.ts
  • packages/nuxt/tsconfig.json
  • packages/nuxt/vitest.config.ts

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Please provide elements packages for other frameworks

3 participants

@Jorgagu@vinckr@aeneasr
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat: add Vue 3 and Nuxt integration packages - #586

Open
Jorgagu wants to merge 3 commits into
ory:mainfrom
Jorgagu:feat/add-vue-nuxt-packages
Open

feat: add Vue 3 and Nuxt integration packages#586
Jorgagu wants to merge 3 commits into
ory:mainfrom
Jorgagu:feat/add-vue-nuxt-packages

Conversation

@Jorgagu

@JorgaguJorgagu commented Jan 18, 2026

Copy link
Copy Markdown
Contributor

This PR adds Vue 3 and Nuxt integration packages for Ory Elements, bringing feature parity with the existing React/Next.js implementation.

New Packages

@ory/elements-vue - Vue 3 component library for Ory authentication UIs

  • Complete set of UI components for Login, Registration, Recovery, Verification, Settings, and Consent flows
  • Vue 3 Composition API with <script setup> syntax
  • Full TypeScript support with proper type inference
  • Default theme with Tailwind CSS v4 styling
  • Internationalization support (80+ locales)
  • Session management via SessionProvider
  • Customizable components through slot overrides
  • Storybook setup for component development and documentation

@ory/nuxt - Nuxt 3/4 integration module

  • Auto-imported composables: useOryLogin, useOryRegistration, useOryRecovery, useOryVerification, useOrySettings, useOrySession, useOryLogout, useOryFlowError
  • Server-side proxy for secure cookie handling
  • Auth middleware for route protection
  • Environment-based SDK URL configuration (NUXT_PUBLIC_ORY_SDK_URL)
  • SSR-compatible session hydration

Example Application

Complete Nuxt example app demonstrating all authentication flows at examples/nuxt-app.

Related Issue or Design Document

Fixes#581

Checklist

  • I have read the contributing guidelines and signed the CLA.
  • I have referenced an issue containing the design document if my change introduces a new feature.
  • I have read the security policy.
  • I confirm that this pull request does not address a security vulnerability.
    If this pull request addresses a security vulnerability,
    I confirm that I got approval (please contact security@ory.sh) from the maintainers to push the changes.
  • I have added tests that prove my fix is effective or that my feature works.
  • I have added the necessary documentation within the code base (if appropriate).

Further comments

The Vue/Nuxt packages follow the same architecture patterns as the React/Next.js implementation:

  • Same component hierarchy and naming conventions
  • Same context/provider architecture (using Vue's provide/inject)
  • Same flow handling logic and state management
  • Same theming system structure with customizable components
  • Same utility functions and SDK helpers

All authentication methods are supported including password, passwordless (code), social login (OIDC), passkeys, WebAuthn, TOTP, and recovery codes.

This fixes the issue #581

@changeset-bot

changeset-botBot commented Jan 18, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 1bf47b5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel

vercelBot commented Jan 18, 2026

Copy link
Copy Markdown

@Jorgagu is attempting to deploy a commit to the ory Team on Vercel.

A member of the Team first needs to authorize it.

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from c71b462 to 6e9245bCompareJanuary 18, 2026 17:23
@codecov

codecovBot commented Jan 18, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 60.64%. Comparing base (f3fad4d) to head (1bf47b5).
⚠️ Report is 358 commits behind head on main.

Additional details and impacted files
@@ Coverage Diff @@## main #586 +/- ##
===========================================
+ Coverage 42.43% 60.64% +18.21% 
===========================================
Files 136 182 +46 Lines 2008 3679 +1671 Branches 288 610 +322 ===========================================
+ Hits 852 2231 +1379 - Misses 1149 1323 +174 - Partials 7 125 +118 
ComponentsCoverage Δ
@ory/elements-react60.48% <ø> (+23.69%)⬆️
@ory/nextjs61.51% <ø> (-4.47%)⬇️
🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Jorgagu

Copy link
Copy Markdown
ContributorAuthor

Hi @jonas-jonas@aeneasr@vinckr, this PR is ready for review 🎉

👋 @Jannik-Hm@Saganic, could you please test this as well and let me know if I missed anything during my own testing?

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch 5 times, most recently from b1f6174 to c1cc2f7CompareJanuary 19, 2026 10:05
@vinckr

Copy link
Copy Markdown
Member

Hey @Jorgagu
awesome, thanks!
Will take a look with @jonas-jonas as soon as time permits.

to resolve the format CI, can you run make format on your branch?

🐝

@Jorgagu

Copy link
Copy Markdown
ContributorAuthor

@vinckr thanks! I ran make format, but it also reformatted some files that weren’t changed in this PR.

@aeneasr

Copy link
Copy Markdown
Member

Cool stuff man! Given the massive size of the PR I'm not sure how quickly we can review this. We also need to figure out a way to add this to our e2e test suite (currently not open sourced) to ensure the advertised functionality matches the requirements. We also need to figure out who will be responsible on the team for maintaining those SDKs going forward (e.g. when we introduce new features). May I ask which approach you took to transfer the react elements to vue and nuxt? It will help us speed up review.

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 1723f6e to 74080aeCompareJanuary 27, 2026 12:11
@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 74080ae to 741b30aCompareMarch 14, 2026 19:54
Port @ory/elements-vue, @ory/nuxt, and the nuxt-app example onto the pnpm
workspace. Reference @ory/client-fetch 1.22.37 like the sibling packages,
use workspace protocol for internal deps, and wire nx release groups,
eslint vue support, and api-extractor reports for the new packages.
Port the component enhancement pass onto the pnpm workspace:
- replace the per-icon modules with a unified Icon component and extract
the icon typing into ui/types for lint-safe type imports
- add ProviderLogo with real OIDC provider logos and a provider-logos entry
- add settings toasts through vue-sonner (DefaultToast, showToast)
- extract SSO rendering into OryFormSsoForm and DefaultSsoButtonContainer
- handle flows without visible authentication methods in OryForm
- support the OAuth2 consent flow in the default card header
- keep storybook tooling at the workspace root per repo convention, adding
the vue3 framework packages at the shared storybook version
- regenerate the elements-vue API reports
Add a Storybook configuration for the Vue package mirroring the
elements-react setup: @storybook/vue3-vite framework, addon set
(essentials, interactions, a11y, storybook-addon-mock), Inter font
assets, and vite aliases resolving @ory/elements-vue to the package
source and $snapshots to the shared elements-react stub responses.
Port the full story tree (login, registration, recovery, verification,
settings, consent, error, customized) and shared story utilities.
Adaptations against the original branch content:
- import LoginFlowActiveEnum from the @ory/client-fetch package root
instead of a deep src/models path not exported by 1.22.37
- align captcha, organization, and refresh code stories with the
current stub-responses layout (interactive/hidden/client-error
captcha variants, organization-oidc/organization-saml splits,
renamed refresh code fixtures)
- load @tailwindcss/vite through a dynamic import because the package
is ESM-only and Storybook evaluates main.ts as CommonJS
- add an eslint override for packages/elements-vue/stories matching
the elements-react stories override
@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 741b30a to 1bf47b5CompareJuly 20, 2026 22:25
@coderabbitai

Copy link
Copy Markdown

Important

Review skipped

Too many files!

This PR contains 367 files, which is 267 over the limit of 100.

To get a review, narrow the scope:
• coderabbit review --committed # exclude uncommitted changes
• coderabbit review --dir # limit to a subdirectory
• coderabbit review --base # compare against a closer base

Upgrade to a paid plan to raise the limit.

Usage-priced reviews support at most 300 files.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 1c8d9337-1474-4668-a0f2-c31fdbc737b6

📥 Commits

Reviewing files that changed from the base of the PR and between 11d7877 and 1bf47b5.

⛔ Files ignored due to path filters (6)
  • examples/nuxt-app/public/favicon.ico is excluded by !**/*.ico
  • examples/nuxt-app/public/ory-logo.svg is excluded by !**/*.svg
  • packages/elements-vue/.storybook/public/InterVariable.woff2 is excluded by !**/*.woff2
  • packages/elements-vue/src/theme/default/assets/ory-badge-horizontal.svg is excluded by !**/*.svg
  • packages/elements-vue/src/theme/default/assets/ory-badge-vertical.svg is excluded by !**/*.svg
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (367)
  • .editorconfig
  • .github/workflows/release.yml
  • .gitignore
  • eslint.config.mjs
  • examples/nuxt-app/.env.example
  • examples/nuxt-app/.gitignore
  • examples/nuxt-app/README.md
  • examples/nuxt-app/app.vue
  • examples/nuxt-app/assets/css/main.css
  • examples/nuxt-app/layouts/auth.vue
  • examples/nuxt-app/layouts/default.vue
  • examples/nuxt-app/nuxt.config.ts
  • examples/nuxt-app/package.json
  • examples/nuxt-app/pages/error.vue
  • examples/nuxt-app/pages/index.vue
  • examples/nuxt-app/pages/login.vue
  • examples/nuxt-app/pages/recovery.vue
  • examples/nuxt-app/pages/registration.vue
  • examples/nuxt-app/pages/session.vue
  • examples/nuxt-app/pages/settings.vue
  • examples/nuxt-app/pages/verification.vue
  • examples/nuxt-app/project.json
  • nx.json
  • package.json
  • packages/elements-vue/.storybook/global.css
  • packages/elements-vue/.storybook/main.ts
  • packages/elements-vue/.storybook/preview-head.html
  • packages/elements-vue/.storybook/preview.ts
  • packages/elements-vue/.storybook/public/inter.css
  • packages/elements-vue/api-report/elements-vue-client.api.json
  • packages/elements-vue/api-report/elements-vue-client.api.md
  • packages/elements-vue/api-report/elements-vue-theme.api.json
  • packages/elements-vue/api-report/elements-vue-theme.api.md
  • packages/elements-vue/api-report/elements-vue.api.json
  • packages/elements-vue/api-report/elements-vue.api.md
  • packages/elements-vue/config/api-extractor-client.json
  • packages/elements-vue/config/api-extractor-core.json
  • packages/elements-vue/config/api-extractor-theme.json
  • packages/elements-vue/package.json
  • packages/elements-vue/project.json
  • packages/elements-vue/src/client/SessionProvider.vue
  • packages/elements-vue/src/client/index.ts
  • packages/elements-vue/src/client/useSession.spec.ts
  • packages/elements-vue/src/client/useSession.ts
  • packages/elements-vue/src/components/OryPageHeader.vue
  • packages/elements-vue/src/components/OryProvider.vue
  • packages/elements-vue/src/components/card/OryCard.vue
  • packages/elements-vue/src/components/card/OryCardContent.vue
  • packages/elements-vue/src/components/card/OryCardFooter.vue
  • packages/elements-vue/src/components/card/OryCardHeader.vue
  • packages/elements-vue/src/components/card/OryConsentCard.vue
  • packages/elements-vue/src/components/card/OrySelfServiceFlowCard.vue
  • packages/elements-vue/src/components/card/index.ts
  • packages/elements-vue/src/components/card/two-step/MethodActiveForm.vue
  • packages/elements-vue/src/components/card/two-step/ProvideIdentifierForm.vue
  • packages/elements-vue/src/components/card/two-step/SelectMethodForm.vue
  • packages/elements-vue/src/components/card/two-step/index.ts
  • packages/elements-vue/src/components/card/two-step/utils.ts
  • packages/elements-vue/src/components/form/OryForm.vue
  • packages/elements-vue/src/components/form/OryFormGroup.vue
  • packages/elements-vue/src/components/form/OryFormSsoForm.vue
  • packages/elements-vue/src/components/form/OryMessages.vue
  • packages/elements-vue/src/components/form/index.ts
  • packages/elements-vue/src/components/form/nodes/OryNode.vue
  • packages/elements-vue/src/components/form/nodes/index.ts
  • packages/elements-vue/src/components/index.ts
  • packages/elements-vue/src/components/settings/OrySettingsCard.vue
  • packages/elements-vue/src/components/settings/SettingsSection.vue
  • packages/elements-vue/src/components/settings/index.ts
  • packages/elements-vue/src/components/types.ts
  • packages/elements-vue/src/composables/index.ts
  • packages/elements-vue/src/composables/useComponents.spec.ts
  • packages/elements-vue/src/composables/useComponents.ts
  • packages/elements-vue/src/composables/useOryConfig.spec.ts
  • packages/elements-vue/src/composables/useOryConfig.ts
  • packages/elements-vue/src/composables/useOryFlow.spec.ts
  • packages/elements-vue/src/composables/useOryFlow.ts
  • packages/elements-vue/src/composables/useOryForm.ts
  • packages/elements-vue/src/composables/useOryFormContext.ts
  • packages/elements-vue/src/composables/useOryIntl.spec.ts
  • packages/elements-vue/src/composables/useOryIntl.ts
  • packages/elements-vue/src/composables/useResendCode.ts
  • packages/elements-vue/src/composables/useSlotContent.ts
  • packages/elements-vue/src/index.ts
  • packages/elements-vue/src/locales/af.json
  • packages/elements-vue/src/locales/ak.json
  • packages/elements-vue/src/locales/am.json
  • packages/elements-vue/src/locales/ar.json
  • packages/elements-vue/src/locales/as.json
  • packages/elements-vue/src/locales/az.json
  • packages/elements-vue/src/locales/be.json
  • packages/elements-vue/src/locales/bg.json
  • packages/elements-vue/src/locales/bm.json
  • packages/elements-vue/src/locales/bn.json
  • packages/elements-vue/src/locales/ca.json
  • packages/elements-vue/src/locales/cs.json
  • packages/elements-vue/src/locales/da.json
  • packages/elements-vue/src/locales/de.json
  • packages/elements-vue/src/locales/el.json
  • packages/elements-vue/src/locales/en.json
  • packages/elements-vue/src/locales/es.json
  • packages/elements-vue/src/locales/et.json
  • packages/elements-vue/src/locales/fa.json
  • packages/elements-vue/src/locales/fi.json
  • packages/elements-vue/src/locales/fr.json
  • packages/elements-vue/src/locales/gu.json
  • packages/elements-vue/src/locales/ha.json
  • packages/elements-vue/src/locales/he.json
  • packages/elements-vue/src/locales/hi.json
  • packages/elements-vue/src/locales/hr.json
  • packages/elements-vue/src/locales/hu.json
  • packages/elements-vue/src/locales/hy.json
  • packages/elements-vue/src/locales/id.json
  • packages/elements-vue/src/locales/ig.json
  • packages/elements-vue/src/locales/index.ts
  • packages/elements-vue/src/locales/it.json
  • packages/elements-vue/src/locales/ja.json
  • packages/elements-vue/src/locales/ka.json
  • packages/elements-vue/src/locales/kk.json
  • packages/elements-vue/src/locales/km.json
  • packages/elements-vue/src/locales/kn.json
  • packages/elements-vue/src/locales/ko.json
  • packages/elements-vue/src/locales/ku.json
  • packages/elements-vue/src/locales/ky.json
  • packages/elements-vue/src/locales/lt.json
  • packages/elements-vue/src/locales/lv.json
  • packages/elements-vue/src/locales/mk.json
  • packages/elements-vue/src/locales/ml.json
  • packages/elements-vue/src/locales/mn.json
  • packages/elements-vue/src/locales/mr.json
  • packages/elements-vue/src/locales/ms.json
  • packages/elements-vue/src/locales/my.json
  • packages/elements-vue/src/locales/ne.json
  • packages/elements-vue/src/locales/nl.json
  • packages/elements-vue/src/locales/no.json
  • packages/elements-vue/src/locales/or.json
  • packages/elements-vue/src/locales/pa.json
  • packages/elements-vue/src/locales/pl.json
  • packages/elements-vue/src/locales/ps.json
  • packages/elements-vue/src/locales/pt.json
  • packages/elements-vue/src/locales/ro.json
  • packages/elements-vue/src/locales/ru.json
  • packages/elements-vue/src/locales/sd.json
  • packages/elements-vue/src/locales/si.json
  • packages/elements-vue/src/locales/sk.json
  • packages/elements-vue/src/locales/sl.json
  • packages/elements-vue/src/locales/so.json
  • packages/elements-vue/src/locales/sq.json
  • packages/elements-vue/src/locales/sr.json
  • packages/elements-vue/src/locales/su.json
  • packages/elements-vue/src/locales/sv.json
  • packages/elements-vue/src/locales/sw.json
  • packages/elements-vue/src/locales/ta.json
  • packages/elements-vue/src/locales/te.json
  • packages/elements-vue/src/locales/tg.json
  • packages/elements-vue/src/locales/th.json
  • packages/elements-vue/src/locales/tk.json
  • packages/elements-vue/src/locales/tl.json
  • packages/elements-vue/src/locales/tr.json
  • packages/elements-vue/src/locales/ug.json
  • packages/elements-vue/src/locales/uk.json
  • packages/elements-vue/src/locales/ur.json
  • packages/elements-vue/src/locales/uz.json
  • packages/elements-vue/src/locales/vi.json
  • packages/elements-vue/src/locales/xh.json
  • packages/elements-vue/src/locales/yo.json
  • packages/elements-vue/src/locales/zh.json
  • packages/elements-vue/src/locales/zu.json
  • packages/elements-vue/src/theme/default/assets/icons/index.ts
  • packages/elements-vue/src/theme/default/components/card/DefaultAuthMethodListContainer.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultAuthMethodListItem.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultBadge.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCard.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardContent.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardFooter.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardHeader.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardLogo.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCurrentIdentifierButton.vue
  • packages/elements-vue/src/theme/default/components/card/index.ts
  • packages/elements-vue/src/theme/default/components/form/DefaultAnchor.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultButton.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCaptcha.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCheckbox.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCodeInput.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultConsentCheckbox.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultDivider.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultFormContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultGroupContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultImage.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultInput.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultLabel.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultMessage.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultMessageContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSection.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSectionContent.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSectionFooter.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSsoButton.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSsoButtonContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultText.vue
  • packages/elements-vue/src/theme/default/components/form/PinInput.vue
  • packages/elements-vue/src/theme/default/components/form/Spinner.vue
  • packages/elements-vue/src/theme/default/components/form/index.ts
  • packages/elements-vue/src/theme/default/components/index.ts
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsOidc.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsPasskey.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsRecoveryCodes.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsTotp.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsWebauthn.vue
  • packages/elements-vue/src/theme/default/components/settings/SettingsRemoveButton.vue
  • packages/elements-vue/src/theme/default/components/settings/index.ts
  • packages/elements-vue/src/theme/default/components/settings/utils.ts
  • packages/elements-vue/src/theme/default/components/ui/DefaultPageHeader.vue
  • packages/elements-vue/src/theme/default/components/ui/DefaultToast.vue
  • packages/elements-vue/src/theme/default/components/ui/Icon.vue
  • packages/elements-vue/src/theme/default/components/ui/ProviderLogo.vue
  • packages/elements-vue/src/theme/default/components/ui/UserAvatar.vue
  • packages/elements-vue/src/theme/default/components/ui/UserMenu.vue
  • packages/elements-vue/src/theme/default/components/ui/index.ts
  • packages/elements-vue/src/theme/default/components/ui/types.ts
  • packages/elements-vue/src/theme/default/flows/Consent.vue
  • packages/elements-vue/src/theme/default/flows/Error.vue
  • packages/elements-vue/src/theme/default/flows/Login.vue
  • packages/elements-vue/src/theme/default/flows/Recovery.vue
  • packages/elements-vue/src/theme/default/flows/Registration.vue
  • packages/elements-vue/src/theme/default/flows/Settings.vue
  • packages/elements-vue/src/theme/default/flows/Verification.vue
  • packages/elements-vue/src/theme/default/flows/index.ts
  • packages/elements-vue/src/theme/default/flows/types.ts
  • packages/elements-vue/src/theme/default/getOryComponents.ts
  • packages/elements-vue/src/theme/default/index.ts
  • packages/elements-vue/src/theme/default/provider-logos/index.ts
  • packages/elements-vue/src/theme/default/styles.css
  • packages/elements-vue/src/theme/default/utils/cn.ts
  • packages/elements-vue/src/theme/default/utils/constructCardHeader.ts
  • packages/elements-vue/src/theme/default/utils/i18n.ts
  • packages/elements-vue/src/theme/default/utils/logout.ts
  • packages/elements-vue/src/theme/default/utils/oauth2.ts
  • packages/elements-vue/src/theme/default/utils/url.ts
  • packages/elements-vue/src/theme/default/utils/user.ts
  • packages/elements-vue/src/types.ts
  • packages/elements-vue/src/util/client.ts
  • packages/elements-vue/src/util/flowContainer.ts
  • packages/elements-vue/src/util/getLogoutUrl.ts
  • packages/elements-vue/src/util/i18n/index.ts
  • packages/elements-vue/src/util/index.ts
  • packages/elements-vue/src/util/nodeGroups.spec.ts
  • packages/elements-vue/src/util/nodeGroups.ts
  • packages/elements-vue/src/util/nodes.spec.ts
  • packages/elements-vue/src/util/nodes.ts
  • packages/elements-vue/src/util/onSubmitLogin.ts
  • packages/elements-vue/src/util/onSubmitRecovery.ts
  • packages/elements-vue/src/util/onSubmitRegistration.ts
  • packages/elements-vue/src/util/onSubmitSettings.ts
  • packages/elements-vue/src/util/onSubmitVerification.ts
  • packages/elements-vue/src/util/removeFalsyValues.spec.ts
  • packages/elements-vue/src/util/removeFalsyValues.ts
  • packages/elements-vue/src/util/sdk-helpers/error.ts
  • packages/elements-vue/src/util/sdk-helpers/index.ts
  • packages/elements-vue/src/util/sdk-helpers/urlHelpers.ts
  • packages/elements-vue/src/util/sdk-helpers/utils.ts
  • packages/elements-vue/src/util/showToast.ts
  • packages/elements-vue/src/util/submitHandler.ts
  • packages/elements-vue/src/util/test-id.spec.ts
  • packages/elements-vue/src/util/test-id.ts
  • packages/elements-vue/src/util/ui/index.spec.ts
  • packages/elements-vue/src/util/ui/index.ts
  • packages/elements-vue/stories/components/consent/consent.stories.ts
  • packages/elements-vue/stories/components/error/error.stories.ts
  • packages/elements-vue/stories/components/error/errors/oidc_continuity.json
  • packages/elements-vue/stories/components/login/1fa/account-linking.stories.ts
  • packages/elements-vue/stories/components/login/1fa/all-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/captcha-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/code-refresh-with-password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/code-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods-with-mitigation.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods-without-mitigation.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/captcha.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/code.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/oidc.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/passkey.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/saml.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/webauthn.stories.ts
  • packages/elements-vue/stories/components/login/1fa/oidc-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/organization.stories.ts
  • packages/elements-vue/stories/components/login/1fa/passkey-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/password-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/saml-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/all.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/captcha.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/code.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/none.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/oidc.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/passkey.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/saml.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/webauthn.stories.ts
  • packages/elements-vue/stories/components/login/1fa/webauthn-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/all.refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/all.stories.ts
  • packages/elements-vue/stories/components/login/2fa/code-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/code.stories.ts
  • packages/elements-vue/stories/components/login/2fa/lookup_secret-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/lookup_secret.stories.ts
  • packages/elements-vue/stories/components/login/2fa/totp-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/totp.stories.ts
  • packages/elements-vue/stories/components/login/2fa/webauthn-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/webauthn.stories.ts
  • packages/elements-vue/stories/components/recovery/code.stories.ts
  • packages/elements-vue/stories/components/recovery_v2/code.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/all-methods.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/captcha.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/code.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/oidc.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/password.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/saml.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/webauthn.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/all-methods.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/captcha.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/code.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/oidc.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/organization.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/password.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/saml.stories.ts
  • packages/elements-vue/stories/components/settings/all-2fa.stories.ts
  • packages/elements-vue/stories/components/settings/all.stories.ts
  • packages/elements-vue/stories/components/settings/lookup_secrets.stories.ts
  • packages/elements-vue/stories/components/settings/oidc.stories.ts
  • packages/elements-vue/stories/components/settings/passkey.stories.ts
  • packages/elements-vue/stories/components/settings/saml.stories.ts
  • packages/elements-vue/stories/components/settings/totp.stories.ts
  • packages/elements-vue/stories/components/settings/webauthn.stories.ts
  • packages/elements-vue/stories/components/verification/code.stories.ts
  • packages/elements-vue/stories/customized/components/MyCustomCardHeader.vue
  • packages/elements-vue/stories/customized/input.stories.ts
  • packages/elements-vue/stories/utils.ts
  • packages/elements-vue/tsconfig.json
  • packages/elements-vue/tsup.config.ts
  • packages/elements-vue/vitest.config.ts
  • packages/nuxt/.nuxtrc
  • packages/nuxt/api-report/nuxt.api.json
  • packages/nuxt/api-report/nuxt.api.md
  • packages/nuxt/config/api-extractor.json
  • packages/nuxt/package.json
  • packages/nuxt/project.json
  • packages/nuxt/src/__mocks__/imports.ts
  • packages/nuxt/src/module.ts
  • packages/nuxt/src/runtime/composables/index.ts
  • packages/nuxt/src/runtime/composables/useOryConfig.ts
  • packages/nuxt/src/runtime/composables/useOryFlow.ts
  • packages/nuxt/src/runtime/composables/useOryFlowError.ts
  • packages/nuxt/src/runtime/composables/useOryLogout.ts
  • packages/nuxt/src/runtime/composables/useOrySession.ts
  • packages/nuxt/src/runtime/middleware/auth.ts
  • packages/nuxt/src/runtime/server/proxy.ts
  • packages/nuxt/src/runtime/types.ts
  • packages/nuxt/src/runtime/utils/cookie.spec.ts
  • packages/nuxt/src/runtime/utils/cookie.ts
  • packages/nuxt/src/runtime/utils/headers.spec.ts
  • packages/nuxt/src/runtime/utils/headers.ts
  • packages/nuxt/src/runtime/utils/rewrite.spec.ts
  • packages/nuxt/src/runtime/utils/rewrite.ts
  • packages/nuxt/src/runtime/utils/sdk.spec.ts
  • packages/nuxt/src/runtime/utils/sdk.ts
  • packages/nuxt/tsconfig.json
  • packages/nuxt/vitest.config.ts

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Please provide elements packages for other frameworks

3 participants

@Jorgagu@vinckr@aeneasr
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

feat: add Vue 3 and Nuxt integration packages - #586

Open
Jorgagu wants to merge 3 commits into
ory:mainfrom
Jorgagu:feat/add-vue-nuxt-packages
Open

feat: add Vue 3 and Nuxt integration packages#586
Jorgagu wants to merge 3 commits into
ory:mainfrom
Jorgagu:feat/add-vue-nuxt-packages

Conversation

@Jorgagu

@JorgaguJorgagu commented Jan 18, 2026

Copy link
Copy Markdown
Contributor

This PR adds Vue 3 and Nuxt integration packages for Ory Elements, bringing feature parity with the existing React/Next.js implementation.

New Packages

@ory/elements-vue - Vue 3 component library for Ory authentication UIs

  • Complete set of UI components for Login, Registration, Recovery, Verification, Settings, and Consent flows
  • Vue 3 Composition API with <script setup> syntax
  • Full TypeScript support with proper type inference
  • Default theme with Tailwind CSS v4 styling
  • Internationalization support (80+ locales)
  • Session management via SessionProvider
  • Customizable components through slot overrides
  • Storybook setup for component development and documentation

@ory/nuxt - Nuxt 3/4 integration module

  • Auto-imported composables: useOryLogin, useOryRegistration, useOryRecovery, useOryVerification, useOrySettings, useOrySession, useOryLogout, useOryFlowError
  • Server-side proxy for secure cookie handling
  • Auth middleware for route protection
  • Environment-based SDK URL configuration (NUXT_PUBLIC_ORY_SDK_URL)
  • SSR-compatible session hydration

Example Application

Complete Nuxt example app demonstrating all authentication flows at examples/nuxt-app.

Related Issue or Design Document

Fixes#581

Checklist

  • I have read the contributing guidelines and signed the CLA.
  • I have referenced an issue containing the design document if my change introduces a new feature.
  • I have read the security policy.
  • I confirm that this pull request does not address a security vulnerability.
    If this pull request addresses a security vulnerability,
    I confirm that I got approval (please contact security@ory.sh) from the maintainers to push the changes.
  • I have added tests that prove my fix is effective or that my feature works.
  • I have added the necessary documentation within the code base (if appropriate).

Further comments

The Vue/Nuxt packages follow the same architecture patterns as the React/Next.js implementation:

  • Same component hierarchy and naming conventions
  • Same context/provider architecture (using Vue's provide/inject)
  • Same flow handling logic and state management
  • Same theming system structure with customizable components
  • Same utility functions and SDK helpers

All authentication methods are supported including password, passwordless (code), social login (OIDC), passkeys, WebAuthn, TOTP, and recovery codes.

This fixes the issue #581

@changeset-bot

changeset-botBot commented Jan 18, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 1bf47b5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel

vercelBot commented Jan 18, 2026

Copy link
Copy Markdown

@Jorgagu is attempting to deploy a commit to the ory Team on Vercel.

A member of the Team first needs to authorize it.

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from c71b462 to 6e9245bCompareJanuary 18, 2026 17:23
@codecov

codecovBot commented Jan 18, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 60.64%. Comparing base (f3fad4d) to head (1bf47b5).
⚠️ Report is 358 commits behind head on main.

Additional details and impacted files
@@ Coverage Diff @@## main #586 +/- ##
===========================================
+ Coverage 42.43% 60.64% +18.21% 
===========================================
Files 136 182 +46 Lines 2008 3679 +1671 Branches 288 610 +322 ===========================================
+ Hits 852 2231 +1379 - Misses 1149 1323 +174 - Partials 7 125 +118 
ComponentsCoverage Δ
@ory/elements-react60.48% <ø> (+23.69%)⬆️
@ory/nextjs61.51% <ø> (-4.47%)⬇️
🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Jorgagu

Copy link
Copy Markdown
ContributorAuthor

Hi @jonas-jonas@aeneasr@vinckr, this PR is ready for review 🎉

👋 @Jannik-Hm@Saganic, could you please test this as well and let me know if I missed anything during my own testing?

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch 5 times, most recently from b1f6174 to c1cc2f7CompareJanuary 19, 2026 10:05
@vinckr

Copy link
Copy Markdown
Member

Hey @Jorgagu
awesome, thanks!
Will take a look with @jonas-jonas as soon as time permits.

to resolve the format CI, can you run make format on your branch?

🐝

@Jorgagu

Copy link
Copy Markdown
ContributorAuthor

@vinckr thanks! I ran make format, but it also reformatted some files that weren’t changed in this PR.

@aeneasr

Copy link
Copy Markdown
Member

Cool stuff man! Given the massive size of the PR I'm not sure how quickly we can review this. We also need to figure out a way to add this to our e2e test suite (currently not open sourced) to ensure the advertised functionality matches the requirements. We also need to figure out who will be responsible on the team for maintaining those SDKs going forward (e.g. when we introduce new features). May I ask which approach you took to transfer the react elements to vue and nuxt? It will help us speed up review.

@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 1723f6e to 74080aeCompareJanuary 27, 2026 12:11
@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 74080ae to 741b30aCompareMarch 14, 2026 19:54
Port @ory/elements-vue, @ory/nuxt, and the nuxt-app example onto the pnpm
workspace. Reference @ory/client-fetch 1.22.37 like the sibling packages,
use workspace protocol for internal deps, and wire nx release groups,
eslint vue support, and api-extractor reports for the new packages.
Port the component enhancement pass onto the pnpm workspace:
- replace the per-icon modules with a unified Icon component and extract
the icon typing into ui/types for lint-safe type imports
- add ProviderLogo with real OIDC provider logos and a provider-logos entry
- add settings toasts through vue-sonner (DefaultToast, showToast)
- extract SSO rendering into OryFormSsoForm and DefaultSsoButtonContainer
- handle flows without visible authentication methods in OryForm
- support the OAuth2 consent flow in the default card header
- keep storybook tooling at the workspace root per repo convention, adding
the vue3 framework packages at the shared storybook version
- regenerate the elements-vue API reports
Add a Storybook configuration for the Vue package mirroring the
elements-react setup: @storybook/vue3-vite framework, addon set
(essentials, interactions, a11y, storybook-addon-mock), Inter font
assets, and vite aliases resolving @ory/elements-vue to the package
source and $snapshots to the shared elements-react stub responses.
Port the full story tree (login, registration, recovery, verification,
settings, consent, error, customized) and shared story utilities.
Adaptations against the original branch content:
- import LoginFlowActiveEnum from the @ory/client-fetch package root
instead of a deep src/models path not exported by 1.22.37
- align captcha, organization, and refresh code stories with the
current stub-responses layout (interactive/hidden/client-error
captcha variants, organization-oidc/organization-saml splits,
renamed refresh code fixtures)
- load @tailwindcss/vite through a dynamic import because the package
is ESM-only and Storybook evaluates main.ts as CommonJS
- add an eslint override for packages/elements-vue/stories matching
the elements-react stories override
@Jorgagu
Jorgaguforce-pushed the feat/add-vue-nuxt-packages branch from 741b30a to 1bf47b5CompareJuly 20, 2026 22:25
@coderabbitai

Copy link
Copy Markdown

Important

Review skipped

Too many files!

This PR contains 367 files, which is 267 over the limit of 100.

To get a review, narrow the scope:
• coderabbit review --committed # exclude uncommitted changes
• coderabbit review --dir # limit to a subdirectory
• coderabbit review --base # compare against a closer base

Upgrade to a paid plan to raise the limit.

Usage-priced reviews support at most 300 files.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 1c8d9337-1474-4668-a0f2-c31fdbc737b6

📥 Commits

Reviewing files that changed from the base of the PR and between 11d7877 and 1bf47b5.

⛔ Files ignored due to path filters (6)
  • examples/nuxt-app/public/favicon.ico is excluded by !**/*.ico
  • examples/nuxt-app/public/ory-logo.svg is excluded by !**/*.svg
  • packages/elements-vue/.storybook/public/InterVariable.woff2 is excluded by !**/*.woff2
  • packages/elements-vue/src/theme/default/assets/ory-badge-horizontal.svg is excluded by !**/*.svg
  • packages/elements-vue/src/theme/default/assets/ory-badge-vertical.svg is excluded by !**/*.svg
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (367)
  • .editorconfig
  • .github/workflows/release.yml
  • .gitignore
  • eslint.config.mjs
  • examples/nuxt-app/.env.example
  • examples/nuxt-app/.gitignore
  • examples/nuxt-app/README.md
  • examples/nuxt-app/app.vue
  • examples/nuxt-app/assets/css/main.css
  • examples/nuxt-app/layouts/auth.vue
  • examples/nuxt-app/layouts/default.vue
  • examples/nuxt-app/nuxt.config.ts
  • examples/nuxt-app/package.json
  • examples/nuxt-app/pages/error.vue
  • examples/nuxt-app/pages/index.vue
  • examples/nuxt-app/pages/login.vue
  • examples/nuxt-app/pages/recovery.vue
  • examples/nuxt-app/pages/registration.vue
  • examples/nuxt-app/pages/session.vue
  • examples/nuxt-app/pages/settings.vue
  • examples/nuxt-app/pages/verification.vue
  • examples/nuxt-app/project.json
  • nx.json
  • package.json
  • packages/elements-vue/.storybook/global.css
  • packages/elements-vue/.storybook/main.ts
  • packages/elements-vue/.storybook/preview-head.html
  • packages/elements-vue/.storybook/preview.ts
  • packages/elements-vue/.storybook/public/inter.css
  • packages/elements-vue/api-report/elements-vue-client.api.json
  • packages/elements-vue/api-report/elements-vue-client.api.md
  • packages/elements-vue/api-report/elements-vue-theme.api.json
  • packages/elements-vue/api-report/elements-vue-theme.api.md
  • packages/elements-vue/api-report/elements-vue.api.json
  • packages/elements-vue/api-report/elements-vue.api.md
  • packages/elements-vue/config/api-extractor-client.json
  • packages/elements-vue/config/api-extractor-core.json
  • packages/elements-vue/config/api-extractor-theme.json
  • packages/elements-vue/package.json
  • packages/elements-vue/project.json
  • packages/elements-vue/src/client/SessionProvider.vue
  • packages/elements-vue/src/client/index.ts
  • packages/elements-vue/src/client/useSession.spec.ts
  • packages/elements-vue/src/client/useSession.ts
  • packages/elements-vue/src/components/OryPageHeader.vue
  • packages/elements-vue/src/components/OryProvider.vue
  • packages/elements-vue/src/components/card/OryCard.vue
  • packages/elements-vue/src/components/card/OryCardContent.vue
  • packages/elements-vue/src/components/card/OryCardFooter.vue
  • packages/elements-vue/src/components/card/OryCardHeader.vue
  • packages/elements-vue/src/components/card/OryConsentCard.vue
  • packages/elements-vue/src/components/card/OrySelfServiceFlowCard.vue
  • packages/elements-vue/src/components/card/index.ts
  • packages/elements-vue/src/components/card/two-step/MethodActiveForm.vue
  • packages/elements-vue/src/components/card/two-step/ProvideIdentifierForm.vue
  • packages/elements-vue/src/components/card/two-step/SelectMethodForm.vue
  • packages/elements-vue/src/components/card/two-step/index.ts
  • packages/elements-vue/src/components/card/two-step/utils.ts
  • packages/elements-vue/src/components/form/OryForm.vue
  • packages/elements-vue/src/components/form/OryFormGroup.vue
  • packages/elements-vue/src/components/form/OryFormSsoForm.vue
  • packages/elements-vue/src/components/form/OryMessages.vue
  • packages/elements-vue/src/components/form/index.ts
  • packages/elements-vue/src/components/form/nodes/OryNode.vue
  • packages/elements-vue/src/components/form/nodes/index.ts
  • packages/elements-vue/src/components/index.ts
  • packages/elements-vue/src/components/settings/OrySettingsCard.vue
  • packages/elements-vue/src/components/settings/SettingsSection.vue
  • packages/elements-vue/src/components/settings/index.ts
  • packages/elements-vue/src/components/types.ts
  • packages/elements-vue/src/composables/index.ts
  • packages/elements-vue/src/composables/useComponents.spec.ts
  • packages/elements-vue/src/composables/useComponents.ts
  • packages/elements-vue/src/composables/useOryConfig.spec.ts
  • packages/elements-vue/src/composables/useOryConfig.ts
  • packages/elements-vue/src/composables/useOryFlow.spec.ts
  • packages/elements-vue/src/composables/useOryFlow.ts
  • packages/elements-vue/src/composables/useOryForm.ts
  • packages/elements-vue/src/composables/useOryFormContext.ts
  • packages/elements-vue/src/composables/useOryIntl.spec.ts
  • packages/elements-vue/src/composables/useOryIntl.ts
  • packages/elements-vue/src/composables/useResendCode.ts
  • packages/elements-vue/src/composables/useSlotContent.ts
  • packages/elements-vue/src/index.ts
  • packages/elements-vue/src/locales/af.json
  • packages/elements-vue/src/locales/ak.json
  • packages/elements-vue/src/locales/am.json
  • packages/elements-vue/src/locales/ar.json
  • packages/elements-vue/src/locales/as.json
  • packages/elements-vue/src/locales/az.json
  • packages/elements-vue/src/locales/be.json
  • packages/elements-vue/src/locales/bg.json
  • packages/elements-vue/src/locales/bm.json
  • packages/elements-vue/src/locales/bn.json
  • packages/elements-vue/src/locales/ca.json
  • packages/elements-vue/src/locales/cs.json
  • packages/elements-vue/src/locales/da.json
  • packages/elements-vue/src/locales/de.json
  • packages/elements-vue/src/locales/el.json
  • packages/elements-vue/src/locales/en.json
  • packages/elements-vue/src/locales/es.json
  • packages/elements-vue/src/locales/et.json
  • packages/elements-vue/src/locales/fa.json
  • packages/elements-vue/src/locales/fi.json
  • packages/elements-vue/src/locales/fr.json
  • packages/elements-vue/src/locales/gu.json
  • packages/elements-vue/src/locales/ha.json
  • packages/elements-vue/src/locales/he.json
  • packages/elements-vue/src/locales/hi.json
  • packages/elements-vue/src/locales/hr.json
  • packages/elements-vue/src/locales/hu.json
  • packages/elements-vue/src/locales/hy.json
  • packages/elements-vue/src/locales/id.json
  • packages/elements-vue/src/locales/ig.json
  • packages/elements-vue/src/locales/index.ts
  • packages/elements-vue/src/locales/it.json
  • packages/elements-vue/src/locales/ja.json
  • packages/elements-vue/src/locales/ka.json
  • packages/elements-vue/src/locales/kk.json
  • packages/elements-vue/src/locales/km.json
  • packages/elements-vue/src/locales/kn.json
  • packages/elements-vue/src/locales/ko.json
  • packages/elements-vue/src/locales/ku.json
  • packages/elements-vue/src/locales/ky.json
  • packages/elements-vue/src/locales/lt.json
  • packages/elements-vue/src/locales/lv.json
  • packages/elements-vue/src/locales/mk.json
  • packages/elements-vue/src/locales/ml.json
  • packages/elements-vue/src/locales/mn.json
  • packages/elements-vue/src/locales/mr.json
  • packages/elements-vue/src/locales/ms.json
  • packages/elements-vue/src/locales/my.json
  • packages/elements-vue/src/locales/ne.json
  • packages/elements-vue/src/locales/nl.json
  • packages/elements-vue/src/locales/no.json
  • packages/elements-vue/src/locales/or.json
  • packages/elements-vue/src/locales/pa.json
  • packages/elements-vue/src/locales/pl.json
  • packages/elements-vue/src/locales/ps.json
  • packages/elements-vue/src/locales/pt.json
  • packages/elements-vue/src/locales/ro.json
  • packages/elements-vue/src/locales/ru.json
  • packages/elements-vue/src/locales/sd.json
  • packages/elements-vue/src/locales/si.json
  • packages/elements-vue/src/locales/sk.json
  • packages/elements-vue/src/locales/sl.json
  • packages/elements-vue/src/locales/so.json
  • packages/elements-vue/src/locales/sq.json
  • packages/elements-vue/src/locales/sr.json
  • packages/elements-vue/src/locales/su.json
  • packages/elements-vue/src/locales/sv.json
  • packages/elements-vue/src/locales/sw.json
  • packages/elements-vue/src/locales/ta.json
  • packages/elements-vue/src/locales/te.json
  • packages/elements-vue/src/locales/tg.json
  • packages/elements-vue/src/locales/th.json
  • packages/elements-vue/src/locales/tk.json
  • packages/elements-vue/src/locales/tl.json
  • packages/elements-vue/src/locales/tr.json
  • packages/elements-vue/src/locales/ug.json
  • packages/elements-vue/src/locales/uk.json
  • packages/elements-vue/src/locales/ur.json
  • packages/elements-vue/src/locales/uz.json
  • packages/elements-vue/src/locales/vi.json
  • packages/elements-vue/src/locales/xh.json
  • packages/elements-vue/src/locales/yo.json
  • packages/elements-vue/src/locales/zh.json
  • packages/elements-vue/src/locales/zu.json
  • packages/elements-vue/src/theme/default/assets/icons/index.ts
  • packages/elements-vue/src/theme/default/components/card/DefaultAuthMethodListContainer.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultAuthMethodListItem.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultBadge.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCard.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardContent.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardFooter.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardHeader.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCardLogo.vue
  • packages/elements-vue/src/theme/default/components/card/DefaultCurrentIdentifierButton.vue
  • packages/elements-vue/src/theme/default/components/card/index.ts
  • packages/elements-vue/src/theme/default/components/form/DefaultAnchor.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultButton.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCaptcha.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCheckbox.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultCodeInput.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultConsentCheckbox.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultDivider.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultFormContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultGroupContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultImage.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultInput.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultLabel.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultMessage.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultMessageContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSection.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSectionContent.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSettingsSectionFooter.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSsoButton.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultSsoButtonContainer.vue
  • packages/elements-vue/src/theme/default/components/form/DefaultText.vue
  • packages/elements-vue/src/theme/default/components/form/PinInput.vue
  • packages/elements-vue/src/theme/default/components/form/Spinner.vue
  • packages/elements-vue/src/theme/default/components/form/index.ts
  • packages/elements-vue/src/theme/default/components/index.ts
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsOidc.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsPasskey.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsRecoveryCodes.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsTotp.vue
  • packages/elements-vue/src/theme/default/components/settings/DefaultSettingsWebauthn.vue
  • packages/elements-vue/src/theme/default/components/settings/SettingsRemoveButton.vue
  • packages/elements-vue/src/theme/default/components/settings/index.ts
  • packages/elements-vue/src/theme/default/components/settings/utils.ts
  • packages/elements-vue/src/theme/default/components/ui/DefaultPageHeader.vue
  • packages/elements-vue/src/theme/default/components/ui/DefaultToast.vue
  • packages/elements-vue/src/theme/default/components/ui/Icon.vue
  • packages/elements-vue/src/theme/default/components/ui/ProviderLogo.vue
  • packages/elements-vue/src/theme/default/components/ui/UserAvatar.vue
  • packages/elements-vue/src/theme/default/components/ui/UserMenu.vue
  • packages/elements-vue/src/theme/default/components/ui/index.ts
  • packages/elements-vue/src/theme/default/components/ui/types.ts
  • packages/elements-vue/src/theme/default/flows/Consent.vue
  • packages/elements-vue/src/theme/default/flows/Error.vue
  • packages/elements-vue/src/theme/default/flows/Login.vue
  • packages/elements-vue/src/theme/default/flows/Recovery.vue
  • packages/elements-vue/src/theme/default/flows/Registration.vue
  • packages/elements-vue/src/theme/default/flows/Settings.vue
  • packages/elements-vue/src/theme/default/flows/Verification.vue
  • packages/elements-vue/src/theme/default/flows/index.ts
  • packages/elements-vue/src/theme/default/flows/types.ts
  • packages/elements-vue/src/theme/default/getOryComponents.ts
  • packages/elements-vue/src/theme/default/index.ts
  • packages/elements-vue/src/theme/default/provider-logos/index.ts
  • packages/elements-vue/src/theme/default/styles.css
  • packages/elements-vue/src/theme/default/utils/cn.ts
  • packages/elements-vue/src/theme/default/utils/constructCardHeader.ts
  • packages/elements-vue/src/theme/default/utils/i18n.ts
  • packages/elements-vue/src/theme/default/utils/logout.ts
  • packages/elements-vue/src/theme/default/utils/oauth2.ts
  • packages/elements-vue/src/theme/default/utils/url.ts
  • packages/elements-vue/src/theme/default/utils/user.ts
  • packages/elements-vue/src/types.ts
  • packages/elements-vue/src/util/client.ts
  • packages/elements-vue/src/util/flowContainer.ts
  • packages/elements-vue/src/util/getLogoutUrl.ts
  • packages/elements-vue/src/util/i18n/index.ts
  • packages/elements-vue/src/util/index.ts
  • packages/elements-vue/src/util/nodeGroups.spec.ts
  • packages/elements-vue/src/util/nodeGroups.ts
  • packages/elements-vue/src/util/nodes.spec.ts
  • packages/elements-vue/src/util/nodes.ts
  • packages/elements-vue/src/util/onSubmitLogin.ts
  • packages/elements-vue/src/util/onSubmitRecovery.ts
  • packages/elements-vue/src/util/onSubmitRegistration.ts
  • packages/elements-vue/src/util/onSubmitSettings.ts
  • packages/elements-vue/src/util/onSubmitVerification.ts
  • packages/elements-vue/src/util/removeFalsyValues.spec.ts
  • packages/elements-vue/src/util/removeFalsyValues.ts
  • packages/elements-vue/src/util/sdk-helpers/error.ts
  • packages/elements-vue/src/util/sdk-helpers/index.ts
  • packages/elements-vue/src/util/sdk-helpers/urlHelpers.ts
  • packages/elements-vue/src/util/sdk-helpers/utils.ts
  • packages/elements-vue/src/util/showToast.ts
  • packages/elements-vue/src/util/submitHandler.ts
  • packages/elements-vue/src/util/test-id.spec.ts
  • packages/elements-vue/src/util/test-id.ts
  • packages/elements-vue/src/util/ui/index.spec.ts
  • packages/elements-vue/src/util/ui/index.ts
  • packages/elements-vue/stories/components/consent/consent.stories.ts
  • packages/elements-vue/stories/components/error/error.stories.ts
  • packages/elements-vue/stories/components/error/errors/oidc_continuity.json
  • packages/elements-vue/stories/components/login/1fa/account-linking.stories.ts
  • packages/elements-vue/stories/components/login/1fa/all-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/captcha-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/code-refresh-with-password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/code-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods-with-mitigation.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods-without-mitigation.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/all-methods.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/captcha.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/code.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/oidc.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/passkey.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/saml.stories.ts
  • packages/elements-vue/stories/components/login/1fa/identifier_first/webauthn.stories.ts
  • packages/elements-vue/stories/components/login/1fa/oidc-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/organization.stories.ts
  • packages/elements-vue/stories/components/login/1fa/passkey-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/password-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/saml-refresh.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/all.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/captcha.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/code.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/none.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/oidc.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/passkey.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/password.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/saml.stories.ts
  • packages/elements-vue/stories/components/login/1fa/unified/webauthn.stories.ts
  • packages/elements-vue/stories/components/login/1fa/webauthn-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/all.refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/all.stories.ts
  • packages/elements-vue/stories/components/login/2fa/code-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/code.stories.ts
  • packages/elements-vue/stories/components/login/2fa/lookup_secret-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/lookup_secret.stories.ts
  • packages/elements-vue/stories/components/login/2fa/totp-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/totp.stories.ts
  • packages/elements-vue/stories/components/login/2fa/webauthn-refresh.stories.ts
  • packages/elements-vue/stories/components/login/2fa/webauthn.stories.ts
  • packages/elements-vue/stories/components/recovery/code.stories.ts
  • packages/elements-vue/stories/components/recovery_v2/code.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/all-methods.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/captcha.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/code.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/oidc.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/password.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/saml.stories.ts
  • packages/elements-vue/stories/components/registration/one-step/webauthn.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/all-methods.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/captcha.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/code.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/oidc.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/organization.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/password.stories.ts
  • packages/elements-vue/stories/components/registration/two-step/saml.stories.ts
  • packages/elements-vue/stories/components/settings/all-2fa.stories.ts
  • packages/elements-vue/stories/components/settings/all.stories.ts
  • packages/elements-vue/stories/components/settings/lookup_secrets.stories.ts
  • packages/elements-vue/stories/components/settings/oidc.stories.ts
  • packages/elements-vue/stories/components/settings/passkey.stories.ts
  • packages/elements-vue/stories/components/settings/saml.stories.ts
  • packages/elements-vue/stories/components/settings/totp.stories.ts
  • packages/elements-vue/stories/components/settings/webauthn.stories.ts
  • packages/elements-vue/stories/components/verification/code.stories.ts
  • packages/elements-vue/stories/customized/components/MyCustomCardHeader.vue
  • packages/elements-vue/stories/customized/input.stories.ts
  • packages/elements-vue/stories/utils.ts
  • packages/elements-vue/tsconfig.json
  • packages/elements-vue/tsup.config.ts
  • packages/elements-vue/vitest.config.ts
  • packages/nuxt/.nuxtrc
  • packages/nuxt/api-report/nuxt.api.json
  • packages/nuxt/api-report/nuxt.api.md
  • packages/nuxt/config/api-extractor.json
  • packages/nuxt/package.json
  • packages/nuxt/project.json
  • packages/nuxt/src/__mocks__/imports.ts
  • packages/nuxt/src/module.ts
  • packages/nuxt/src/runtime/composables/index.ts
  • packages/nuxt/src/runtime/composables/useOryConfig.ts
  • packages/nuxt/src/runtime/composables/useOryFlow.ts
  • packages/nuxt/src/runtime/composables/useOryFlowError.ts
  • packages/nuxt/src/runtime/composables/useOryLogout.ts
  • packages/nuxt/src/runtime/composables/useOrySession.ts
  • packages/nuxt/src/runtime/middleware/auth.ts
  • packages/nuxt/src/runtime/server/proxy.ts
  • packages/nuxt/src/runtime/types.ts
  • packages/nuxt/src/runtime/utils/cookie.spec.ts
  • packages/nuxt/src/runtime/utils/cookie.ts
  • packages/nuxt/src/runtime/utils/headers.spec.ts
  • packages/nuxt/src/runtime/utils/headers.ts
  • packages/nuxt/src/runtime/utils/rewrite.spec.ts
  • packages/nuxt/src/runtime/utils/rewrite.ts
  • packages/nuxt/src/runtime/utils/sdk.spec.ts
  • packages/nuxt/src/runtime/utils/sdk.ts
  • packages/nuxt/tsconfig.json
  • packages/nuxt/vitest.config.ts

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Please provide elements packages for other frameworks

3 participants

@Jorgagu@vinckr@aeneasr