noVueOptionsApi

JavaScript (and super languages)

Summary

Rule available since: v2.3.12
Diagnostic Category: lint/style/noVueOptionsApi
This rule isn’t recommended, so you need to enable it.
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "noVueOptionsApi": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow the use of Vue Options API.

Vue 3.6’s Vapor Mode does not support the Options API. Components must use the Composition API (<script setup> or defineComponent with function signature) instead.

This rule helps prepare codebases for Vapor Mode by detecting Options API patterns that are incompatible with the new rendering mode.

Examples

Invalid

1
<script>
2
export default {
3
  data() {
4
    return { count: 0 }
5
  }
6
}
7
</script>

code-block.vue:1:16 lint/style/noVueOptionsApi ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Using the Options API is not allowed.
  
  > 1 │ export default {
      │                ^
  > 2 │   data() {
  > 3 │     return { count: 0 }
  > 4 │   }
  > 5 │ }
      │ ^
    6 │ 
  
  ℹ Although the Options API is still supported by Vue, using the Composition API is recommended, and makes it possible to use Vue’s Vapor mode for better performance.
  
  ℹ Use <script setup> or defineComponent with a function signature to use the Composition API instead.

1
<script>
2
export default {
3
  methods: {
4
    increment() {
5
      this.count++
6
    }
7
  }
8
}
9
</script>

code-block.vue:1:16 lint/style/noVueOptionsApi ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Using the Options API is not allowed.
  
  > 1 │ export default {
      │                ^
  > 2 │   methods: {
  > 3 │     increment() {
  > 4 │       this.count++
  > 5 │     }
  > 6 │   }
  > 7 │ }
      │ ^
    8 │ 
  
  ℹ Although the Options API is still supported by Vue, using the Composition API is recommended, and makes it possible to use Vue’s Vapor mode for better performance.
  
  ℹ Use <script setup> or defineComponent with a function signature to use the Composition API instead.

1
<script>
2
export default {
3
  computed: {
4
    doubled() {
5
      return this.count * 2
6
    }
7
  }
8
}
9
</script>

code-block.vue:1:16 lint/style/noVueOptionsApi ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Using the Options API is not allowed.
  
  > 1 │ export default {
      │                ^
  > 2 │   computed: {
  > 3 │     doubled() {
  > 4 │       return this.count * 2
  > 5 │     }
  > 6 │   }
  > 7 │ }
      │ ^
    8 │ 
  
  ℹ Although the Options API is still supported by Vue, using the Composition API is recommended, and makes it possible to use Vue’s Vapor mode for better performance.
  
  ℹ Use <script setup> or defineComponent with a function signature to use the Composition API instead.

1
<script>
2
export default {
3
  mounted() {
4
    console.log('Component mounted')
5
  }
6
}
7
</script>

code-block.vue:1:16 lint/style/noVueOptionsApi ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Using the Options API is not allowed.
  
  > 1 │ export default {
      │                ^
  > 2 │   mounted() {
  > 3 │     console.log(‘Component mounted’)
  > 4 │   }
  > 5 │ }
      │ ^
    6 │ 
  
  ℹ Although the Options API is still supported by Vue, using the Composition API is recommended, and makes it possible to use Vue’s Vapor mode for better performance.
  
  ℹ Use <script setup> or defineComponent with a function signature to use the Composition API instead.

1
import { defineComponent } from 'vue'
2

3
defineComponent({
4
  name: 'MyComponent',
5
  data() {
6
    return { count: 0 }
7
  }
8
})

code-block.js:3:17 lint/style/noVueOptionsApi ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Using the Options API is not allowed.
  
    1 │ import { defineComponent } from ‘vue’
    2 │ 
  > 3 │ defineComponent({
      │                 ^
  > 4 │   name: ‘MyComponent’,
  > 5 │   data() {
  > 6 │     return { count: 0 }
  > 7 │   }
  > 8 │ })
      │ ^
    9 │ 
  
  ℹ Although the Options API is still supported by Vue, using the Composition API is recommended, and makes it possible to use Vue’s Vapor mode for better performance.
  
  ℹ Use <script setup> or defineComponent with a function signature to use the Composition API instead.

Valid

1
<script setup>
2
import { ref } from 'vue'
3
const count = ref(0)
4
</script>

1
<script setup>
2
import { ref, computed } from 'vue'
3

4
const count = ref(0)
5
const doubled = computed(() => count.value * 2)
6
</script>

1
<script setup>
2
import { onMounted } from 'vue'
3

4
onMounted(() => {
5
  console.log('Component mounted')
6
})
7
</script>

useVueVapor: Enforces the use of Vapor mode in Vue components