Property 'nuxtIcon' is missing in type 'AppConfig' when update to 2.11.0

[tidusvn05]

Environment

---

• Operating System: Darwin
• Node Version: v18.17.1
• Nuxt Version: 3.8.2
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: -
• User Config: ssr, devtools, modules, ui, colorMode, runtimeConfig, supabase, imports, nitro, typescript
• Runtime Modules: @pinia/[email protected], @nuxt/[email protected], @nuxtjs/[email protected]
• Build Modules: -

---

Version

2.11.0

Reproduction

https://stackblitz.com/edit/nuxt-ui

Description

[email protected][email protected][email protected][email protected]/node_modules/nuxt-icon/dist/runtime/Icon.vue:11:19

ERROR(vue-tsc) Conversion of type 'AppConfig' to type '{ nuxtIcon: { size?: string; class?: string; aliases?: Record<string, string>; iconifyApiOptions?: { url?: string; publicApiFallback?: boolean; }; }; }' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Property 'nuxtIcon' is missing in type 'AppConfig' but required in type '{ nuxtIcon: { size?: string; class?: string; aliases?: Record<string, string>; iconifyApiOptions?: { url?: string; publicApiFallback?: boolean; }; }; }'.

Additional context

No response

Logs

No response

[tidusvn05]

a trick during waiting a fix from nuxt-icon

• app.config.ts

// fix type-checkin error
  nuxtIcon: {},

[ymansurozer]

Same here. And this did not work for me:

// fix type-checkin error nuxtIcon: {},

[4F2E4A2E]

a trick during waiting a fix from nuxt-icon

• app.config.ts

// fix type-checkin error
  nuxtIcon: {},

did not work for me either

"devDependencies": {
    "@nuxt/devtools": "1.0.8",
    "nuxt": "3.9.3",
    "typescript": "^5.3.3",
    "vue": "3.4.15",
    "vue-router": "4.2.5",
    "vue-tsc": "^1.8.27"
  },
  "dependencies": {
    "@formkit/nuxt": "1.5.1",
    "@nuxt/ui": "2.12.3",
  }

[charlesfaustin]

a trick during waiting a fix from nuxt-icon

• app.config.ts

// fix type-checkin error
  nuxtIcon: {},

did not work for me either

"devDependencies": {
    "@nuxt/devtools": "1.0.8",
    "nuxt": "3.9.3",
    "typescript": "^5.3.3",
    "vue": "3.4.15",
    "vue-router": "4.2.5",
    "vue-tsc": "^1.8.27"
  },
  "dependencies": {
    "@formkit/nuxt": "1.5.1",
    "@nuxt/ui": "2.12.3",
  }

does this work https://github.com/nuxt-modules/icon/issues/117#issuecomment-1797833117

export default defineAppConfig({ nuxtIcon: {}, })

[sandros94]

Sorry for the late reply, is this still an issue with the latest @nuxt/ui versions?

[chris-pinola-rf]

@Sandros94 yes, it's still happening for me on the latest version of @nuxt/ui (2.15.1):

  "dependencies": {
    "@grpc/grpc-js": "^1.10.6",
    "@grpc/proto-loader": "^0.7.12",
    "@nuxt/ui": "^2.15.1",
    "date-fns": "^3.6.0",
    "nuxt": "^3.11.2",
    "v-calendar": "^3.1.2",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@nuxt/eslint-config": "^0.3.0",
    "@nuxt/test-utils": "^3.12.0",
    "@vue/test-utils": "^2.4.5",
    "eslint": "^8.57.0",
    "happy-dom": "^14.5.1",
    "playwright-core": "^1.43.0",
    "typescript": "^5.4.4",
    "vitest": "^1.4.0",
    "vue-tsc": "^1.8.27"
  }

Though, as others have reported, I'm able to workaround it with an app.config.ts:

export default defineAppConfig({
    nuxtIcon: {},
})

[agentprivatbanka]

Though, as others

check if you have AppConfig in the index.d.ts file, it can overwrite the automatically generated nuxt types for app.config

[syed-haroon]

a trick during waiting a fix from nuxt-icon

• app.config.ts

// fix type-checkin error
  nuxtIcon: {},

This Helped, here is full code for the file ./app.config.ts

export default defineAppConfig({
  nuxtIcon: {},
});