Skip to content

Conversation

@Jorgagu
Copy link
Contributor

@Jorgagu Jorgagu commented Jan 18, 2026

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 [email protected]) 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
Copy link

changeset-bot bot commented Jan 18, 2026

⚠️ No Changeset found

Latest commit: 1723f6e

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
Copy link

vercel bot commented Jan 18, 2026

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

A member of the Team first needs to authorize it.

- Remove postinstall script from nuxt-app that blocked npm ci
- Add prepare:types script for manual IDE type generation
- Update vue-i18n from v9 to v11 (v9/v10 deprecated)
- Regenerate package-lock.json with Node 22
- Update nuxt-app README to match actual configuration
@Jorgagu Jorgagu force-pushed the feat/add-vue-nuxt-packages branch from c71b462 to 6e9245b Compare January 18, 2026 17:23
@codecov
Copy link

codecov bot commented Jan 18, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 55.79%. Comparing base (f3fad4d) to head (1723f6e).
⚠️ Report is 274 commits behind head on main.

Additional details and impacted files
@@             Coverage Diff             @@
##             main     #586       +/-   ##
===========================================
+ Coverage   42.43%   55.79%   +13.36%     
===========================================
  Files         136      173       +37     
  Lines        2008     3194     +1186     
  Branches      288      472      +184     
===========================================
+ Hits          852     1782      +930     
- Misses       1149     1344      +195     
- Partials        7       68       +61     
Components Coverage Δ
@ory/elements-react 54.63% <ø> (+17.84%) ⬆️
@ory/nextjs 62.52% <ø> (-3.46%) ⬇️
🚀 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
Contributor Author

Jorgagu commented Jan 18, 2026

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?

- Add new UI components: Icon, ProviderLogo, DefaultToast, DefaultSsoButtonContainer
- Add toast notification system with vue-sonner integration
- Fix recovery codes grid display (5-column layout)
- Fix provider logos in OIDC settings (show actual logos instead of letters)
- Remove wrapper div from OrySettingsCard (use Vue 3 fragments)
- Consolidate icon system into unified Icon.vue component
- Add provider logos support matching React implementation
- Simplify code and remove duplicate utilities
- Update dependencies for vue-sonner support
- Add Storybook configuration with Vue 3 + Vite
- Add stories for all authentication flows:
  - Login (1FA, 2FA, identifier-first, unified)
  - Registration (one-step, two-step)
  - Recovery, Recovery v2
  - Verification
  - Settings (profile, password, TOTP, WebAuthn, Passkey, OIDC, SAML)
  - Consent, Error
- Add custom components example story
- Configure Inter font and global styles
- Add mock data support with storybook-addon-mock
@Jorgagu Jorgagu force-pushed the feat/add-vue-nuxt-packages branch 4 times, most recently from 529f2f6 to b1f6174 Compare January 19, 2026 09:06
- Fix unsafe return types in computed properties
- Fix promise/always-return in DefaultCaptcha
- Remove unnecessary type assertion in flowContainer
- Remove unused eslint-disable directives
- Update API reports
@Jorgagu Jorgagu force-pushed the feat/add-vue-nuxt-packages branch from b1f6174 to c1cc2f7 Compare January 19, 2026 10:05
@vinckr
Copy link
Member

vinckr commented Jan 19, 2026

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
Contributor Author

Jorgagu commented Jan 19, 2026

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

Sign up for free to 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

2 participants