refactor(nuxt): use attrs from `useAttrs` instead of `vnode` for `<NuxtTime />` #33486

OrbisK · 2025-10-15T16:38:21Z

🔗 Linked issue

📚 Description

I just stumbled upon this. I am opening it to try and understand the reason for using the vnode approach over the useAttrs.

bolt-new-by-stackblitz · 2025-10-15T16:38:25Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-10-15T16:38:32Z

Walkthrough

The nuxt-time.vue component was refactored to use Vue's useAttrs() (import added) to read attributes. Locale is now read from attrs['data-locale'] and datetime is sourced from props.datetime for date computation; vnode.el-based extraction of a renderedDate and related hydration logic were removed. The date() helper returns new Date(props.datetime) when datetime is provided, otherwise the current date. No public API or exported declarations were changed.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The pull request title "refactor(nuxt): use attrs from `useAttrs` instead of `vnode` for `<NuxtTime />`" accurately summarises the main change in the changeset. The raw summary confirms that the changes specifically involve replacing vnode-based attribute access with the `useAttrs` composable function in the NuxtTime component. The title is concise, specific, and uses clear language that directly conveys what was refactored and why, making it easy for teammates to understand the primary change when scanning the project history.
Description Check	✅ Passed	The pull request description is related to the changeset by addressing the refactor of attribute access in the NuxtTime component. The description links to the related issue #32859 and clearly communicates the intent to understand why the vnode approach was previously used and to replace it with useAttrs, which aligns directly with the changes made. While the description could be more detailed regarding the technical specifics, it satisfies the lenient requirement of being related in some way to the changeset and conveys meaningful information about the motivation for the refactor.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 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 2afdb01 and 5275204.

📒 Files selected for processing (1)

packages/nuxt/src/app/components/nuxt-time.vue (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.vue

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use <script setup lang="ts"> and the composition API when creating Vue components

Files:

packages/nuxt/src/app/components/nuxt-time.vue

🧠 Learnings (1)

📚 Learning: 2025-07-18T16:46:07.446Z

Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T16:46:07.446Z
Learning: Applies to **/*.vue : Use `<script setup lang="ts">` and the composition API when creating Vue components

Applied to files:

packages/nuxt/src/app/components/nuxt-time.vue

⏰ 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). (2)

GitHub Check: build
GitHub Check: code

🔇 Additional comments (3)

packages/nuxt/src/app/components/nuxt-time.vue (3)

2-2: Import added correctly.

The useAttrs import follows the coding guidelines for using the composition API.

43-46: Simplified date computation looks good.

Using props.datetime directly is clearer than the previous hydration optimization approach. This trades a minor hydration optimization for improved code maintainability.

105-146: Hydration optimization implemented correctly.

The onPrehydrate callback properly reads attributes directly from the DOM element using el.getAttribute(), which is the correct approach for accessing server-rendered attributes during hydration. This optimization ensures the component displays the correct formatted date immediately during hydration.

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.}

danielroe · 2025-10-15T16:39:26Z

this does indeed look better

pkg-pr-new · 2025-10-15T16:42:06Z

Open in StackBlitz

@nuxt/kit

npm i https://pkg.pr.new/@nuxt/kit@33486

nuxt

npm i https://pkg.pr.new/nuxt@33486

@nuxt/rspack-builder

npm i https://pkg.pr.new/@nuxt/rspack-builder@33486

@nuxt/schema

npm i https://pkg.pr.new/@nuxt/schema@33486

@nuxt/vite-builder

npm i https://pkg.pr.new/@nuxt/vite-builder@33486

@nuxt/webpack-builder

npm i https://pkg.pr.new/@nuxt/webpack-builder@33486

commit: 5275204

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/nuxt/src/app/components/nuxt-time.vue (1)
2-2: Remove unused import.

getCurrentInstance is imported but no longer used after replacing vnode access with useAttrs.
-import { computed, getCurrentInstance, onBeforeUnmount, ref, useAttrs } from 'vue'
+import { computed, onBeforeUnmount, ref, useAttrs } from 'vue'

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4ddf291 and 1a26bc1.

📒 Files selected for processing (1)

packages/nuxt/src/app/components/nuxt-time.vue (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.vue

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use <script setup lang="ts"> and the composition API when creating Vue components

Files:

packages/nuxt/src/app/components/nuxt-time.vue

🧠 Learnings (1)

📚 Learning: 2025-07-18T16:46:07.446Z

Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-18T16:46:07.446Z
Learning: Applies to **/*.vue : Use `<script setup lang="ts">` and the composition API when creating Vue components

Applied to files:

packages/nuxt/src/app/components/nuxt-time.vue

⏰ 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). (2)

GitHub Check: build
GitHub Check: code

packages/nuxt/src/app/components/nuxt-time.vue

codspeed-hq · 2025-10-15T16:53:59Z

CodSpeed Performance Report

Merging #33486 will not alter performance

_{Comparing OrbisK:fix/use-attrs-instead-vnode (5275204) with main (7bcc4ca)}

Summary

✅ 10 untouched

packages/nuxt/src/app/components/nuxt-time.vue

This reverts commit 2afdb01.

OrbisK · 2025-10-16T09:21:13Z

I wonder why tests are always passing locally 🤔

KazariEX · 2025-10-16T12:03:47Z

packages/nuxt/src/app/components/nuxt-time.vue


 const date = computed(() => {
-  const date = props.datetime
-  if (renderedDate && nuxtApp.isHydrating) { return new Date(renderedDate) }


I think this is to avoid hydration mismatch, so we have to somehow get the value of datetime on the current element during hydration.

Yes. But this is only the case because we use the vnode.el attributes. As datetime is a prop, it should be the same as the attribute, but it is not because vnode.el.getAttribute("datetime") is actually a bit different.

I assumed that vnode.el.getAttribute('datetime') is the same as the prop, so in this case props.datetime would be equal to renderedDate and this check would not be necessary. But apparently it is not. 😅

vnode.el attributes are actually the attributes from the SSR response of the actual <time /> element.

OrbisK · 2025-10-16T12:04:04Z

I dont think useAttrs can replace vm attrs for now.

useAttrs does not include props + somehow the vm attrs are somehow different than useAttrs

There is also no benefit for #32859 because onPrehydrate still relies on getCurrentInstance

OrbisK · 2025-11-03T21:09:35Z

@danielroe I think we should just use data-allow-mismatch for nuxt time.

FWIW: correcting the mismatches manually should result in the same performance penalty as vues own correction (I think).

danielroe · 2025-11-05T10:53:21Z

happy to explore anything here! whatever we choose, we need to pass data from server -> client in the initial HTML, so it's not just about avoiding a mismatch

OrbisK · 2025-11-05T12:16:06Z

we need to pass data from server -> client in the initial HTML,

Is this the case? Would it work if we somehow skip the client-side correction of the mismatch?

refactor: use attrs from useAttrs instead of vnode

1a26bc1

OrbisK requested a review from danielroe as a code owner October 15, 2025 16:38

github-actions bot added 4.x refactor labels Oct 15, 2025

coderabbitai bot reviewed Oct 15, 2025

View reviewed changes

packages/nuxt/src/app/components/nuxt-time.vue Show resolved Hide resolved

danielroe reviewed Oct 15, 2025

View reviewed changes

packages/nuxt/src/app/components/nuxt-time.vue Outdated Show resolved Hide resolved

danielroe and others added 4 commits October 15, 2025 20:09

Update nuxt-time.vue

5fc6978

chore: use datetime prop instead of attr

2afdb01

revert: chore: use datetime prop instead of attr

6e1185c

This reverts commit 2afdb01.

refactor: simplify date handling by using props.datetime directly

5275204

OrbisK marked this pull request as draft October 16, 2025 10:52

KazariEX reviewed Oct 16, 2025

View reviewed changes

Uh oh!

refactor(nuxt): use attrs from useAttrs instead of vnode for <NuxtTime /> #33486

Are you sure you want to change the base?

refactor(nuxt): use attrs from useAttrs instead of vnode for <NuxtTime /> #33486

Conversation

OrbisK commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

📚 Description

Uh oh!

bolt-new-by-stackblitz bot commented Oct 15, 2025

Uh oh!

coderabbitai bot commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Pre-merge checks and finishing touches

Uh oh!

danielroe commented Oct 15, 2025

Uh oh!

pkg-pr-new bot commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codspeed-hq bot commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Performance Report

Merging #33486 will not alter performance

Summary

Uh oh!

Uh oh!

OrbisK commented Oct 16, 2025

Uh oh!

KazariEX Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

OrbisK Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

OrbisK Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

OrbisK commented Oct 16, 2025

Uh oh!

OrbisK commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

danielroe commented Nov 5, 2025

Uh oh!

OrbisK commented Nov 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

refactor(nuxt): use attrs from `useAttrs` instead of `vnode` for `<NuxtTime />` #33486

refactor(nuxt): use attrs from `useAttrs` instead of `vnode` for `<NuxtTime />` #33486

OrbisK commented Oct 15, 2025 •

edited

Loading

coderabbitai bot commented Oct 15, 2025 •

edited

Loading

pkg-pr-new bot commented Oct 15, 2025 •

edited

Loading

codspeed-hq bot commented Oct 15, 2025 •

edited

Loading

OrbisK commented Nov 3, 2025 •

edited

Loading