--- url: https://s00d.github.io/nuxt-i18n-micro/components/i18n-link.md description: Locale-aware NuxtLink wrapper for localized routes. --- # 🌍 `` Component The `` component in `Nuxt I18n Micro` is a versatile link component that automatically localizes routes based on the current locale. It acts as a wrapper around the `` component, providing additional features such as active link styling and support for external links. ## ⚙️ Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `to` **\*** | `RouteLocationNamedRaw \| RouteLocationResolvedGeneric \| string` | — | Target route. Localized automatically; an external URL is passed through unchanged. | | `activeStyle` | `Partial` | — | Inline style applied while the link points at the current route. | **\*** required. ### Slots | Slot | Bindings | Description | | --- | --- | --- | | `default` | — | Link content. | `to` accepts anything `NuxtLink` does — a path, a named route, or a resolved route object. An absolute URL is detected and rendered as a plain `` rather than being localized. ## 🛠️ Example Usages ### Basic Usage ```vue About Us ``` This example creates a link to the `/about` page, localized to the current locale. ### Active Link Styling with Inline Styles ```vue About Us ``` The link will have bold text when the user is on the `/about` page, allowing you to style the active link directly with inline styles. ### External Links Handling The component automatically detects external links and adds the necessary attributes for security. ```vue Visit Example ``` This link will open `https://example.com` in a new tab with `rel="noopener noreferrer"` applied. ## 🎨 Styles The component now uses inline styles for the active state instead of a class. You can customize these styles using the `activeStyle` prop. ### Default Active Styles * **Font Weight**: `bold` * **Color**: Inherits the browser's default color (if no `color` is specified in `activeStyle`). You can override these by providing custom styles through the `activeStyle` prop. ### Custom Active Styles ```vue About Us ``` In this example, the link will be bold and green when active. ## 🚀 Additional Features ### Slot for Custom Content You can pass custom content inside the link using slots, making the component flexible for different use cases. ```vue About Us ``` ### Accessibility Enhancements The component supports `aria-label` and other accessibility attributes to ensure a more accessible experience. ```vue About Us ```