fix(compiler-sfc): support template literal as defineModel name by babu-ch · Pull Request #14622 · vuejs/core

babu-ch · 2026-03-23T15:12:00Z

fixes #14621

Summary by CodeRabbit

New Features
- defineModel() now supports template literal syntax for specifying model names, offering developers more flexible and expressive model declarations in their Vue components. Template literals with dynamic expressions automatically fall back to the default "modelValue" model name, ensuring robust and consistent handling of various edge cases while maintaining full backward compatibility with existing code.

coderabbitai · 2026-03-23T15:12:16Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7f38b065-c6f5-47fa-aeae-e1ce3f7f9737

📥 Commits

Reviewing files that changed from the base of the PR and between d61d803 and 8e084fa.

⛔ Files ignored due to path filters (1)

packages/compiler-sfc/__tests__/compileScript/__snapshots__/defineModel.spec.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (2)

packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts
packages/compiler-sfc/src/script/defineModel.ts

📝 Walkthrough

Walkthrough

Adds support for template literals without expressions in defineModel() calls. The compiler now recognizes backtick strings as valid model names alongside regular string literals, fixing duplicate model name errors when using template literals.

Changes

Cohort / File(s)	Summary
Test Coverage for Template Literal Support `packages/compiler-sfc/__tests__/compileScript/defineModel.spec.ts`	Added two test suites: one for template literals without expressions (e.g., `x`) verifying correct `props`, `emits`, and `_useModel` calls; another for template literals with expressions confirming fallback to `"modelValue"` behavior.
Template Literal Name Handling `packages/compiler-sfc/src/script/defineModel.ts`	Modified `processDefineModel` to recognize both `StringLiteral` and `TemplateLiteral` (with zero expressions) as valid name sources. Template literal names are extracted from the first quasi's cooked value, aligning behavior with string literals.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

fix(compiler-sfc): add error handling for defineModel() without variable assignment #13352: Modifies the same processDefineModel function to add a no-assignment error check, creating a potential merge concern.

Suggested labels

scope: compiler, scope: sfc, :hammer: p3-minor-bug

Suggested reviewers

KazariEX
sxzz

Poem

🐰 A backtick string caused quite the fuss,
Models confused, oh what a cuss!
Now template literals work just right,
No duplicate errors in sight! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding support for template literals as defineModel names, which directly addresses the reported issue.
Linked Issues check	✅ Passed	The implementation correctly handles template literals without expressions as defineModel names, accepting them alongside StringLiterals and falling back to 'modelValue' for expressions, which addresses issue `#14621`'s requirement.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to supporting template literals in defineModel: the core logic change in defineModel.ts and comprehensive test coverage in defineModel.spec.ts.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 and usage tips.}

github-actions · 2026-03-23T15:13:00Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	105 kB	39.7 kB	35.7 kB
vue.global.prod.js	163 kB	59.7 kB	53.1 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.2 kB	18.7 kB	17.2 kB
createApp	56.3 kB	21.8 kB	19.9 kB
createSSRApp	60.6 kB	23.5 kB	21.5 kB
defineCustomElement	62.5 kB	23.7 kB	21.6 kB
overall	70.7 kB	27.1 kB	24.7 kB

pkg-pr-new · 2026-03-23T15:13:03Z

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14622

npm i https://pkg.pr.new/@vue/compiler-core@14622

yarn add https://pkg.pr.new/@vue/compiler-core@14622.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14622

npm i https://pkg.pr.new/@vue/compiler-dom@14622

yarn add https://pkg.pr.new/@vue/compiler-dom@14622.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14622

npm i https://pkg.pr.new/@vue/compiler-sfc@14622

yarn add https://pkg.pr.new/@vue/compiler-sfc@14622.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14622

npm i https://pkg.pr.new/@vue/compiler-ssr@14622

yarn add https://pkg.pr.new/@vue/compiler-ssr@14622.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14622

npm i https://pkg.pr.new/@vue/reactivity@14622

yarn add https://pkg.pr.new/@vue/reactivity@14622.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14622

npm i https://pkg.pr.new/@vue/runtime-core@14622

yarn add https://pkg.pr.new/@vue/runtime-core@14622.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14622

npm i https://pkg.pr.new/@vue/runtime-dom@14622

yarn add https://pkg.pr.new/@vue/runtime-dom@14622.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14622

npm i https://pkg.pr.new/@vue/server-renderer@14622

yarn add https://pkg.pr.new/@vue/server-renderer@14622.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14622

npm i https://pkg.pr.new/@vue/shared@14622

yarn add https://pkg.pr.new/@vue/shared@14622.tgz

vue

pnpm add https://pkg.pr.new/vue@14622

npm i https://pkg.pr.new/vue@14622

yarn add https://pkg.pr.new/vue@14622.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14622

npm i https://pkg.pr.new/@vue/compat@14622

yarn add https://pkg.pr.new/@vue/compat@14622.tgz

commit: 8e084fa

edison1105 · 2026-03-24T07:24:09Z

/ecosystem-ci run

vue-bot · 2026-03-24T07:29:25Z

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
primevue	✅ success	✅ success
language-tools	❌ failure	❌ failure
vite-plugin-vue	✅ success	✅ success
pinia	✅ success	✅ success
router	✅ success	✅ success
vue-i18n	✅ success	✅ success
vitepress	✅ success	✅ success
vant	✅ success	✅ success
test-utils	✅ success	✅ success
quasar	✅ success	✅ success
nuxt	✅ success	✅ success
vueuse	✅ success	✅ success
vuetify	✅ success	✅ success
vue-macros	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success
radix-vue	✅ success	✅ success

fix(compiler-sfc): support template literal as defineModel name

8e084fa

edison1105 added ready to merge The PR is ready to be merged. scope: sfc 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Mar 24, 2026

edison1105 merged commit bd7eef0 into vuejs:main Mar 25, 2026
14 checks passed

babu-ch deleted the fix/define-model-template-literal branch March 25, 2026 06:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(compiler-sfc): support template literal as defineModel name#14622

fix(compiler-sfc): support template literal as defineModel name#14622
edison1105 merged 1 commit intovuejs:mainfrom
babu-ch:fix/define-model-template-literal

babu-ch commented Mar 23, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Mar 23, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

github-actions Bot commented Mar 23, 2026

Uh oh!

pkg-pr-new Bot commented Mar 23, 2026

Uh oh!

edison1105 commented Mar 24, 2026

Uh oh!

vue-bot commented Mar 24, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

babu-ch commented Mar 23, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

github-actions Bot commented Mar 23, 2026

Size Report

Bundles

Usages

Uh oh!

pkg-pr-new Bot commented Mar 23, 2026

Uh oh!

edison1105 commented Mar 24, 2026

Uh oh!

vue-bot commented Mar 24, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

babu-ch commented Mar 23, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Mar 23, 2026 •

edited

Loading