fix: update the .vue file shim for Vue 3
#5903
Conversation
| import type { DefineComponent } from 'vue' | ||
| const component: DefineComponent |
There was a problem hiding this comment.
@pikax @cexbrayat
Just to make sure I get it right.
Is this the recommended way to shim .vue files now in Vue 3 stable?
There was a problem hiding this comment.
I think you have something weird with import type, but otherwise yes this is what I've been using:
declare module '*.vue' {
import { DefineComponent } from 'vue';
const component: DefineComponent;
export default component;
}
There was a problem hiding this comment.
What does "something weird with import type" mean?
There was a problem hiding this comment.
Sorry if I wasn't clear: I don't think import type is necessary here, as DefineComponent is just a type, so there is no tree-shaking issue. I'm fine if you prefer to keep it, I was just pointing out that the syntax is a bit more advanced, and might lose some developers not familiar with the latest TS features
There was a problem hiding this comment.
OK. Now that it's only a style issue then I'll keep it. Because now Vue CLI scaffolds with TS 3.9+, which supports this syntax. And the import type syntax is quite self-explaining so that people won't mistakenly take DefineComponent as a value, making the code a little clearer.
fixes #5889
What kind of change does this PR introduce? (check at least one)
Does this PR introduce a breaking change? (check one)
Other information:
The migrator is not likely to be invoked by users until we release CLI v5. I only implemented it as an intellectual exercise for myself.
Though, users can still invoke it by
vue migrate typescript --from 4.5.6, which is slightly better than reading the template source code and copy-paste the new shim themselves.