Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Vuetify v-spacer is not working with v-tabs

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

<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-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:

enter image description here

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.

>Solution :

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> 
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading