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

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

changeset-bot bot commented Jan 18, 2026

⚠️ No Changeset found

Latest commit: 6e9245b

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 (6e9245b).
⚠️ 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?

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

1 participant