Nuxt•2mo 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•2mo 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 Jan•2mo 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•2mo ago

Are you using vuetify?

Joni•2mo ago

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

Casper•2mo ago

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

Hendrik Jan•2mo ago

Yes, using Vuetify indeed.

Cue•2mo 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 Jan•2mo 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•4w ago

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

data•4w 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•4w ago

Thanks so much for this workaround!

Hendrik Jan•2w ago

Thanks indeed!

Gaming

Programming

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