vetur
vetur copied to clipboard
vuejs
Supporting <script setup>
- [x] I have searched through existing issues
Feature Request
Earlier this year Evan introduced a new RFC to improve upon the script section to support <script setup>. This RFC is already included as part of the vue@next, and vue-loader was recently updated to support it, so it's my hope that vetur will update to support this as well, since without it intellisense doesn't work correctly. The error I got was
File '/path/to/component/HelloWorld.vue' is not a module. Vetur(2306)
one more could support. like bellow:
<script setup="props, { emit }" lang="ts">
export const handleClick = (evt) => {
emit('click', evt);
};
</script>
async setup should be considered also, e.G.
SomeComponent.vue
<template>
<Container title="Domains">
<template #breadcrumb>
<Breadcrumb
:routes="[
{ title: 'Dashboard', name: Routes.DASHBOARD },
{ title: 'Domains', name: Routes.DOMAIN_LIST },
]"
/>
</template>
<template #content>
<Table />
</template>
</Container>
</template>
<script lang="ts" async setup>
export { default as Container } from '@/modules/ui/components/Container.vue'
export { default as Table } from '@/modules/domain/components/domain/Table.vue'
export { default as Breadcrumb } from '@/modules/ui/components/Breadcrumb.vue'
export { Routes } from '@/router'
// some async operation
export const foo = await ....
export default {}
</script>
When using export default it also not recognize props.
Component.vue
<template>
<h1>{{ msg }}</h1>
<button @click="count++">count is: {{ count }}</button>
</template>
<script setup="props" lang="ts" async>
import { ref } from 'vue';
export default {
props: {
msg: {
type: String,
default: 'default msg',
},
},
};
console.log(props.msg); // Cannot find name 'props'.Vetur(2304)
export const count = ref(0);
</script>
I don't know how the language server is implemented underneath, but @vue/compiler-sfc already supports this, so it would just be a matter of using it to codegen the required information.
I don't know how the language server is implemented underneath, but
@vue/compiler-sfcalready supports this, so it would just be a matter of using it to codegen the required information.
It's actually not that simple. It involves monorepo support and code conversion. This will be my next work after monorepo support.
Is there a way to disable <script setup>-related errors in Vetur / work around them somehow without turning off all validations? Would like to upgrade my code to the new syntax.
I know it's very early days still, Thank You all for your hard work with Vetur 👍
@Uninen If you look at recent changes made to vitepress, Evan seems to suggest the team to use Volar instead of Vetur for now, so maybe you can try using that until Vetur is up-to-date.
Now that Vue 3.2 is out with stable support for this, is this landing soon?
@zynth17, @arafatamim, and others
If you take a look at how Evan recently responded about the recommended approach going forward, it seems that volar is currently the extension of choice for vue 3.
I've been using volar for several months, and so far the auto-completion in both <script> and <template> section has been nice. It's doubly nice if the component library you use is developed in TS and provide thorough typing information for VLS to work things out, since it catches a lot of misspellings, and you can simply hover your mouse to see type info of each variable:
@zynth17, @arafatamim, and others
If you take a look at how Evan recently responded about the recommended approach going forward, it seems that volar is currently the extension of choice for vue 3.
I've been using volar for several months, and so far the auto-completion in both
<script>and<template>section has been nice. It's doubly nice if the component library you use is developed in TS and provide thorough typing information for VLS to work things out, since it catches a lot of misspellings, and you can simply hover your mouse to see type info of each variable:
i do love volar but what i dont like from volar is it doesn't support the autoclosing tag you need to close bracket, or parentheses even quote manually. it's just very annoying to do it manually. anyway thanks for the suggestion, i will try to use volar for now at least
@boonyasukd Does that mean that Vetur has no close plans to implement <script setup> any time soon?
@ivan-bragin That I don't really know. I'm just a regular vue user who happens to follow Evan closely on Twitter and Github, so I noticed the change in recommendation. If you want to know that, you probably have to ask vetur maintainer(s).
Yeah having this feature would be awesome,,, I don't want to switch to volar,, I like vetur more,
We plan to support it in next next version. (v0.37.0) But there is no schedule, it is a big work.
I have two solutions to avoid this error for now
- change to
- Add a script tag at the top of the Vue file to declare the name attribute
For now can just disable Vetur for script section and use ESlint, TSLint
VS Code JSON config line
"vetur.validation.script": false,
For now can just disable Vetur for script section and use ESlint, TSLint
VS Code JSON config line
"vetur.validation.script": false,
Currently, I had Vue 2 project but using the
And disabling script validation working at least for now.
If you're using Typescript, it's recommended to disable interpolation validation too.
"vetur.validation.interpolation": false
The error on the template will be gone. We don't get any autocomplete on the template, but it's okay for now, we still can use runtime error for that.
Just a heads up if you installed volar to get the setup support it seems like you also have to uninstall vetur as well in order to get it to work. (at least thats what I had to do)
Just a heads up if you installed volar to get the setup support it seems like you also have to uninstall vetur as well in order to get it to work. (at least thats what I had to do)
Yeah, the best is to create a workspace with Vetur disabled, it might be that you have projects without the setup script.
You should be using volar nowadays. It has superseded vetur afaik. I don’t think it makes much sense to also implement setup support here. What are the official plans for vetur, @octref, @yoyo930021?
Sorry, not very related to this thread, but please upvote microsoft/vscode#143531 to get more Vue 3 users to Volar ;)
