intlify: { ...; }; }' is not assignable to parameter of type 'NuxtConfig'.

[Martin Seeger]

When installing as described by the documentation, the follwing typescript error occurs in the nuxt.config.ts file:
intlify: { ...; }; }' is not assignable to parameter of type 'NuxtConfig'.
Object literal may only specify known properties, and 'intlify' does not exist in type 'NuxtConfig'.ts(2345)

Intlify is working despite the error, but it is important to have the types supported. How can this be achieved?

nuxt.config.ts:

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
  ...
  buildModules: [
    "@intlify/nuxt3"
  ],
  intlify: {
    vueI18n: {
      // You can setting same `createI18n` options here !
      baseUrl: "https://my.com",
      defaultLocale: "en",
      localeDir: "locales",
      locale: [
        { code: 'de', iso: 'de-DE', file: 'de-DE.json', dir: 'ltr' },
        { code: 'en', iso: 'en-US', file: 'en-US.json', dir: 'ltr' }
      ],
      strategy: "prefix_and_default",
      lazy: true,
      detectBrowserLanguage: {
        alwaysRedirect: false, 
        fallbackLocale: 'en', 
        redirectOn: 'root', 
        useCookie: true, 
        cookieCrossOrigin: false, 
        cookieDomain: null, 
        cookieKey: 'i18n_redirected', 
        cookieSecure: false
      },
      vuex: false
    },
  }
});

export interface IntlifyModuleOptions {
  /**
   * Options specified for `createI18n` in vue-i18n.
   *
   * If you want to specify not only objects but also functions such as messages functions and modifiers for the option, specify the path where the option is defined.
   * The path should be relative to the Nuxt project.
   */
  vueI18n?: I18nOptions | string
  /**
   * Define the directory where your locale messages files will be placed.
   *
   * If you don't specify this option, default value is `locales`
   */
  localeDir?: string
}

package.json:

{
  "private": true,
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "start": "node .output/server/index.mjs"
  },
  "devDependencies": {
    "@headlessui/vue": "latest",
    "@heroicons/vue": "latest",
    "@tailwindcss/forms": "latest",
    "@types/tailwindcss": "latest",
    "autoprefixer": "^10.4.0",
    "nuxt3": "latest",
    "tailwindcss": "^3.0.7",
    "@intlify/nuxt3": "^0.1.10"
  }
}

[Tom Brouwer]

Should be nice if it is in the package, For now you can create a declerations file.

import { IntlifyModuleOptions } from "nuxt3";

declare module "@nuxt/schema" {
  export interface NuxtConfig {
    intlify?: IntlifyModuleOptions;
  }
}

[Martin Seeger]

Thank you for this hint. I've put it in the global.d.ts file and now the type error in nuxt.config disappeared.

Now, another type issue arises with this part of the nuxt.config:

export interface IntlifyModuleOptions {

  vueI18n?: I18nOptions | string

  localeDir?: string
}

I18nOptions is not defined anywhere. Where do I get this from? Or better how to solve this issue?

[oooplz]

import { IntlifyModuleOptions } from '@intlify/nuxt3';

declare module '@nuxt/schema' {
  export interface NuxtConfig {
    intlify?: IntlifyModuleOptions;
  }
}

[Martin Seeger]

@iamanewofkotlin thank you for clarifying this. So the Import has to be from "@intlify/nuxt3" and no export ... neccessary in nuxt.config itself. Seems to work now.

[Caine J Nielsen]

For anyone else coming across this or similar issues. I learned that Nuxt comes shipped with a nuxt prepare command.

This command generates types based on the Nuxt configuration. These added definitions should fix issues like this.

When creating a new Nuxt project a postinstall script will be added to package.json that should run this command after every install. (npm i)

You can also run the command manually.

See here for more details.
https://nuxt.com/docs/api/commands/prepare

[Andy Zhang]

For nuxt 3.4, install typescript as dev dependency can resolve this issue.

https://stackoverflow.com/a/75993774/19420247

npm install typescript --save-dev