Vuetify 3 Gutters-CodePudding

I'm trying to create a v-row without gutters (red background) in Vuetify 3 and it's driving me insane. I'd like it to contain the entire width of the screen so there are no spaces between. Can anyone help out?

<template>
  <v-container fluid>
    <v-main>
      <div >
        <row no-gutters>
          <v-col>
            <h1>Have a Showmax Festive</h1>
            <div v-for="image in images" :key="image">
              <v-img :src="image"></v-img>
            </div>
          </v-col>
        </row>
      </div>
    </v-main>
  </v-container>
</template>

I've tried using the no-gutters props according to the documentation on Vuetify and container-fluid is still nogo.

CodePudding user response：

I figured it out!!

I was supposed to use div

Instead of

Maybe its something wrong with my personal Vuetify setup though but this seems to work perfect for me.

CodePudding user response：

You have a typo, instead of <v-row no-gutters> you have <row no-gutters>.

Just changes both instances of row, to v-row and you should be good to go :)

This typo was unfortunate, because <row> is still valid, if you had missed v and had <-row> your IDE/Browser should've let you know lol.