diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 1b66ca6c..abc35e43 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -20,9 +20,9 @@
     </p>
 
     <div>
-      <NuxtLink :to="$localeRoute({ name: 'page' })">
+      <i18n-link :to="{ name: 'page' }">
         Go to Page
-      </NuxtLink>
+      </i18n-link>
     </div>
 
     <a href="/">test</a>
diff --git a/src/runtime/components/i18n-link.vue b/src/runtime/components/i18n-link.vue
new file mode 100644
index 00000000..287c0539
--- /dev/null
+++ b/src/runtime/components/i18n-link.vue
@@ -0,0 +1,37 @@
+<template>
+  <NuxtLink :to="$localeRoute(to)" :class="{ active: isActive }">
+    <slot>Go to Page</slot>
+  </NuxtLink>
+</template>
+
+<script lang="ts" setup>
+import { useNuxtApp, computed, useRoute, useRouter } from '#imports'
+import type { NuxtLinkProps } from '#app/components/nuxt-link'
+
+const { $localeRoute } = useNuxtApp()
+
+interface Props {
+  to: NuxtLinkProps
+  activeClass?: string
+}
+
+const props = defineProps<Props>()
+const route = useRoute()
+
+const isActive = computed(() => {
+  // If `to` is a string, compare it directly to the route path
+  const newPath = $localeRoute(props.to)
+  if (typeof newPath === 'string') {
+    return route.path === useRouter().resolve(newPath).path
+  }
+
+  return route.path === newPath.path
+})
+</script>
+
+<style scoped>
+.active {
+  font-weight: bold;
+  color: #42b983;
+}
+</style>