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.