Skip to content

fix(runtime-dom): Vapor useCssModule support#13711

Merged
edison1105 merged 2 commits intovuejs:minorfrom
alex-snezhko:vapor-use-css-modules
Nov 10, 2025
Merged

fix(runtime-dom): Vapor useCssModule support#13711
edison1105 merged 2 commits intovuejs:minorfrom
alex-snezhko:vapor-use-css-modules

Conversation

@alex-snezhko
Copy link
Copy Markdown
Contributor

@alex-snezhko alex-snezhko commented Jul 26, 2025 •
edited
Loading

Allow useCssModule to be used in vapor mode.

Example:

<script setup vapor>
import { useCssModule } from 'vue'

const classes = useCssModule()
</script>

<template>
  <p :class="classes.red">This text is red</p>
</template>

<style module>
.red {
  color: red;
}
</style>

Rendered output:
Screenshot From 2025-07-26 16-00-36

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Jul 26, 2025 •
edited
Loading

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

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
  • Post copyable unit tests in a comment

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

github-actions bot commented Jul 26, 2025 •
edited
Loading

Size Report

Bundles

File Size Gzip Brotli
compiler-dom.global.prod.js 84.9 kB 29.8 kB 26.3 kB
runtime-dom.global.prod.js 108 kB (+7 B) 40.4 kB (+6 B) 36.3 kB (-2 B)
vue.global.prod.js 166 kB (+7 B) 60.4 kB (+4 B) 53.7 kB (-30 B)

Usages

Name Size Gzip Brotli
createApp (CAPI only) 47.9 kB 18.7 kB 17.1 kB
createApp 57 kB 21.9 kB 20 kB
createApp + vaporInteropPlugin 90.9 kB 33.9 kB 30.6 kB
createVaporApp 34.6 kB 13.2 kB 12.1 kB
createSSRApp 61.3 kB 23.7 kB 21.6 kB
defineCustomElement 63.1 kB 23.8 kB 21.7 kB
overall 72.1 kB 27.3 kB 24.9 kB

@alex-snezhko alex-snezhko changed the title fix(runtime-dom): Vapor useCssModules support fix(runtime-dom): Vapor useCssModule support Jul 26, 2025
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Jul 26, 2025 •
edited
Loading

Open in StackBlitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-sfc

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

@vue/compiler-ssr

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

@vue/compiler-vapor

npm i https://pkg.pr.new/@vue/compiler-vapor@13711

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/runtime-vapor

npm i https://pkg.pr.new/@vue/runtime-vapor@13711

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: fbbd4f8

@edison1105 edison1105 added scope: vapor related to vapor mode version: minor labels Jul 27, 2025
@edison1105 edison1105 moved this to Vapor in Next Minor Jul 27, 2025
@edison1105 edison1105 moved this from Vapor to In Progress in Next Minor Aug 20, 2025
@edison1105
Copy link
Copy Markdown
Member

edison1105 commented Aug 20, 2025

Thank you for this PR. We had an internal discussion and felt that exporting getCurrentGenericInstance is not a good practice. Even though it's marked as @internal, users might still use it. We are considering adding a new API to replace getCurrentInstance, which would only retain the public options on the instance. This is still under discussion, so this PR cannot be merged for now.

@alex-snezhko
Copy link
Copy Markdown
Contributor Author

alex-snezhko commented Aug 21, 2025

@edison1105 that's fair, I was also a bit unsure about adding that export at first but I see that in the minor branch there are currently other @internal exports from the same index.ts file for other things that I think you could make the same argument for not exposing to the user. In fact there are even some @internal exports there from the same file that the getCurrentGenericInstance I export is defined in:

core/packages/runtime-core/src/index.ts

Lines 544 to 548 in 6a801de

export {
currentInstance,
setCurrentInstance,
simpleSetCurrentInstance,
} from './componentCurrentInstance'

I was more or less following that same pattern with the getCurrentGenericInstance export assuming it was ok, do you think these existing exports should be removed/refactored as well?

@edison1105
Copy link
Copy Markdown
Member

edison1105 commented Aug 21, 2025

@alex-snezhko
Indeed, it seems difficult to prevent users from using currentInstance. I will bring this point up during the next internal team discussion.

@edison1105 edison1105 moved this from In Progress to Vapor in Next Minor Sep 23, 2025
@edison1105
Copy link
Copy Markdown
Member

edison1105 commented Nov 10, 2025

@alex-snezhko
We added a new internal API useInstanceOption to avoid exporting getCurrentGenericInstance
I've updated this PR.

@edison1105 edison1105 merged commit abe8fc2 into vuejs:minor Nov 10, 2025
15 checks passed
@github-project-automation github-project-automation bot moved this from Vapor to Done in Next Minor Nov 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

scope: vapor related to vapor mode version: minor

Projects

Next Minor
Status: Done

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@alex-snezhko @edison1105