---
# Don't modify this file manually. This file is auto generated from source, and you will lose your changes next time the website is built.
# Head to the `biomejs/biome` repository, and modify the source code in there.

title: noVueVIfWithVFor
description: Learn more about noVueVIfWithVFor
---
import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
<TabItem label="HTML" icon="seti:html">
:::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.6`
- Diagnostic Category: [`lint/nursery/noVueVIfWithVFor`](/reference/diagnostics#diagnostic-category)
- This rule doesn't have a fix.
- The default severity of this rule is [**information**](/reference/diagnostics#information).
- This rule belongs to the following domains:
  - [`vue`](/linter/domains#vue)
- Sources: 
  - Same as [`vue/no-use-v-if-with-v-for`](https://eslint.vuejs.org/rules/no-use-v-if-with-v-for)

## How to configure
```json title="biome.json"
{
	"linter": {
		"rules": {
			"nursery": {
				"noVueVIfWithVFor": "error"
			}
		}
	}
}

```
## Description
Disallow using `v-if` and `v-for` directives on the same element.

There are two common cases where this can be tempting:

- To filter items in a list (e.g. `v-for="user in users" v-if="user.isActive"`). In these cases, replace users with a new computed property that returns your filtered list (e.g. activeUsers).
- To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the v-if to a container element.

## Examples

### Invalid

```vue
<TodoItem
    v-if="complete"
    v-for="todo in todos"
    :todo="todo"
/>
```

<pre class="language-text"><code class="language-text"></code></pre>

### Valid

```vue
<ul v-if="complete">
    <TodoItem
        v-for="todo in todos"
        :todo="todo"
    />
</ul>
```

## Related links

- [Disable a rule](/linter/#disable-a-rule)
- [Configure the code fix](/linter#configure-the-code-fix)
- [Rule options](/linter/#rule-options)
- [Source Code](https://github.com/biomejs/biome/blob/main/crates/biome_html_analyze/src/lint/nursery/no_vue_v_if_with_v_for.rs)
- [Test Cases](https://github.com/biomejs/biome/blob/main/crates/biome_html_analyze/tests/specs/nursery/noVueVIfWithVFor)

</TabItem>
</Tabs>