Prefer Composition API over Options API in Vue components

vuetypescriptjavascript
Favor the Composition API (`<script setup>` or `setup()` function) instead of the Options API when writing new Vue components.
Bad – Options API component
```vue
<script>
export default {
  name: "Counter",
  data() {

Install this rule for wispbit

Quick Install

Recommended
View install script

Run this one command to automatically install the rule:

curl -fsSL https://wispbit.com/api/install?rule=vue-prefer-composition-api | bash

Manual install

1

Copy the rule

---
include: *.vue
---
Favor the Composition API (`<script setup>` or `setup()` function) instead of the Options API when writing new Vue components.
Bad – Options API component
```vue
<script>
export default {
  name: "Counter",
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    increment() {
      this.count++
    },
  },
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  },
}
</script>
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
```
Good – Composition API component (`<script setup>`)
```vue
<script setup lang="ts">
import { ref, onMounted } from "vue"
const count = ref(0)
function increment() {
  count.value++
}
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
```
2

Add the rule into your project

Save the copied content as: .wispbit/rules/vue-prefer-composition-api.md

Install this rule for Coderabbit

Copy the configuration below and add it to your repository as .coderabbit.yml in your project root.

reviews:
  path_instructions:
    - path: "*.vue"
      instructions: |
                
        Favor the Composition API (`<script setup>` or `setup()` function) instead of the Options API when writing new Vue components.
        
        Bad – Options API component
        
        ```vue
        <script>
        export default {
          name: "Counter",
          data() {
            return {
              count: 0,
            }
          },
          methods: {
            increment() {
              this.count++
            },
          },
          mounted() {
            console.log(`The initial count is ${this.count}.`)
          },
        }
        </script>
        
        <template>
          <button @click="increment">Count is: {{ count }}</button>
        </template>
        ```
        
        Good – Composition API component (`<script setup>`)
        
        ```vue
        <script setup lang="ts">
        import { ref, onMounted } from "vue"
        
        const count = ref(0)
        
        function increment() {
          count.value++
        }
        
        onMounted(() => {
          console.log(`The initial count is ${count.value}.`)
        })
        </script>
        
        <template>
          <button @click="increment">Count is: {{ count }}</button>
        </template>
        ```

Install this rule for Greptile

Greptile rules can be added through the web interface. Please see this documentation for details on how to add custom rules and context.

Favor the Composition API (`<script setup>` or `setup()` function) instead of the Options API when writing new Vue components.
Bad – Options API component
```vue
<script>
export default {
  name: "Counter",
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    increment() {
      this.count++
    },
  },
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  },
}
</script>
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
```
Good – Composition API component (`<script setup>`)
```vue
<script setup lang="ts">
import { ref, onMounted } from "vue"
const count = ref(0)
function increment() {
  count.value++
}
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
```

File Path Patterns:

*.vue

Install this rule for GitHub Copilot

Copilot instructions can be added through the interface. See the documentation for details on how to create coding guidelines.

Favor the Composition API (`<script setup>` or `setup()` function) instead of the Options API when writing new Vue components.
Bad – Options API component
```vue
<script>
export default {
  name: "Counter",
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    increment() {
      this.count++
    },
  },
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  },
}
</script>
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
```
Good – Composition API component (`<script setup>`)
```vue
<script setup lang="ts">
import { ref, onMounted } from "vue"
const count = ref(0)
function increment() {
  count.value++
}
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
```

File Path Patterns:

*.vue

Install this rule for Graphite Diamond

Diamond custom rules can be added through the interface. See the documentation for details on how to create custom rules.

Favor the Composition API (`<script setup>` or `setup()` function) instead of the Options API when writing new Vue components.
Bad – Options API component
```vue
<script>
export default {
  name: "Counter",
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    increment() {
      this.count++
    },
  },
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  },
}
</script>
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
```
Good – Composition API component (`<script setup>`)
```vue
<script setup lang="ts">
import { ref, onMounted } from "vue"
const count = ref(0)
function increment() {
  count.value++
}
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
```

File Path Patterns:

*.vue