useRoute is considered as any by typescript-eslint with unplugin-vue-router

[wJoenn]

Environment

---

• Operating System: Linux
• Node Version: v20.11.0
• Nuxt Version: 3.11.1
• CLI Version: 3.11.1
• Nitro Version: 2.9.5
• Package Manager: [email protected]
• Builder: -
• User Config: build, components, content, devtools, experimental, image, modules, runtimeConfig, typescript, vite
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected]
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-tncf3g?file=tsconfig.json

Describe the bug

In a Nuxt project that has enabled the experimental typedPages, typescript-eslint considers useRoute to be a unsafe any assignment despite the type appearing on hover.

In the reproduction you'll find the same behaviour when running the eslint . command in the console

<template>
  <div>{{ path }}</div>
</template>

<script setup lang="ts">
const route = useRoute();
const path = computed(() => route.path);
</script>

I've had the same problem in a Vue application that uses the unplugin-vue-router package like Nuxt does when enabling typedPages

It was solved by adding "unplugin-vue-router/client" to the types of my tsConfig This solution also works in the reproduction, using the following tsConfig and running eslint . seems to work

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "types": ["unplugin-vue-router/client"]
  }
}

But this does not work on my actual Nuxt project

Additional context

No response

Logs

No response

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• github-tncf3g (Open reproduction)

[wJoenn]

I don't remember whether navigateTo is related to unplugin-vue-router or not but it has a similar problem

[spider-hand]

I don't turn on typedPages feature but having the same issue. useRoute and useRouter composables are not typed. Nuxt version is 3.11.2.

[HendrikJan]

Same problem here. ref() is correctly typed: But getRoute() and getRouter() are not.

The output of console.log seems correct:

Nuxt version 3.11.2

[spider-hand]

I actually found an issue on my side.. I set up config like below to fix IntelliSense on VSCode and this caused the issue. I deleted this part and now the composables are properly typed.

"compilerOptions": {
  "paths": {
    "@": ["."],
    "@/*": ["./*"]
  }
}

[wJoenn]

@ ans @/* should be paths that exist by default in the nuxt tsconfig anyway 🤔 Are you not extending your tsconfig.json with .nuxt/tsconfig.json ?

[spider-hand]

@wJoenn Ah yes sorry I just didn't paste the part. The reason I set like this was because VS code suggested me ~ alias first on default config and I wanted to use @ alias.

[danielroe]

This is an issue with how eslint is being configured. Have you considered using https://eslint.nuxt.com which makes sure to point eslint to the correct types?

[wJoenn]

@danielroe please consider reopening this issue, this is not fixed by using @nuxt/eslint I updated my repro to show the problem https://stackblitz.com/edit/github-tncf3g-a58vrr?file=nuxt.config.ts

Running eslint . will return the following response

The issue is coming from the experimental typedPage feature. If I remove it from my nuxt.config.ts and regenerate my .nuxt directory then I don't have issues anymore.

export default defineNuxtConfig({
  // experimental: {
  //   typedPages: true,
  // },
  modules: ['@nuxt/eslint'],
  typescript: {
    strict: true,
  },
});

And if I add the types to my tsConfig as explained in unplugin-vue-router's setup guide and regenerate my .nuxt directory then I don't have issues anymore either

export default defineNuxtConfig({
  experimental: {
    typedPages: true,
  },
  modules: ['@nuxt/eslint'],
  typescript: {
    strict: true,
    tsConfig: {
      compilerOptions: {
        types: ['unplugin-vue-router/client'] // add this
      }
    }
  },
});

But like I said in the initial post, this solution only seems to work in the reproduction but not in my nuxt projects for some reasons 🤔

In any case, using @nuxt/eslint does not solve this issue

[danielroe]

You are overriding the typescript processor/parser. When you remove that, it works fine:

- import tseslint from 'typescript-eslint';
- import vueParser from 'vue-eslint-parser';
  import withNuxt from './.nuxt/eslint.config.mjs';
  
  export default withNuxt(
-   tseslint.config({
-     files: ['**/*.vue'],
-     languageOptions: {
-       parser: vueParser,
-       parserOptions: {
-         extraFileExtensions: ['.vue'],
-         parser: tseslint.parser,
-         project: true,
-       },
-     },
-     processor: 'vue/vue',
-     rules: {
-       '@typescript-eslint/no-unsafe-assignment': 'error',
-       '@typescript-eslint/no-unsafe-member-access': 'error',
-     },
-   })
  );

So this isn't a Nuxt issue but a configuration question. I recommend using nuxt/eslint. But if not, you might find it helpful to investigate how nuxt/eslint is configuring typescript-eslint and replicate that yourself.

[danielroe]

Ah - investigated further and I see what you mean... these rules aren't enabled by default.

cc: @antfu