pageClass | sidebarDepth | title | description |
---|---|---|---|
rule-details |
0 |
vue/component-api-style |
enforce component API style |
enforce component API style
- ❗ This rule has not been released yet.
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>
{
"vue/component-api-style": ["error",
["script-setup", "composition"] // "script-setup", "composition", 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>
."composition"
... If set, allows Composition API (not<script setup>
)."options"
... If set, allows Options API.
<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>