I have the following in VUE 3 where I’m trying to put items into a bootstrap row and each row should contain 6 items. However…. VUE doesn’t like me doing this! It complains that my first contains a missing closing tag (which it does by design!) : [plugin:vite:vue] Element is missing end tag.

How would I need to restructure this to play ball nicely in VUE>

<main role="main" class="container-fluid">
    <div class="container">
        <template v-for="(item, index) in items">
            <template v-if="index == 0 || index % 6 == 0">
                <b-row>
            </template>
                <b-col>
                {{ item.name }}
                </b-col>
            <template v-if="(index != 0 && index % 6 == 0) || index == items.length">
                </b-row>
            </template>
        </template>
    </div>
</main>