WebStorm Nuxt 3 TypeScript not working in template

Could you share a sample project the issue can be reproduced with?

Sure, here it is: https://github.com/v-moravec/prisma-test

I have similar issues with Vue x Nuxt3 refs in template.

It seems to especially be problematic if imports of ref/Ref are not done explicitly in the vue component.

Among many other things, ref (function) and Ref (type) are auto-imported by Nuxt, so explicitly importing them is 100% redundant as the code will function the same regardless if you import them, except WebStorm often has trouble understanding what's going on if the imports statements are omitted.

Another auto-imported function that often break WebStorm's typing system: computed

Compare these cases:

Before import:

in script:

in template:

You can see type information is completely broken / missing / borked.

After adding 

import { computed } from 'vue';

this becomes:

This fixes the typing information at the cost of adding needless import statements. I say needless because the code doesn't need them, but WebStorm sadly does need them until it is fixed. But not all cases can be solved by an import because often the return types of functions in the setup script are using auto-imported types without explicitly stating/naming these types, so importing them doesn't do anything and the typing remains broken, sadly. The prisma related issues likely face the same issues as mentioned here

The issue is tracked at https://youtrack.jetbrains.com/issue/WEB-56524/The-types-of-refs-in-templates-are-unknown-when-using-auto-import-plugin, please follow it for updates

Elena Pogorelova In the thread you mention a comment says that the thread is NOT about Nuxt3 but instead about pure Vue + plugins. Which is kind of weird because the issue there is due to Nuxt auto-imports which are a core feature of Nuxt (not some plugin)

Another comment says the this problem for Nuxt3 will be fixed in full release of v2023.1.1, I hope that is true because in the 2023.1.1 Beta version it is still not fixed

2023.1.1 Beta is not yet available, what you are using is 2023.1 Beta; 2023.1.1 is a minor update of 2023.1 (that is not yet released). Once it's released, we'll start the EAP process for 2023.1.1

Blessed, looking forward to the 1.1 update!

Hi guys,

I use the 2023.1.3 version, which still struggles with Nuxt 3 and typescript.

Is there something I can do right now to solve the issue?

Best regards,
Luis.

What problems using  Nuxt 3 and typescript you have faced? Please file tickets to youtrack, https://youtrack.jetbrains.com/issues/WEB, providing the detailed issue description

Hi,

I am using webstorm WebStorm 2024.1.5 Build #WS-241.18034.50

And the intellisens ist not working in the Nuxt(3.8.2) template with composables

this is the useCourse() composable

import courseData from './courseData';

type Lesson = {
  title: string;
  slug: string;
  number: number;
  downloadUrl: string;
  videoId: number;
  text: string;
  sourceUrl?: string;
  path: string;
}

type chapter = {
  title: string;
  slug: string;
  number: number;
  lessons: Lesson[];
}

type course = {
  title: string;
  chapters: chapter[];
}

export const useCourse = (): course => {
  const chapters: chapter[] = courseData.chapters.map((chapter) => {
    const lessons: Lesson[] = chapter.lessons.map(
      (lesson) => ({
        ...lesson,
        path: `/course/chapter/${chapter.slug}/lesson/${lesson.slug}`,
      })
    );
    return {
      ...chapter,
      lessons
    };
  })
  return {
    ...courseData,
    chapters
  }
}

and I use it in this component 

<template>
    <div>
        <p class="mt-0 uppercase font-bold text-slate-400 mb-1">
            Lesson {{ chapter.number }} - {{ lesson.number }}
        </p>
        <h2 class="my-0">{{ lesson.title }}</h2>
        <div class="flex space-x-4 mt-2 mb-8">
            <NuxtLink v-if="lesson.sourceUrl" class="font-normal text-md text-gray-500" :href="lesson.sourceUrl">
                Download Source Code
            </NuxtLink>
            <NuxtLink v-if="lesson.downloadUrl" class="font-normal text-md text-gray-500" :href="lesson.downloadUrl">
                Download Video
            </NuxtLink>
        </div>
        <VideoPlayer v-if="lesson.videoId" :videoId="lesson.videoId" />
        <p>{{ lesson.text }}</p>
        <!-- <ClientOnly> -->
        <LessonCompleteButton :model-value="isLessonComplete" @update:model-value="toggleComplete" />
        <!-- </ClientOnly> -->
    </div>
</template>

<script setup>
const course = useCourse();
const route = useRoute();

const chapter = computed(() => {
    return course.chapters.find(
        (chapter) => chapter.slug === route.params.chapterSlug
    );
});

const lesson = computed(() => {
    return chapter.value.lessons.find(
        (lesson) => lesson.slug === route.params.lessonSlug
    );
});

const title = computed(() => {
    return `${lesson.value.title} - ${course.title}`

})

But here in the template the intellisens is not working (like in another ide):

and it doesn't recognize that the composable is being used:

My settings:

Hello!

What does the courseData definition look like? Please could you share a sample project where the issue is reproducible for you?

Hi,

courseData is just a json file with the data.

export default {
  title: 'Course title',
  chapters: [
    {
      title: 'Chapter 1',
      slug: 'chapter-1',
      number: 1,
      lessons: [
        {
          title: 'Lesson 1',
          slug: 'lesson-1',
          number: 1,
          downloadUrl:'https://url',
          videoId: 11111,
          text: `description text`,
        },
	],
  }
 ]
}
      

Thank you!

Unfortunately I failed to reproduce the issue:

Could you share a sample project that reproduces the problem within a support ticket?

I'm also running into this, I have a computed property returning a value, in the script tag it knows what the variable type is, an array of items, but in the template it says it's of type `any`, but then when I loop over it's values, it knows what the value is, but then doesn't know what the properties of the item are. While in VS Code it's able to resolve it with no issues
 

VS Code:
 

These are the types

import type {IconDefinition} from '@fortawesome/free-regular-svg-icons';
import type {RouteLocationRaw} from 'vue-router';

export const MenuItemType = {
    HEADER: 'header',
    ROUTE: 'route',
    HREF: 'href',
    GROUP: 'group',
} as const;

type MenuItemType = typeof MenuItemType[keyof typeof MenuItemType];

interface MenuItemBadge {
    badge: string | number;
}

interface BaseMenuItem<T extends MenuItemType> {
    type: T;
    title: string;
    icon?: IconDefinition;
    badge?: MenuItemBadge;
}

export interface HeaderMenuItem extends BaseMenuItem<typeof MenuItemType.HEADER> {
    subheader: true;
}

export interface NavigationMenuItem<T extends MenuItemType> extends BaseMenuItem<T> {
    name: string;
}

export interface RouteMenuItem extends NavigationMenuItem<typeof MenuItemType.ROUTE> {
    to?: RouteLocationRaw;
}

export interface HrefMenuItem extends NavigationMenuItem<typeof MenuItemType.HREF> {
    href?: string;
}

export type NavigationGroupItem = RouteMenuItem | HrefMenuItem;

export interface GroupMenuItem extends BaseMenuItem<typeof MenuItemType.GROUP> {
    submenu: NavigationGroupItem[];
}

export type MenuItem = RouteMenuItem | HrefMenuItem | HeaderMenuItem | GroupMenuItem;

Which version of the IDE are you using? Could you share a sample project that reproduces the problem within a support ticket?