Consider exporting the full type of the RouterLink and RouterView component for TypeScript about router HOT 6 CLOSED

@posva Do not seem to be fixed for me?

I just installed Vue 3 and am testing out type hinting with vue-tsc package, and I am now getting this error? Its a totally fresh project with Vue 3.2

from router.

Is there something blocking the full type being exported?

Not anymore!

from router.

That works and looks like this now:

<script setup lang="ts">
import { RouterView, RouterLink } from "vue-router";
{
  RouterView;
  RouterLink;
}
</script>

from router.

@posva Do not seem to be fixed for me?

I just installed Vue 3 and am testing out type hinting with vue-tsc package, and I am now getting this error? Its a totally fresh project with Vue 3.2

Same here, did you find any solution?

from router.

@posva Do not seem to be fixed for me?
I just installed Vue 3 and am testing out type hinting with vue-tsc package, and I am now getting this error? Its a totally fresh project with Vue 3.2

Same here, did you find any solution?

You can import RouterView and RouterLink from vue-router and define them as components in your component, which will give you correct typings and resolve the errors you are getting.

//
import { RouterView, RouterLink } from 'vue-router'

//
components: {
RouterView,
RouterLink
}

Do note that this is not a permanent fix, just a workaround.

from router.

FWIW, I cannot reproduce this issue in a newly scaffolded project:

1. Scaffold Vue 3 + Vue Router + TypeScript + JSX, and install deps:

npm init vue vue3-router-ts-1  # select TypeScript, JSX, and Router options at prompt
cd vue3-router-ts-1
pnpm i

2. Rename src/App.vue to src/App.tsx, and replace its contents with the equivalent JSX:

import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from '@/components/HelloWorld.vue'

function App() {
  return <>
    <header>
      <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

      <div class="wrapper">
        <HelloWorld msg="You did it!" />

        <nav>
          <RouterLink to="/">Home</RouterLink>
          <RouterLink to="/about">About</RouterLink>
        </nav>
      </div>
    </header>

    <RouterView />
  </>
}

export default App

3. Rename the import in src/main.ts:

-import App from './App.vue'
+import App from './App.js'

4. Run the type checking script:

pnpm type-check

The output shows no errors:

$ pnpm type-check

> [email protected] type-check /Users/tony/src/tmp/vue3-router-ts-1
> vue-tsc --noEmit

$

I also could not reproduce the issue using the above steps without the JSX option and without any changes to the scaffolded code. What steps am I missing?

from router.