fix: missing support for Vue3 vapor mode in the options API

[kazupon]

related #2320

Summary by CodeRabbit

• Refactor
  • Optimized internal Vue i18n instance storage and lifecycle management for improved reliability and maintainability.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The Vue i18n mixin is refactored to migrate from DOM-element-based storage to instance-based storage for the VueI18n composer. The getCurrentInstance import is moved to utils, and lifecycle hooks (mounted, unmounted) are updated to manage instance.__VUE_I18N__ instead of this.$el.__VUE_I18N__ with null-instance guards.

Changes

Cohort / File(s)	Summary
Mixin Runtime Storage Refactoring packages/vue-i18n-core/src/mixins.ts	Move getCurrentInstance import to utils; replace DOM-based storage (this.$el.__VUE_I18N__) with instance-based storage (instance.__VUE_I18N__); add runtime guards for null instance; update mounted and unmounted lifecycle hooks to manage instance storage instead of element storage.

Sequence Diagram

sequenceDiagram
    participant Component
    participant Lifecycle as Lifecycle Hooks
    participant Instance as Component Instance
    participant Emitter
    
    Note over Component,Emitter: Old Flow (DOM-based)
    Component->>Lifecycle: mounted
    Lifecycle->>Instance: check this.$el.__VUE_I18N__
    Lifecycle->>Instance: store on this.$el.__VUE_I18N__
    Lifecycle->>Emitter: enable
    
    Component->>Lifecycle: unmounted
    Lifecycle->>Instance: remove this.$el.__VUE_I18N__
    Lifecycle->>Emitter: cleanup & dispose
    
    rect rgb(220, 240, 255)
    Note over Component,Emitter: New Flow (instance-based)
    Component->>Lifecycle: mounted
    Lifecycle->>Instance: getCurrentInstance()
    alt instance exists
        Lifecycle->>Instance: store on instance.__VUE_I18N__
        Lifecycle->>Emitter: enable
    else instance is null
        Lifecycle->>Lifecycle: runtime guard
    end
    
    Component->>Lifecycle: unmounted
    Lifecycle->>Instance: getCurrentInstance()
    alt instance exists
        Lifecycle->>Instance: remove instance.__VUE_I18N__
        Lifecycle->>Emitter: cleanup & dispose
    end
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Pay close attention to null-instance guard implementation and error handling paths
• Verify that lifecycle hook transitions (mounted/unmounted) correctly manage instance storage lifecycle
• Confirm that local VueI18n instance initialization uses instance-based storage consistently

Possibly related PRs

• feat: compatible Vue3 vapor mode for v11 #2320: Modifies the same runtime wiring by moving getCurrentInstance to utils and replacing DOM-based vnode.el.__VUE_I18N__ storage with instance-based instance.__VUE_I18N__ storage.
• feat: compatible Vue3 vapor mode #2299: Related change that moves getCurrentInstance to utils and switches from vnode.el.__VUE_I18N__ to instance.__VUE_I18N__ with corresponding type updates and runtime guards.

Poem

🐰 No more DOM in sight,
Instance holds the composer tight,
Mounted guards and cleanup flows,
Where the Vue-i18n blessing goes! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: fixing Vue3 vapor mode support in the options API by refactoring instance storage from element-based to instance-based.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/vue3-vapor-for-v11-2

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 100c669 and 8b98d0b.

📒 Files selected for processing (1)

• packages/vue-i18n-core/src/mixins.ts (3 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: Build (macos-latest, 20)
• GitHub Check: Build (windows-latest, 20)
• GitHub Check: Build (ubuntu-latest, 20)
• GitHub Check: release
• GitHub Check: release
• GitHub Check: Cloudflare Pages

🔇 Additional comments (4)

packages/vue-i18n-core/src/mixins.ts (4)

46-117: LGTM: beforeCreate hook properly guards against null instance.

The hard guard (throwing error) for null instance is appropriate here, as getCurrentInstance() should always return a valid instance during the beforeCreate lifecycle hook.

---

139-179: LGTM: Instance-based cleanup correctly implemented.

The migration from this.$el.__VUE_I18N__ to instance.__VUE_I18N__ in the cleanup logic (lines 152, 160) is correct for supporting Vue3 vapor mode. The instance-based storage approach aligns with the vapor mode's architecture.

---

6-10: Now I need to inspect the actual implementation of getCurrentInstance in utils.ts to see if it includes vapor mode handling:

getCurrentInstance is properly exported from utils—verification complete.

The import has been confirmed to be valid. The utils module exports getCurrentInstance at line 222, supporting the import change in mixins.ts lines 6-10. This import aligns with vapor mode support, as getCurrentInstance() returns null in Vapor components, and the code appropriately handles this with a null guard in the mounted hook (lines 126-129).

---

119-137: Inconsistent null-instance handling is intentional but undocumented.

Verification confirms:

1. Migration complete: No remaining references to $el.__VUE_I18N__ in the codebase.
2. Inconsistency is real: beforeCreate (line 50) and unmounted (line 143) throw errors when instance is null, while mounted (line 128) returns silently.

The pattern appears intentional: mounted handles optional devtools setup (safely skipped if instance unavailable), whereas beforeCreate and unmounted perform critical lifecycle operations and require an instance. However, this design intent should be documented with a comment explaining why mounted gracefully degrades while other hooks throw.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[kazupon]

@coderabbitai
please review this PR!

[coderabbitai]

@kazupon I'll review the changes in this PR right away!

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[cloudflare-workers-and-pages]

Deploying vue-i18n-next with    Cloudflare Pages

Latest commit:	8b98d0b
Status:	✅  Deploy successful!
Preview URL:	https://a6f82b67.vue-i18n-next.pages.dev
Branch Preview URL:	https://feat-vue3-vapor-for-v11-2.vue-i18n-next.pages.dev

View logs

[pkg-pr-new]

Open in StackBlitz

@intlify/core

npm i https://pkg.pr.new/@intlify/core@2321

@intlify/core-base

npm i https://pkg.pr.new/@intlify/core-base@2321

@intlify/devtools-types

npm i https://pkg.pr.new/@intlify/devtools-types@2321

@intlify/message-compiler

npm i https://pkg.pr.new/@intlify/message-compiler@2321

petite-vue-i18n

npm i https://pkg.pr.new/petite-vue-i18n@2321

@intlify/shared

npm i https://pkg.pr.new/@intlify/shared@2321

vue-i18n

npm i https://pkg.pr.new/vue-i18n@2321

@intlify/vue-i18n-core

npm i https://pkg.pr.new/@intlify/vue-i18n-core@2321

commit: 8b98d0b