Bad template generation with i18n module #135
Comments
|
Hi! Yeah there is a problem I spotted with the "prefix" strategy i'm sorry for this. I'll have to refactor a significant part of stuff on 4.0 and it's already in progress |
|
looks promsing, is there any beta version yet? |
|
Not yet it's not usable, i'll tell you when it's ready. But i'll surely will change how i18n types will work |
|
I'm also running into the same error. Error is different but still traces to |
|
What is the roadmap for this module when contrasted with Nuxt's |
|
I second that question. To me, that option seems to be the canonic approach, even if it's marked as experimental. |
How did you enable i18n tying with experimental.typedPages ?? |
I just enabled the option, and the linked documentation describes what effect it had:
For other i18n typing support, you have to look elsewhere. I personally found the i18n module's typing support to be lackluster in general, but specifically for links, this experimental option worked well. |
|
Typed router works with In export default defineNuxtConfig({
experimental: {
payloadExtraction: false,
typedPages: true,
},
//...
});In import type { RouteNamedMap } from 'vue-router/auto/routes';
import type { RouteLocationAsString, RouteLocationAsRelativeTypedList, RouteLocationAsPathTypedList } from 'unplugin-vue-router/types';
// I18n routes
type RemoveUnderscoreKeys<T> = {
[K in keyof T as K extends `${infer _Prefix}___${infer _Suffix}` ? never : K]: T[K]
};
type NewRouteNamedMap = RemoveUnderscoreKeys<RouteNamedMap>;
type NewRouteLocationRaw<Name extends keyof NewRouteNamedMap = keyof NewRouteNamedMap> =
| RouteLocationAsString<NewRouteNamedMap>
| RouteLocationAsRelativeTypedList<NewRouteNamedMap>[Name]
| RouteLocationAsPathTypedList<NewRouteNamedMap>[Name];
/**
* The function that resolve locale path.
*
* @remarks
* The parameter sygnatures of this function is same as {@link localePath}.
*
* @param route - A route location. The path or name of the route or an object for more complex routes.
* @param locale - A locale optional, if not specified, uses the current locale.
*
* @returns Returns the localized URL for a given route.
*
* @see {@link useLocalePath}
*
* @public
*/
type NewLocalePathFunction = (route: NewRouteLocationRaw, locale?: Locale) => string;
declare global {
/**
* The `useLocalePath` composable returns a function that resolves a path according to the current locale.
*
* @remarks
* The function returned by `useLocalePath` is the wrapper function with the same signature as {@link localePath}.
*
* `useLocalePath` is powered by [vue-i18n-routing](https://github.com/intlify/routing/tree/main/packages/vue-i18n-routing).
*
* @param options - An options object, see {@link I18nCommonRoutingOptionsWithComposable}
*
* @returns A {@link LocalePathFunction}.
*
* @public
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function useLocalePath(options?: any): NewLocalePathFunction;
}
export {}; |
|
@danwithabox yes, |
Thank you for sharing: I had to do few modification in order to work. here is my final working version: import type { RouteNamedMap } from 'vue-router/auto/routes';
import type { RouteLocationAsString, RouteLocationAsRelativeTypedList, RouteLocationAsPathTypedList } from 'unplugin-vue-router/types';
// I18n routes
type RemoveUnderscoreKeys<T> = {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
[K in keyof T as K extends `${infer Prefix}___${infer Suffix}` ? Prefix : K]: T[K]
};
type NewRouteNamedMap = RemoveUnderscoreKeys<RouteNamedMap>;
type NewRouteLocationRaw<Name extends keyof NewRouteNamedMap = keyof NewRouteNamedMap> =
| RouteLocationAsString<NewRouteNamedMap>
| RouteLocationAsRelativeTypedList<NewRouteNamedMap>[Name]
| RouteLocationAsPathTypedList<NewRouteNamedMap>[Name];
/**
* The function that resolve locale path.
*
* @remarks
* The parameter sygnatures of this function is same as {@link localePath}.
*
* @param route - A route location. The path or name of the route or an object for more complex routes.
* @param locale - A locale optional, if not specified, uses the current locale.
*
* @returns Returns the localized URL for a given route.
*
* @see {@link useLocalePath}
*
* @public
*/
type NewLocalePathFunction = (route: NewRouteLocationRaw, locale?: Locale) => string;
declare module '../node_modules/@nuxtjs/i18n/dist/runtime/composables/index' {
/**
* The `useLocalePath` composable returns a function that resolves a path according to the current locale.
*
* @remarks
* The function returned by `useLocalePath` is the wrapper function with the same signature as {@link localePath}.
*
* `useLocalePath` is powered by [vue-i18n-routing](https://github.com/intlify/routing/tree/main/packages/vue-i18n-routing).
*
* @param options - An options object, see {@link I18nCommonRoutingOptionsWithComposable}
*
* @returns A {@link LocalePathFunction}.
*
* @public
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function useLocalePath(options?: any): NewLocalePathFunction;
}
export {}; |
|
Hello guys sorry I don't have much time to maintain efficiently this project, Nuxt team is speed running through updates and with a full time job it's hard to keep being aligned. Especially i18n which is a difficult aspect |
|
@victorgarciaesgi don't worry, I fully understand. It should be part of |
|
The previous solution stopped working for me. I did some investigation and came up with the following workaround in the // I18n routes
declare module 'vue-router' {
import { type RouteNamedMap } from 'vue-router/auto-routes';
type RemoveUnderscoreKeys<T> = {
[K in keyof T as K extends `${infer Prefix}___${infer _Suffix}` ? Prefix : K]: T[K];
};
// Workaround for: https://github.com/victorgarciaesgi/nuxt-typed-router/issues/135
export declare interface TypesConfig {
/**
* Some things don't work:
* - `<nuxt-link :to="{ name: 'dashboard' }" />` should be the wrong type
* - `localePath('/dashboard/')` should be the correct type
* - `localePath('/en-gb/dashboard/')` should be the wrong type
*/
RouteNamedMap: RemoveUnderscoreKeys<RouteNamedMap>;
}
}
export {};This might be somewhat controversial since it overrides a type intended for internal use. Additionally, it causes a few other issues mentioned in the comments. However, I believe it can be a suitable temporary workaround. |
Describe the bug
Nuxt won't start when i18n is enabled. the following errors printed in console:
Expected behavior
to run nuxt normally
Screenshots
upon checking the generated .ts files, found those problems:
Environnement infos
Your
pagesfolder structurepages
├── admin
│ └── index.vue
└── index.vue
Your nuxt.config.ts
modules: [
'@pinia/nuxt',
['@nuxtjs/eslint-module', eslintConfig],
['@nuxtjs/i18n', i18nConfig],
'@formkit/auto-animate',
'@vueuse/nuxt',
['@nuxt/image', imageConfig],
['nuxt-simple-sitemap', sitemapConfig],
['nuxt-jsonld', jsonldConfig],
['nuxt-simple-robots', robotsConfig],
'nuxt-typed-router',
['@vite-pwa/nuxt', pwaConfig],
],
//i18n config
import { type ModuleOptions } from '@nuxtjs/i18n'
const config: ModuleOptions = {
defaultLocale: 'en-US',
langDir: 'config/i18n/locales/',
locales: [
{
code: 'en',
iso: 'en-US',
file: 'en-US.json',
},
{
code: 'ar',
iso: 'ar-JO',
file: 'ar-JO.json',
},
],
lazy: true,
strategy: 'prefix'
}
export default config
The text was updated successfully, but these errors were encountered: