vuejs
Unable to use `script-setup` only in Vue 3.3 projects
Checklist
- [x] I have tried restarting my IDE and the issue persists.
- [x] I have read the FAQ and my problem is not listed.
Tell us about your environment
- ESLint version: 8.40.0
- eslint-plugin-vue version: 9.13.0
- Node version: 18.16.0
- Operating System: maco
Please show your full configuration:
"vue/component-api-style": ["error", ["script-setup"]],
"vue/prefer-define-options": "error",
What did you do?
<template>
<div>Foo</div>
</template>
<script>
export default {
name: 'Foo',
};
</script>
What did you expect to happen?
I want my project to only use script-setup.
Perhaps new rules are needed, such as the following:
// only allow the use of `<script setup>`
"vue/enforce-script-type": ["error", "setup"]
// only allow the use of `<script>`
"vue/enforce-script-type": ["error", "options"]
// or
"vue/component-api-style": ["error", ["script-setup-strict"]] // only allow the use of `<script setup>`
What actually happened?
No error displayed.
Repository to reproduce this issue
https://ota-meshi.github.io/eslint-plugin-vue-demo/#eJxNzjEKwzAMBdCrGC1ZYgIZU5Oxp8hiYgUMtiQcJbSY3L1O6dDti8/7qMLKAWECp5glecV5IWNciOf8ZHbDHRZyw1/dzn0tUbRlfAkXNQE3fyQ19cbkM06ma7zrF7oeN/8B6KEcCXeYKpwHDitnYUJS6yXaXd+p/TL2304Kblhsm46ElkUjU4PjdX0AkU0/8g==
"vue/component-api-style": ["error", ["script-setup"]] should still work; that rule was not changed in the last version. Could you please link to a repository where the issue can be reproduced?
I have attached the link. I selected the configurations for vue/component-api-style and vue/prefer-define-options, but no error messages were displayed, and I can still use the options approach.
I think that the vue/enforce-script-type rule is working correctly because the way of writing specifying only the name option is regarded as omitting other descriptions regardless of the API style.
Script setup:
<script>
export default {
name: 'Foo',
};
</script>
<script setup></script><!-- Can be omitted -->
Composition:
<script>
export default {
name: 'Foo',
setup() {} // Can be omitted
};
</script>
It would be nice to implement a new option in vue/prefer-define-options to check even if the <script setup> tag is omitted. However, we should be careful not to check the Options API.
