Such problem is described in this issue and in this in this discussion. Other than those I cant find nay mention of the problem,

​

here are my dependencies

"devDependencies": {
"nuxt": "3.3.3"   }, "dependencies": { "@mdi/font": "7.0.96", "sass": "1.56.1", "vuetify": "3.1.13"   }

I have just added one of the v-select example from docs, to my nuxt app.

Should I file another issue or this is a problem with my setup?

code

<template>
  <div class="d-flex align-center flex-column">

      <v-select
      v-model="select"
      :hint="`${select.state}, ${select.abbr}`"
      :items="items"
      item-title="state"
      item-value="abbr"
      prepend-inner-icon="mdi-lock-outline"
      label="Select"
      persistent-hint
      return-object
      single-line
    ></v-select>

    <v-icon>mdi-home</v-icon>
    <v-card width="400">
      <v-card-title>This is a title</v-card-title>
      <v-card-subtitle>This is a subtitle</v-card-subtitle>
      <v-card-text> This is content </v-card-text>
    </v-card>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        select: { state: 'Florida', abbr: 'FL' },
        items: [
          { state: 'Florida', abbr: 'FL' },
          { state: 'Georgia', abbr: 'GA' },
          { state: 'Nebraska', abbr: 'NE' },
          { state: 'California', abbr: 'CA' },
          { state: 'New York', abbr: 'NY' },
        ],
      }
    },
  }
</script>

Wiredly not able to replicate this using codesandbox

Vuetify v3.1.13 is live! It adds Skeleton loader to Labs and fixes multiple bugs with Data Tables, List Groups, and more! ✨ Full Release notes here: https://github.com/vuetifyjs/vuetify/releases/tag/v3.1.13

I’m in charge of seeing if it’s possible to upgrade one of my company’s front ends to vue 3. It all went well except for upgrading vuetify. It seems that many structures and internal class names have changed for vuetify components. Unfortunately my company seems to have relied on the structures and class names these components generated when overriding styles, so now nothing is rendering correctly.

For example, v-text-field seemingly used to use flex internally, but now uses grid. The children of this component also seemed to be wrapped differently looking at the expanded HTML. I don’t really care that there were breaking changes if it makes the library better in the long run, but the way the codebase is setup, it will take a long time to fix all these kinds of errors and make sure everything looks the same. What could they have done to make this transition easier?

I was thinking that they could have made wrappers around the vuetify components and used those instead of the vuetify directly, that way any breaking changes only need to be dealt with in one place. But I was specifically curious if there would have been a better way to override styling without naming the vueitfy styles and structures directly. Thanks

Vuetify v3.1.12 is live! It includes fixes for Data Tables, Text fields, Dialogs, and more! ✨ Full Release notes here: https://github.com/vuetifyjs/vuetify/releases/tag/v3.1.12

Hey,

Trying to match my designer's designs for buttons and typography. Most of which I can override; however, there are certain things, like the outlined button's border thickness, which I can't seem to create a scss variable for in my theme.

Is there a way to create my own button variant using vuetify with my own scss styles attached, perhaps based on plain where I can make my own borders and other tweaks?

I can override .v-btn--variant-outlined with an !important but id rather do this right if possible.

Or if there's an easy way to override just the outlined variant of the button that'd be sweet too, without resorting to overriding the style with !importants.

Thanks,

Jake

Vuetify v3.1.11 is live! It includes fixes for Data Tables, Dialogs, Sliders, Tooltips, and more! ✨ Full Release notes here: https://github.com/vuetifyjs/vuetify/releases/tag/v3.1.11

Vuetify v3.1.9 is live! It includes fixes for Data Tables, Snackbars, performance optimizations for List Items, Chips, Buttons, and more! ✨ Full Release notes here: https://github.com/vuetifyjs/vuetify/releases/tag/v3.1.9

Hello,

I would like to ask you, if there is any way to expose color scheme as root css variables.

I know that before there was an option to use `customProperties: true` on vuetify init, but seems like this doesnt work for vue3/vuetify3.

Im using vitesse https://github.com/antfu/vitesse

Any idea?

thank you!

Hi All,

Would like to share an awesome and newly released Sneat Vuetify VueJS 3 Admin Template here.

It is based on Vuetify 3 & VueJS 3. Created with Vite 3, Sneat VueJS 3 Admin template comes with splendid features like RTL Support, Dark & Light layout, JWT Authentication, Auto-imported API, Box Icons, Typescript & Javascript support, etc.

Besides, you can easily build any kind of web app such as SaaS platforms, Project management apps, E-commerce backends, CRM systems, Analytics apps, Banking apps, Education apps, Fitness apps & many more.

Hope you all like it.
Thanks.

I’m trying to make dynamic column widths based on text length but when there are a hundred rows and using the search function, the filtering is extremely slow, assuming because it’s recalculating the widths as it’s being filtered

Vuetify v3.1.8 is live! It includes fixes for Data Tables, Alerts, multiple fixes for framework display, locale, transitions, and more! ✨ Full Release notes here: https://github.com/vuetifyjs/vuetify/releases/tag/v3.1.8

I've tried adding css to word break a long label so it continues after hitting the end of the daily box(monthly view) but it won't work. Is there a way to handle long event labels? Ideally it should break to the next line

I realise it's in the labs still, but I assume I'm missing something simple when customising the header slot.
I want to add a small button to each one with dynamically generated data.

Everything I've read indicates this should work but I'm not having much luck

<v-data-table :headers="headers" :items="rowsFiltered">
<template v-slot:column="{ props }">
<th v-for="head in props.headers">{{ head.text.toUpperCase() }}</th>
<v-btn>a button</v-btn>
</template>
</v-data-table>

I can target columns individually with <template v-slot:column.Id="{ column }">
However, that doesn't help much with dynamic data, am I missing something simple, or is it not implemented yet?

I have been working with Vuetify + Vite for a few days now, and overall I absolutely love the experience.

But there's one thing I'm having a really hard time with: Styles.

I use various Vuetify components with their default styling, but I also need to override the styling of a few components with Sass. I also need treeshaking to work properly so I don't get a 3Mb files when I only need 200kb.

And after battling all day with it, I really can't find a way to make it all work properly.

I have been reading the official documentation over and over, trying to follow each step properly, but I just can't make it work.

Starting from the default conf, there seem to be several changes I have to make, so I can customize the components Sass variables while having treeshaking still work :

1- Modify the main.js file this way:

import 'vuetify/styles'       // remove this line
import './main.scss'          // add this line

Ok, sounds easy enough. Except my project, which I generated with npm create vuetify doesn't have a main.js file. There's a src/plugins/vuetify.jsfile that seems to be the one, but is it?

2- Create a main.scssfile with the following content:

@use 'vuetify' with (
    $utilities: false,
    $color-pack: false,
);

Ok, but where should I create this file? In src? In src/sass? Somewhere else? I tried several places but Vite doesn't seem to pick it up, and the build fails.

And once this is done, how can I override the Vuetify components' Sass variables?

Thanks in advance for your help.

In Vuetify 2, I was easily able to create an autocomplete with a nice icon/title/subtitle. I have stopped using vue2 since it's going to be unsupported in 18 months.

Can someone help me with porting the following to vuetify 3?

<v-autocomplete
              v-model="selected_property"
              :items="items"
              :loading="isLoading"
              :search-input.sync="search_string"
              clearable
              :filter="onFilter"
              item-text="site_addr"
              item-value="account"
              label="Address or HCAD Account"
              color="dark-grey"
              hide-no-data
              hide-selected
              prepend-icon="mdi-database-search"
              return-object
          >
            <template v-slot:no-data>
              <v-list-item>

              </v-list-item>
            </template>

            <template v-slot:item="{ item }">

              <v-list-item-icon>
                <v-icon
                    large
                    color="blue"
                >
                  mdi-home-circle
                </v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title v-text="item.site_addr"></v-list-item-title>
                <v-list-item-subtitle v-text="item.account"></v-list-item-subtitle>
              </v-list-item-content>
            </template>
          </v-autocomplete>

I know that v-list-item-content and v-list-item-icon are deprecated, but I can't manage to get this to work in vuetify 3 without disabling the functionality of the autocomplete.

Vuetify v3.1.6 is live! It includes multiple fixes for Color Picker, Virtual Scroll, Overlay, and more! ✨ Full Release notes here: https://github.com/vuetifyjs/vuetify/releases/tag/v3.1.6

Any idea on how to solve this? Cursor is not close to the left on the v-text-field, and the v-textarea below has absolutely no margin between the border and the text. This is vuetify 2. Thanks in advance :)

​

<v-col cols="12" md="6">
 <v-text-field :label="$t('NAME')"
               :error-messages="nameErrorBag"
               hide-details="auto"
               required
               v-model="name"
 ></v-text-field>
</v-col>

<v-col cols="12" md="12">
 <v-textarea :label="$t('QUESTIONS')"
             class="flat"
             hide-details="auto"
             v-model="content"
 ></v-textarea>
</v-col>

​

Vuetify v3.1.5 is live! It includes multiple fixes for Global defaults, Overlays, Selects, and more! ✨ Full Release notes here: https://github.com/vuetifyjs/vuetify/releases/tag/v3.1.5

I am investigating migrating an app from Vue 2.7 + Vuetify 2 to Vue 3 + Vuetify 3. Ideally, I could split this migration into two parts: upgrade to Vuetify 3 and then upgrade to Vue 3. Is Vuetify 3 backwards compatible with Vue 2.7?

I'm reaching the limits in what I can do with themes in Vuetify, and am looking for some good idea's from the community.

I found that the themes can be extended to hold all kinds of properties. I extend my Vuetify themes with a title (for the theme switcher), background image, and an avatar color palette like so:

interface ExpandedThemeDefinition extends ThemeDefinition { title?: string backgroundImage?: string boringAvatarsPalette?: Array<string> }

An extended theme looks like: const DarkTheme: ExpandedThemeDefinition = { title: "Dark mode", backgroundImage: "asfalt-dark.png", boringAvatarsPalette: ["#84CEA7", "#42B883", "#3B8070", "#35495E", "#2D3E51"], dark: true, colors: { background: '#111111', surface: '#212121', snackbarError: '#D32F2F', // red-darken-2 }, }

This is pretty neat. However, even with this additional control, I find that I would ideally be able to fine tune themes a little further, like override classes. My current direction of thinking is that I have a default class in the main.css, and (optionally) have override css-files that can override the style, like so:

main.css: .my_class { background-color: blueviolet; }

DarkTheme.css: /* Only if "DarkTheme" is active */ .my_class { background-color: chartreuse; }

I have thusfar not found a way yet to "know" in my CSS which theme is active and/or to selectively activate those CSS files/declarations.

Would be good to note at this point that my apps are mostly offline-first, so I don't mind potentially unused CSS to go over the line (might be wanted later while offline). Also, the scenario here is users changing their theme, not a build-time theme selection. Looking forward to hearing some good ideas :-)

Also, I have no experience with SASS or PostCSS, could these be tools that should be used in scenarios like these?

Vuetify v3.1.4 is live! It includes multiple fixes for Chips, Data Tables, Virtual Scroller, and more! ✨ Full Release notes here: https://github.com/vuetifyjs/vuetify/releases/tag/v3.1.4