Vuetify v-spacer is not working with v-tabs-CodePudding

I need to place logo on left side of navbar and tabs on the right side. I use v-space to do it but it doesn't work. I checked - it works fine with v-btn but not with v-tabs. I use Vue 2 and Vuetify 2.6:

App.vue

<template>
  <v-app>  
    <v-main>
      <Navbar />
      <router-view/>
    </v-main>
  </v-app>
</template>

Navbar.vue

<template>
  <v-app-bar 
    app
    dense
    dark >

        <v-img
          alt="Vuetify Logo"
          
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

    <v-spacer></v-spacer>   

    <v-tabs>
      <v-tab>Project</v-tab>
      <v-tab>Users</v-tab>
      <v-tab>Settings</v-tab>
    </v-tabs> 

  </v-app-bar>
</template>

This is what I got:

I wanted menu (tabs) to be aligned to the right. Why v-spacer is not working here? I also checked this topic https://github.com/nuxt-community/vuetify-module/issues/165 but it also does not solve the issue.

CodePudding user response：

Check this codesandbox I made: https://codesandbox.io/s/stack-70115344-jzhii?file=/src/components/Navbar.vue

There's no need to use a v-spacer. You only need to set the right prop to the v-tabs component.

    <v-tabs right>
      <v-tab>Project</v-tab>
      <v-tab>Users</v-tab>
      <v-tab>Settings</v-tab>
    </v-tabs>

CodePudding user response：

Try <v-tabs right>

<template>
  <v-app-bar 
    app
    dense
    dark >

        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

    <v-tabs right>
      <v-tab>Project</v-tab>
      <v-tab>Users</v-tab>
      <v-tab>Settings</v-tab>
    </v-tabs> 

  </v-app-bar>
</template>