Skip to content

Commit

Permalink
feat(components): add i18n-link
Browse files Browse the repository at this point in the history
  • Loading branch information
s00d committed Aug 21, 2024
1 parent d53f26c commit a791bfa
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 2 deletions.
4 changes: 2 additions & 2 deletions playground/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
37 changes: 37 additions & 0 deletions src/runtime/components/i18n-link.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<template>
<NuxtLink :to="$localeRoute(to)" :class="{ active: isActive }">

Check warning on line 2 in src/runtime/components/i18n-link.vue

View workflow job for this annotation

GitHub Actions / lint

':class' should be on a new line
<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>

0 comments on commit a791bfa

Please sign in to comment.