JS.VUE.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.)

{'vue/component-api-style': ['error']}

<!-- GOOD -->
<script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
</script>

{'vue/component-api-style': ['error']}

<script>
import { ref } from 'vue'
export default {
  /* GOOD */
  setup() {
    const msg = ref('Hello World!')
    // ...
    return {
      msg,
      // ...
    }
  }
}
</script>

{'vue/component-api-style': ['error']}

<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> (https://vuejs.org/api/sfc-script-setup.html).
• "composition" ... If set, allows Composition API (https://vuejs.org/api/#composition-api) (not <script setup>).
• "composition-vue2" ... If set, allows Composition API for Vue 2 (https://github.com/vuejs/composition-api) (not <script setup>). In particular, it allows render, renderTracked and renderTriggered alongside setup.
• "options" ... If set, allows Options API.

["options"]

{'vue/component-api-style': ['error', ['options']]}

<script>
export default {
  /* GOOD */
  data () {
    return {
      msg: 'Hello World!',
      // ...
    }
  },
  // ...
}
</script>

{'vue/component-api-style': ['error', ['options']]}

<!-- BAD -->
<script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
</script>

{'vue/component-api-style': ['error', ['options']]}

<script>
import { ref } from 'vue'
export default {
  /* BAD */
  setup() {
    const msg = ref('Hello World!')
    // ...
    return {
      msg,
      // ...
    }
  }
}
</script>