Comments (6)
@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 withvue-tsc
package, and I am now getting this error? Its a totally fresh project with Vue 3.2Same 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:
- 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
- Rename
src/App.vue
tosrc/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
- Rename the import in
src/main.ts
:
-import App from './App.vue'
+import App from './App.js'
- 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.
Related Issues (20)
- Infinite loop
- Navigation with route obj keeps previous params
- Typescript suggestions based on router configuration HOT 1
- Router Params not being propagated to route
- Route meta properties not available on application mount HOT 2
- Partial child Route Loss HOT 1
- When using nested RouterView and KeepAlive, components aren't detached properly HOT 3
- View Transition API seems not working while first time router jump
- 2-way binding of URL params to `v-model`
- Changed behaviour for meta HOT 4
- Error launching build with version v4.4.1 and v4.4.2 HOT 3
- Router link type error v4.4.2 HOT 1
- "Property '$t' does not exist on type 'ComponentCustomProperties'" HOT 1
- onComplete and onAbort function callbacks for router.replace do not work any longer HOT 4
- Broken parameter types for in-component navigation guards supplied to `defineComponent`
- return and next behave differently in the beforeEach guard. HOT 1
- global components types are not supported after migration from v4.4.0 to v4.4.1 HOT 2
- Default nested route component rendering is different between using `to={name}` and `to="/path"` HOT 2
- augmenting `$route` on `ComponentCustomProperties` HOT 1
- CodeSandbox playground in README broken due to not loading vue HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from router.