# vue/component-api-style
enforce component API style
# 📖 Rule Details
This rule aims to make the API style you use to define Vue components consistent in your project.
For example, if you want to allow only <script setup> and Composition API.
(This is the default for this rule.)
<!-- ✓ GOOD -->
<script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
</script>
<script>
import { ref } from 'vue'
export default {
/* ✓ GOOD */
setup() {
const msg = ref('Hello World!')
// ...
return {
msg,
// ...
}
}
}
</script>
<script>
export default {
/* ✗ BAD */
data () {
return {
msg: 'Hello World!',
// ...
}
},
// ...
}
</script>
# 🔧 Options
{
"vue/component-api-style": ["error",
["script-setup", "composition"] // "script-setup", "composition", "composition-vue2", or "options"
]
}
- Array options ... Defines the API styles you want to allow. Default is
["script-setup", "composition"]. You can use the following values."script-setup"... If set, allows<script setup>(opens new window)."composition"... If set, allows Composition API (opens new window) (not<script setup>)."composition-vue2"... If set, allows Composition API for Vue 2 (opens new window) (not<script setup>). In particular, it allowsrender,renderTrackedandrenderTriggeredalongsidesetup."options"... If set, allows Options API.
# ["options"]
<script>
export default {
/* ✓ GOOD */
data () {
return {
msg: 'Hello World!',
// ...
}
},
// ...
}
</script>
<!-- ✗ BAD -->
<script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
</script>
<script>
import { ref } from 'vue'
export default {
/* ✗ BAD */
setup() {
const msg = ref('Hello World!')
// ...
return {
msg,
// ...
}
}
}
</script>
# 🚀 Version
This rule was introduced in eslint-plugin-vue v7.18.0