src/content/docs/linter/rules/no-vue-options-api.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.3.12` - Diagnostic Category: [`lint/nursery/noVueOptionsApi`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - This rule belongs to the following domains: - [`vue`](/linter/domains#vue) ## How to configure ```json title="biome.json" { "linter": { "rules": { "nursery": { "noVueOptionsApi": "error" } } } }## 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
```vue
<script>
export default {
data() {
return { count: 0 }
}
}
</script>
<script>
export default {
methods: {
increment() {
this.count++
}
}
}
</script>
<script>
export default {
computed: {
doubled() {
return this.count * 2
}
}
}
</script>
<script>
export default {
mounted() {
console.log('Component mounted')
}
}
</script>
import { defineComponent } from 'vue'
defineComponent({
name: 'MyComponent',
data() {
return { count: 0 }
}
})
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
</script>
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log('Component mounted')
})
</script>