feat: support experimental.typedPages (#2522)

playground/nuxt.config.ts

@@ -5,6 +5,9 @@ import type { NuxtApp } from 'nuxt/dist/app/index'
 
 // https://nuxt.com/docs/guide/directory-structure/nuxt.config
 export default defineNuxtConfig({
+  experimental: {
+    typedPages: true
+  },
   extends: ['layers/i18n-layer'],
   modules: [
     (_, nuxt) => {

playground/pages/index.vue

@@ -79,6 +79,8 @@ definePageMeta({
       <NuxtLink :to="localePath({ name: 'category-id', params: { id: 'foo' } })">Category</NuxtLink> |
       <NuxtLinkLocale :to="{ name: 'history' }" class="history-link">History</NuxtLinkLocale> |
       <NuxtLinkLocale :to="'/'" locale="ja" activeClass="link-active">Home (Japanese)</NuxtLinkLocale>
+      <nuxt-link to=""></nuxt-link>
+      <NuxtLinkLocale to=""></NuxtLinkLocale>
     </nav>
     <h2>Current Language: {{ getLocaleName(locale) }}</h2>
     <h2>Current Strategy: {{ strategy }}</h2>

src/runtime/components/NuxtLinkLocale.ts

@@ -1,21 +1,17 @@
 import { useLocalePath } from '#i18n'
-import { defineComponent, computed, defineNuxtLink, h } from '#imports'
+import { defineComponent, computed, h } from 'vue'
+import { defineNuxtLink } from 'nuxt/app'
 import { hasProtocol } from 'ufo'
 
 import type { PropType } from 'vue'
-import type { RawLocation, RouteLocation } from '@intlify/vue-router-bridge'
+import type { NuxtLinkProps } from 'nuxt/app'
 
 const NuxtLinkLocale = defineNuxtLink({ componentName: 'NuxtLinkLocale' })
 
-export default defineComponent({
+export default defineComponent<NuxtLinkProps & { locale?: string; to: NuxtLinkProps['to'] }>({
   name: 'NuxtLinkLocale',
   props: {
     ...NuxtLinkLocale.props,
-    to: {
-      type: [String, Object] as PropType<RawLocation | RouteLocation>,
-      default: undefined,
-      required: false
-    },
     locale: {
       type: String as PropType<string>,
       default: undefined,
@@ -43,7 +39,7 @@ export default defineComponent({
         return false
       }
 
-      return props.to === '' || hasProtocol(props.to, { acceptRelative: true })
+      return props.to === '' || props.to == null || hasProtocol(props.to, { acceptRelative: true })
     })
 
     /**
@@ -56,7 +52,7 @@ export default defineComponent({
       }
 
       if (!isExternal.value) {
-        _props.to = resolvedPath
+        _props.to = resolvedPath.value
       }
 
       // The locale attribute cannot be set for NuxtLink

tsconfig.json

@@ -36,6 +36,7 @@
       "#pages": ["./node_modules/nuxt/dist/pages/runtime/index.d.ts"],
       "#head": ["./node_modules/nuxt/dist/index.d.ts"],
       "#i18n": ["./src/runtime/composables.ts"],
+      "#vue-router": ["./node_modules/vue-router"],
       "#build/i18n.shared.mjs": ["./src/runtime/shared.ts"],
       "#build/i18n.options.mjs": ["./src/options.d.ts"],
       "#build/i18n.internal.mjs": ["./src/runtime/internal.ts"],