Feature: Add Multi-language (i18n) Support for UI Components

[khuepm]

Extension

SEO Plugin

Describe the Improvement

Description

Currently, the seo-plugin extension already has a src/lang/translations directory with some specific translation contents. However, these translations do not cover the UI elements (labels, buttons, tags, tabs, tooltips, etc.). The UI strings in the seo-interface and seo-display components are still hardcoded in English.

To make the SEO plugin fully accessible to a broader audience, we need to implement comprehensive multi-language (i18n) support across the entire extension's UI.

This includes translating:

1. Interface options and properties in index.ts files.
2. UI components, labels, buttons, tags, tabs, and tooltips in .vue files.

Expected Behavior

• Users should see the SEO extension's UI in their preferred language (based on their Directus user settings).
• All hardcoded English text in the UI should be extracted into translation keys.
• Existing language files (like en-US.yaml and vi-VN.yaml) should be updated to include all the missing UI translation keys.

Technical Implementation Steps

• Translation Files: Update the existing translation dictionaries in src/lang/translations/ (e.g., en-US.yaml, vi-VN.yaml) to include new keys for all missing UI elements (buttons, labels, tags, etc.).
• Extension Configs: Refactor hardcoded name and note fields in src/seo-interface/index.ts and src/seo-display/index.ts to use Directus translation keys (e.g., name: '$t:seo_plugin.feature_name').
• Vue Components: Inject useI18n() from vue-i18n into all .vue files (interface.vue, display.vue, etc.) and replace hardcoded text template strings with $t('seo_plugin.key_name').
• Testing: Verify that switching the user language in the Directus app correctly updates the SEO plugin UI without requiring a hard refresh.

Additional Context

• Directus Extension i18n Guide: Directus Docs - Extensions i18n

[khuepm]

Hi everyone,

I’ve fully implemented Multi-language (i18n) support for the SEO Plugin UI components in my linked PR.

Key Changes & Architectural Decisions:

1. Removed the original en-US.yaml file from src/lang/translations:
   During development, I found that the Directus build process for bundle-type extensions natively ignores standard translations/ folders unless they are directly inside an application/interface module module. To bypass this compilation limitation and ensure translations are bundled into app.js and api.js, I migrated the translation source.

2. New Language Injection Approach (src/lang/index.ts):
   Instead of relying on auto-bundled YAMLs, I've created a central TypeScript dictionary (src/lang/index.ts). This file maps out the full en-US and vi-VN translations as strongly-typed objects.
   Inside our main Vue components (interface.vue and display.vue), the plugin now manually injects these string translations directly into the Directus vue-i18n instance during setup using mergeLocaleMessage(lang.language, lang.translation). This completely negates the Directus bundle limitation and guarantees the translations are shipped inside the compiled JavaScript.

3. Replaced Hardcoded UI Strings:
   All static English strings across tabs, error labels, hints, and tooltips have been replaced with the dynamic $t('seo_plugin.[key]') method. Even dynamic dropdown variables in fields.ts (Change Frequencies, Priorities) are now rendered as localized strings.

4. Added Vietnamese (vi-VN) Support:
   Alongside the base en-US support, I've added a complete Vietnamese translation layer via the new TS structure to demonstrate and support multi-language environments automatically.

Feel free to review the PR, and let me know your thoughts on this injection approach!

PR: #301