Supporting <script setup>

[boonyasukd]

• 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)

[cereschen]

nice but hack

[akai007]

one more could support. like bellow:

<script setup="props, { emit }" lang="ts">
export const handleClick = (evt) => {
  emit('click', evt);
};
</script>

[yoyo930021]

This feature need to add wrapper code like template Interpolation.

[soerenmartius]

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>

[fajuchem]

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>

[Ambyjkl]

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.

[yoyo930021]

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.

It's actually not that simple.
It involves monorepo support and code conversion.
This will be my next work after monorepo support.

[Uninen]

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 👍

[boonyasukd]

@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.

[CaptainYouz]

yo. Any news on this one ?

[xon52]

2 month bump 🎂

[cweijan]

+1.

[ghost]

https://twitter.com/NikhilVerma/status/1405199735107973120 + reply

[arafatamim]

Now that Vue 3.2 is out with stable support for this, is this landing soon?

[hi-reeve]

any update about this?

[boonyasukd]

@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:

[hi-reeve]

@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

[ivan-bragin]

@boonyasukd Does that mean that Vetur has no close plans to implement <script setup> any time soon?

[boonyasukd]

@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).

[yoyo930021]

We plan to support it in next next version. (v0.37.0)
But there is no schedule, it is a big work.

[Miguel-Bento-Github]

Hey everyone.

What's the status here?

[zxhhh11]

I have two solutions to avoid this error for now

1. change <script setup></script> to

<script> import { defineComponent } from 'vue'; export default defineComponent({ setup() { } }); </script>

2. Add a script tag at the top of the Vue file to declare the name attribute

<script lang="ts"> export default { name: 'NavBar' // this method will resolve the error ：“Module ... has no default export.Vetur(1192)” }; </script> <script lang="ts" setup> </script>

[goshander]

For now can just disable Vetur for script section and use ESlint, TSLint

VS Code JSON config line
"vetur.validation.script": false,

[wahyubucil]

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 <script setup>, and using Volar is bad, it always "heap out of memory". So using Vetur is a good choice for now.

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.

[tomcorey26]

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)

[Miguel-Bento-Github]

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.

[tarkhil]

<script setup=""> works. I've found no other working solution so far

[bodograumann]

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?

[zigomir]

Sorry, not very related to this thread, but please upvote microsoft/vscode#143531 to get more Vue 3 users to Volar ;)

[lmiller1990]

From what I can see Volar is the go-to now - what does Vetur do that Volar doesn't?

[johnsoncodehk]

Volar author is here. 👋 First of all, I'm sorry if I'm uncomfortable discussing Volar here!

Vetur does have some unique features, such as ESLint, highly configurable formatters, Snippets... Volar deliberately avoids adding these features based on some design principles, but at the same time Volar also adds a lot of other unique features, I believe the overall DX is better.

I think currently the most important difference between Vetur and Volar is that Vetur automatically wraps component options with Vue.extend internally, while Volar requires the user to explicitly write Vue.extend or defineComponent. So Vetur's intellisense is richer without wrapping Vue.extend or defineComponent.

Directly exporting component options is a common practice for some Vue2 and JS users. If you like to export component options directly, or rely on Vetur's unique features, I don't think you need to change your habits, just continue to use Vetur.

[Hello-Tan]

You can use volar and then disable the vetur rule.
vetur doc:
for example, take effect after reloading vscode.

// vetur.config.js
module.exports = {
  settings: {
    'vetur.completion.autoImport': false,
    'vetur.experimental.templateInterpolationService': false,
    'vetur.validation.interpolation': false,
    'vetur.validation.template': false,
    'vetur.validation.templateProps': false,
    'vetur.validation.style': false,
    'vetur.validation.script': false,
    'vetur.format.enable': false,
    'vetur.ignoreProjectWarning': true,
    'vetur.languageFeatures.codeActions': false,
    'vetur.languageFeatures.semanticTokens': false,
    'vetur.languageFeatures.updateImportOnFileMove': false,
    'vetur.trace.server': 'off',
    'vetur.underline.refValue': false,
  },
}

[envatic]

Volar has issues coloring components for javascript projects.
and its not my theme. I have tested several, so stop recommending it here

See how vetur handles this

[envatic]

A fast way I solved this is to depend more on eslint for the Js section. So install eslint and turn off veturs validation

turn off this

[abstrekt]

Hi

[fallsimply]

Volar has issues coloring components for javascript projects.
and its not my theme. I have tested several, so stop recommending it here

See how vetur handles this

It purposely highlights components differently than html elements. It's a feature, not a bug. You could try writing a theme / changing the color token for components in Volar in VSCode JSON Settings

[boonyasukd]

FYI, you can now use some Vetur features within Volar 0.36 now, as per @johnsoncodehk 's own tweet. So going forward the feature gap between the two extensions should be closing.

https://github.com/johnsoncodehk/volar-plugins/tree/master/packages/vetur

[muhammedkaraoglu]

Volar has issues coloring components for javascript projects.
and its not my theme. I have tested several, so stop recommending it here

See how vetur handles this

It purposely highlights components differently than html elements. It's a feature, not a bug. You could try writing a theme / changing the color token for components in Volar in VSCode JSON Settings

@fallsimply
Can you help me on how to do this?

[yoyo930021]

Fixed in d89071c

[fsyud]

For now can just disable Vetur for script section and use ESlint, TSLint

VS Code JSON config line "vetur.validation.script": false,

great

[AnthonyDreams]

This is still happening to me in latest vetur version

[max13fr]

This is still happening to me in latest vetur version

same (in v0.37.3)