Nuxt•5mo ago

Auto-import of /utils not working in VS-Code in template block

Even though my application builds and works fine, the auto-import of my function t() doesn't get recognized inside the <template>. The function is defined like this:

// /utils/translate.ts

/* some code left out */

export function t(key:string): string | null {
  const lang = userData.value?.account?.language;
  const translations = (lang == 'nl' ? nl : en);

  if (!(key in translations)) {
    console.warn('Translate key not found', key);
    return null;
  }

  return translations[key];
}

// /utils/translate.ts

/* some code left out */

export function t(key:string): string | null {
  const lang = userData.value?.account?.language;
  const translations = (lang == 'nl' ? nl : en);

  if (!(key in translations)) {
    console.warn('Translate key not found', key);
    return null;
  }

  return translations[key];
}

Inside the <script setup lang="ts"> block the auto-import works, but in the <template> block it doesn't. If I add import { t } from '~/utils/translate.ts' to the script it starts working in the template, but that would defy the usefullness of auto-imports.

<v-alert type="info">
   {{ t('report_info_alert_1') }}
</v-alert>

<v-alert type="info">
   {{ t('report_info_alert_1') }}
</v-alert>

Gives me the error:

Property 't' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { result: typeof result; totalCount: typeof totalCount; yearName: typeof yearName; error: typeof error; info: typeof info; ... 8 more ...; downloadExcel: typeof downloadExcel; }, ... 17 more ..., {}>'.ts-plugin(2339)

Property 't' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<{}>>, { result: typeof result; totalCount: typeof totalCount; yearName: typeof yearName; error: typeof error; info: typeof info; ... 8 more ...; downloadExcel: typeof downloadExcel; }, ... 17 more ..., {}>'.ts-plugin(2339)

Does anyone know how to get this working?

12 Replies

Cue•5mo ago

1. check <rootDir>/.nuxt/imports.d.ts for export { t } from '../utils/translate'; or similar. 2. if the above exists, restart vscode? 3. if the above does not exist, run nuxt prepare and repeat first two steps.

Hendrik JanOP•5mo ago

Hey, thanks for the help. Unfortunately none of the suggestions work 😢 export { t } from '../utils/translate is there in imports.d.ts, but restarting VS-Code didn't fix. Within <script> block no error, but within <template> this problem is still not fixed. I also tried another editor (Zed) --> same problem.

Cue•5mo ago

Are you using vuetify?

Joni•5mo ago

Hey there, i have the same problem, my utils files arent getting recognized by typescript. Im using Vuetify

Casper•5mo ago

i got the same problem - others have aswell https://discord.com/channels/473401852243869706/1270328509784522753

Hendrik JanOP•5mo ago

Yes, using Vuetify indeed.

Cue•5mo ago

Yea likely an augmenting issue. Have seen this with a lot of libs. Even using nuxt-nightly, which claims to resolve this, still seeing this issue. Worth tracking on gh for now.

Hendrik JanOP•5mo ago

Seems like a solution PR is in the making for the next 3.x version: https://discord.com/channels/473401852243869706/1270328509784522753 Thanks 🙏. Useful link!

Joni•4mo ago

Ppl still have this problem right? (Cause I do)

data•4mo ago

add this to declarations.d.ts in your project root

// https://github.com/nuxt/nuxt/releases/tag/v3.13.0
// TODO periodically check if this file is still needed, as libraries may update their types
import type {
  ComponentCustomOptions as _ComponentCustomOptions,
  ComponentCustomProperties as _ComponentCustomProperties,
} from 'vue'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties extends _ComponentCustomProperties {}
  interface ComponentCustomOptions extends _ComponentCustomOptions {}
}

// https://github.com/nuxt/nuxt/releases/tag/v3.13.0
// TODO periodically check if this file is still needed, as libraries may update their types
import type {
  ComponentCustomOptions as _ComponentCustomOptions,
  ComponentCustomProperties as _ComponentCustomProperties,
} from 'vue'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties extends _ComponentCustomProperties {}
  interface ComponentCustomOptions extends _ComponentCustomOptions {}
}

Joni•4mo ago

Thanks so much for this workaround!

Hendrik JanOP•4mo ago

Thanks indeed!

Gaming

Programming

Auto-import of /utils not working in VS-Code in template block