Skip to content

fix: nuxt ssr mismatch class errors#651

Merged
christian-bromann merged 2 commits intostenciljs:mainfrom
patrickalima98:main
Jun 13, 2025
Merged

fix: nuxt ssr mismatch class errors#651
christian-bromann merged 2 commits intostenciljs:mainfrom
patrickalima98:main

Conversation

@patrickalima98
Copy link
Copy Markdown
Contributor

@patrickalima98 patrickalima98 commented Jun 11, 2025 •
edited
Loading

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Build (npm run build) was run locally for affected output targets
  • Tests (npm test) were run locally and passed
  • Prettier (npm run prettier) was run locally and passed

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

Issue URL: #650

What is the new behavior?

  • Use HTML element from currentInstance?.vnode.el before Vue hydrate and remove SSR classes
  • refactor getElementClasses in vue runtime to keep SSR and vue component classes added by developers.

Does this introduce a breaking change?

  • Yes
  • No

Other information

@patrickalima98 patrickalima98 requested a review from a team as a code owner June 11, 2025 18:17
@patrickalima98 patrickalima98 mentioned this pull request Jun 11, 2025
Closed
3 tasks
@patrickalima98 patrickalima98 changed the title feat: fix nuxt ssr mismatch class errors fix: nuxt ssr mismatch class errors Jun 11, 2025
christian-bromann
christian-bromann approved these changes Jun 13, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@christian-bromann christian-bromann left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@christian-bromann christian-bromann merged commit be797b1 into stenciljs:main Jun 13, 2025
3 of 15 checks passed
@HenningWaack HenningWaack mentioned this pull request Jul 7, 2025
Closed
3 tasks
github-actions bot pushed a commit that referenced this pull request Jan 3, 2026
@semantic-release-bot
chore(release): @stencil/ssr@0.2.0 [skip ci]
d147a84 
## [0.2.0](https://github.com/stenciljs/output-targets/compare/@stencil/ssr@0.1.0...@stencil/ssr@0.2.0) (2026-01-03)

### 🚀 Enhancement

* **react:** enhance React output target with unified server/client imports and improved SSR property serialization ([132f9d9](132f9d9))
* Upgraded component-library-angular to Angular 20 and added a new Angular app to example-project ([#652](#652)) ([a6fefb6](a6fefb6)), closes [#643](#643)
* **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb))

### 🐛 Bug Fix

* **#646:** react create components.ts file ([#647](#647)) ([7524cbf](7524cbf)), closes [#646](#646) [#646](#646)
* **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643)
* **angular:** prettify code ([69e1cba](69e1cba))
* **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2))
* **ci:** run in macos environment ([0631306](0631306))
* **dependabot:** don't run updates based on projects ([3d43687](3d43687))
* **dependabot:** group updates of minor and patch versions in a single PR ([47bdb20](47bdb20))
* **dependabot:** optimize configuration ([ce29757](ce29757))
* **internal:** update changelog ([4bb6cfc](4bb6cfc))
* nuxt ssr mismatch class errors ([#651](#651)) ([be797b1](be797b1))
* **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531)
* **react:** better style to css transformation ([ccc76a7](ccc76a7))
* **react:** fixed wording in component wrapper ([a83bb4b](a83bb4b))
* **react:** forward ref to underlying web component ([#655](#655)) ([9f20ee0](9f20ee0))
* **react:** improved SSR for Next.js ([#683](#683)) ([c49a3b5](c49a3b5))
* **react:** make types compatible with v18 and v19 ([f887ae7](f887ae7))
* **react:** properly type generated component files ([3e7cc0c](3e7cc0c))
* **react:** revive esModules option ([d98df24](d98df24))
* revert model update event renaming ([#649](#649)) ([5c67692](5c67692))
* **ssr:** improved SSR handling in Next.js ([#641](#641)) ([22e075f](22e075f))
* **vue:** remove unnecessary vue patch ([34f7ce2](34f7ce2))

### 📝 Documentation

* **internal:** link release workflow ([0e69d0e](0e69d0e))
* **internal:** update contributing guidelines ([08c96fd](08c96fd))
github-actions bot pushed a commit that referenced this pull request Jan 3, 2026
@semantic-release-bot
chore(release): @stencil/ssr@0.2.0 [skip ci]
5a4e4e4 
## [0.2.0](https://github.com/stenciljs/output-targets/compare/@stencil/ssr@0.1.0...@stencil/ssr@0.2.0) (2026-01-03)

### 🚀 Enhancement

* **react:** enhance React output target with unified server/client imports and improved SSR property serialization ([132f9d9](132f9d9))
* Upgraded component-library-angular to Angular 20 and added a new Angular app to example-project ([#652](#652)) ([a6fefb6](a6fefb6)), closes [#643](#643)
* **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb))

### 🐛 Bug Fix

* **#646:** react create components.ts file ([#647](#647)) ([7524cbf](7524cbf)), closes [#646](#646) [#646](#646)
* **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643)
* **angular:** prettify code ([69e1cba](69e1cba))
* **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2))
* **ci:** run in macos environment ([0631306](0631306))
* **dependabot:** don't run updates based on projects ([3d43687](3d43687))
* **dependabot:** group updates of minor and patch versions in a single PR ([47bdb20](47bdb20))
* **dependabot:** optimize configuration ([ce29757](ce29757))
* **internal:** update changelog ([4bb6cfc](4bb6cfc))
* nuxt ssr mismatch class errors ([#651](#651)) ([be797b1](be797b1))
* **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531)
* **react:** better style to css transformation ([ccc76a7](ccc76a7))
* **react:** fixed wording in component wrapper ([a83bb4b](a83bb4b))
* **react:** forward ref to underlying web component ([#655](#655)) ([9f20ee0](9f20ee0))
* **react:** improved SSR for Next.js ([#683](#683)) ([c49a3b5](c49a3b5))
* **react:** make types compatible with v18 and v19 ([f887ae7](f887ae7))
* **react:** properly type generated component files ([3e7cc0c](3e7cc0c))
* **react:** revive esModules option ([d98df24](d98df24))
* revert model update event renaming ([#649](#649)) ([5c67692](5c67692))
* **ssr:** improved SSR handling in Next.js ([#641](#641)) ([22e075f](22e075f))
* **vue:** remove unnecessary vue patch ([34f7ce2](34f7ce2))

### 📝 Documentation

* **internal:** link release workflow ([0e69d0e](0e69d0e))
* **internal:** update contributing guidelines ([08c96fd](08c96fd))
johnjenkins pushed a commit that referenced this pull request Jan 3, 2026
@semantic-release-bot
chore(release): @stencil/ssr@0.2.0 [skip ci]
5688b7b 
## [0.2.0](https://github.com/stenciljs/output-targets/compare/@stencil/ssr@0.1.0...@stencil/ssr@0.2.0) (2026-01-03)

### 🚀 Enhancement

* **react:** enhance React output target with unified server/client imports and improved SSR property serialization ([132f9d9](132f9d9))
* Upgraded component-library-angular to Angular 20 and added a new Angular app to example-project ([#652](#652)) ([a6fefb6](a6fefb6)), closes [#643](#643)
* **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb))

### 🐛 Bug Fix

* **#646:** react create components.ts file ([#647](#647)) ([7524cbf](7524cbf)), closes [#646](#646) [#646](#646)
* **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643)
* **angular:** prettify code ([69e1cba](69e1cba))
* **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2))
* **ci:** run in macos environment ([0631306](0631306))
* **dependabot:** don't run updates based on projects ([3d43687](3d43687))
* **dependabot:** group updates of minor and patch versions in a single PR ([47bdb20](47bdb20))
* **dependabot:** optimize configuration ([ce29757](ce29757))
* **internal:** update changelog ([4bb6cfc](4bb6cfc))
* nuxt ssr mismatch class errors ([#651](#651)) ([be797b1](be797b1))
* **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531)
* **react:** better style to css transformation ([ccc76a7](ccc76a7))
* **react:** fixed wording in component wrapper ([a83bb4b](a83bb4b))
* **react:** forward ref to underlying web component ([#655](#655)) ([9f20ee0](9f20ee0))
* **react:** improved SSR for Next.js ([#683](#683)) ([c49a3b5](c49a3b5))
* **react:** make types compatible with v18 and v19 ([f887ae7](f887ae7))
* **react:** properly type generated component files ([3e7cc0c](3e7cc0c))
* **react:** revive esModules option ([d98df24](d98df24))
* revert model update event renaming ([#649](#649)) ([5c67692](5c67692))
* **ssr:** improved SSR handling in Next.js ([#641](#641)) ([22e075f](22e075f))
* **vue:** remove unnecessary vue patch ([34f7ce2](34f7ce2))

### 📝 Documentation

* **internal:** link release workflow ([0e69d0e](0e69d0e))
* **internal:** update contributing guidelines ([08c96fd](08c96fd))
johnjenkins added a commit that referenced this pull request Jan 3, 2026
@github-actions @semantic-release-bot @johnjenkins
chore(release): automated release preparation (#719)
eb30334 
* chore(release): @stencil/vue-output-target@0.11.0 [skip ci]

## [0.11.0](https://github.com/stenciljs/output-targets/compare/@stencil/vue-output-target@0.10.8...@stencil/vue-output-target@0.11.0) (2026-01-03)

### 🚀 Enhancement

* **react:** enhance React output target with unified server/client imports and improved SSR property serialization ([132f9d9](132f9d9))
* **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb))

### 🐛 Bug Fix

* **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643)
* **angular:** prettify code ([69e1cba](69e1cba))
* **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2))
* **dependabot:** don't run updates based on projects ([3d43687](3d43687))
* **dependabot:** group updates of minor and patch versions in a single PR ([47bdb20](47bdb20))
* **dependabot:** optimize configuration ([ce29757](ce29757))
* **internal:** update changelog ([4bb6cfc](4bb6cfc))
* **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531)
* **react:** better style to css transformation ([ccc76a7](ccc76a7))
* **react:** forward ref to underlying web component ([#655](#655)) ([9f20ee0](9f20ee0))
* **react:** improved SSR for Next.js ([#683](#683)) ([c49a3b5](c49a3b5))
* **react:** properly type generated component files ([3e7cc0c](3e7cc0c))
* **vue:** remove unnecessary vue patch ([34f7ce2](34f7ce2))

### 📝 Documentation

* **internal:** link release workflow ([0e69d0e](0e69d0e))
* **internal:** update contributing guidelines ([08c96fd](08c96fd))

* chore(release): @stencil/react-output-target@1.2.1 [skip ci]

## [1.2.1](https://github.com/stenciljs/output-targets/compare/@stencil/react-output-target@1.2.0...@stencil/react-output-target@1.2.1) (2026-01-03)

### 🚀 Enhancement

* **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb))

### 🐛 Bug Fix

* **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643)
* **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2))
* **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531)

### 📝 Documentation

* **internal:** link release workflow ([0e69d0e](0e69d0e))
* **internal:** update contributing guidelines ([08c96fd](08c96fd))

* chore(release): @stencil/ssr@0.2.0 [skip ci]

## [0.2.0](https://github.com/stenciljs/output-targets/compare/@stencil/ssr@0.1.0...@stencil/ssr@0.2.0) (2026-01-03)

### 🚀 Enhancement

* **react:** enhance React output target with unified server/client imports and improved SSR property serialization ([132f9d9](132f9d9))
* Upgraded component-library-angular to Angular 20 and added a new Angular app to example-project ([#652](#652)) ([a6fefb6](a6fefb6)), closes [#643](#643)
* **vue:** implement custom event property as source for v-model ([#689](#689)) ([bc385bb](bc385bb))

### 🐛 Bug Fix

* **#646:** react create components.ts file ([#647](#647)) ([7524cbf](7524cbf)), closes [#646](#646) [#646](#646)
* **angular:** include outputs in angular component definition ([#688](#688)) ([16f1fd1](16f1fd1)), closes [#643](#643) [#643](#643)
* **angular:** prettify code ([69e1cba](69e1cba))
* **angular:** use forwardRef in control value accessor directives. ([#697](#697)) ([dcb4bd2](dcb4bd2))
* **ci:** run in macos environment ([0631306](0631306))
* **dependabot:** don't run updates based on projects ([3d43687](3d43687))
* **dependabot:** group updates of minor and patch versions in a single PR ([47bdb20](47bdb20))
* **dependabot:** optimize configuration ([ce29757](ce29757))
* **internal:** update changelog ([4bb6cfc](4bb6cfc))
* nuxt ssr mismatch class errors ([#651](#651)) ([be797b1](be797b1))
* **react:** always use per-component CustomEvent types for event props ([#716](#716)) ([8ebba85](8ebba85)), closes [#531](#531)
* **react:** better style to css transformation ([ccc76a7](ccc76a7))
* **react:** fixed wording in component wrapper ([a83bb4b](a83bb4b))
* **react:** forward ref to underlying web component ([#655](#655)) ([9f20ee0](9f20ee0))
* **react:** improved SSR for Next.js ([#683](#683)) ([c49a3b5](c49a3b5))
* **react:** make types compatible with v18 and v19 ([f887ae7](f887ae7))
* **react:** properly type generated component files ([3e7cc0c](3e7cc0c))
* **react:** revive esModules option ([d98df24](d98df24))
* revert model update event renaming ([#649](#649)) ([5c67692](5c67692))
* **ssr:** improved SSR handling in Next.js ([#641](#641)) ([22e075f](22e075f))
* **vue:** remove unnecessary vue patch ([34f7ce2](34f7ce2))

### 📝 Documentation

* **internal:** link release workflow ([0e69d0e](0e69d0e))
* **internal:** update contributing guidelines ([08c96fd](08c96fd))

* chore:

* Update CHANGELOG.md

---------

Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net>
Co-authored-by: John Jenkins <johnljenkins@Hotmail.com>
Co-authored-by: John Jenkins <john.jenkins@nanoporetech.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@christian-bromann christian-bromann christian-bromann approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@patrickalima98 @christian-bromann @patrickalimannp