docs: Contribution section - add component localization guide

[ta-inventions]

🔗 Linked issue

N/A (documentation improvement)

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR adds documentation explaining how to add localization support to a custom Nuxt UI component using the built-in locale infrastructure.

The guide covers:

• Extending the Messages type in runtime/types/locale.ts to define typed, optional message keys for the component
• Adding translations in runtime/locale/* (including the required English entries)
• Using useLocale() and t() in the component to render localized strings

No code changes.

Nuxt UI documents how to create new components, but currently lacks guidance for wiring those components into the locale infrastructure. As a result, contributors typically have to reverse-engineer the existing implementation in the codebase to add translations correctly.

This documentation reduces contributor friction, prevents inconsistent patterns, and makes localization support discoverable.

This added section to the docs allow people to quickly understand and implement a localization support for their component instead of spending time to figure it out themselves, they can use their time to: develop new features, going to the beach 🏖️, dancing in the sun💃🕺☀️, making love♥️ etc... more productive activities

📝 Checklist

• [] I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@5915

commit: ce8fbb8

[coderabbitai]

📝 Walkthrough

Walkthrough

This change adds a new "Add localization support for your component" section to the contribution documentation. The addition includes guidance on implementing localization for components, covering Message typing, locale file locations, a MyButton.vue example, steps for defining messages, optional constraints, translation file structure with sample translations, component usage patterns, and locale creation instructions. The content totals 84 lines and appears in two locations within the document.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding a component localization guide to the contribution documentation section.
Description check	✅ Passed	The description is directly related to the changeset, explaining the purpose, content, and motivation for adding localization documentation to guide contributors.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@docs/content/docs/1.getting-started/4.contribution.md`:
- Around line 138-147: Tighten the copy in the locale guidance by fixing small
grammar and punctuation issues: change "For Example" to "For example," ensure
"i.e:" becomes "i.e.,", normalize "Translations files" to "translation files",
and standardize spacing around colons and inline code examples (e.g., keep
`MyButton.vue` -> `myButton:` and `myButton?: {`, `buttonText?: string`,
`ariaLabel?: string`). Apply these edits in the component key explanation block
(the sentence starting with "The component key in `locale.ts`") and repeat the
same fixes for the corresponding text referenced on lines 149-151.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Tighten grammar and punctuation in the new guidance.
These lines have small grammar/punctuation nits (“For Example”, “i.e:”, “Translations files”). Consider the edits below for clarity.

✏️ Proposed copy edits

-For Example, `MyButton.vue` -> `myButton:`
+For example, `MyButton.vue` → `myButton:`

-All entries must be optional by using the `?` TypeScript annotation - i.e: `myButton?: {`, `buttonText?: string`, `ariaLabel?: string` Otherwise, you'll be required to provide translations for every supported locale.
+All entries must be optional by using the `?` TypeScript annotation — i.e., `myButton?: {`, `buttonText?: string`, `ariaLabel?: string`. Otherwise, you'll be required to provide translations for every supported locale.

-Translations files are located in `runtime/locale` - Add the locales you want to support for your component:
+Translation files are located in `runtime/locale` — add the locales you want to support for your component:

Also applies to: 149-151

🤖 Prompt for AI Agents

In `@docs/content/docs/1.getting-started/4.contribution.md` around lines 138 -
147, Tighten the copy in the locale guidance by fixing small grammar and
punctuation issues: change "For Example" to "For example," ensure "i.e:" becomes
"i.e.,", normalize "Translations files" to "translation files", and standardize
spacing around colons and inline code examples (e.g., keep `MyButton.vue` ->
`myButton:` and `myButton?: {`, `buttonText?: string`, `ariaLabel?: string`).
Apply these edits in the component key explanation block (the sentence starting
with "The component key in `locale.ts`") and repeat the same fixes for the
corresponding text referenced on lines 149-151.