# 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>
Now loading...
<script> import { ref } from 'vue' export default { /* ✓ GOOD */ setup() { const msg = ref('Hello World!') // ... return { msg, // ... } } } </script>
Now loading...
<script> export default { /* ✗ BAD */ data () { return { msg: 'Hello World!', // ... } }, // ... } </script>
Now loading...

# 🔧 Options

{
  "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.

# ["options"]

<script> export default { /* ✓ GOOD */ data () { return { msg: 'Hello World!', // ... } }, // ... } </script>
Now loading...
<!-- ✗ BAD --> <script setup> import { ref } from 'vue' const msg = ref('Hello World!') </script>
Now loading...
<script> import { ref } from 'vue' export default { /* ✗ BAD */ setup() { const msg = ref('Hello World!') // ... return { msg, // ... } } } </script>
Now loading...

# 🚀 Version

This rule was introduced in eslint-plugin-vue v7.18.0

# 🔍 Implementation

Last Updated: 9/17/2021, 10:36:02 AM