Nuxt•17mo 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()

t()

t()

t() doesn't get recognized inside the

<template>

<template>

<template>

<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];
}

// /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">

<script setup lang="ts">

<script setup lang="ts">

<script setup lang="ts"> block the auto-import works,
but in the

<template>

<template>

<template>

<template> block it doesn't.

If I add

import { t } from '~/utils/translate.ts'

import { t } from '~/utils/translate.ts'

import { t } from '~/utils/translate.ts'

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>

<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)

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?

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

Similar Threads

Similar Threads

Similar Threads