<p>I'm trying to upgrade from Vuetify/Vue 2 to 3. I'm not a front-end developer, just responsible for upgrading some old code to keep it functional. Unfortunately, the migration guide seems to assume some basic CSS knowledge and doesn't provide examples of how to fix everything that was removed. </p> <p>I'm trying to figure out how to migrate <code>rounded</code> and <code>flat</code> in the following code snippet: </p> <pre class="brush:php;toolbar:false;"><v-select class="mr-2 filter-custom-input" slot="prepend-inner" v-model="field" :items="fields" menu-props="auto" label="Field" hide-details single-line density="compact" rounded flat theme="dark" /></pre> <p>and <code>.v-application</code> (if needed) in this code snippet: </p> <pre class="brush:php;toolbar:false;"><style lang="scss" scoped> .v-application--is-ltr .v-list-item__icon:first-child, .v-application--is-ltr .mr { margin-right: 10px; } </style></pre> <p>Unfortunately, the only suggestion for these on the migration guide is: </p> <ul> The <li><code>rounded</code> attribute has been removed. Please apply the CSS class rounded corners to the menu content elements. For example: <code>.rounded-te</code></li> <li>Global styles that were previously included as <code>.v-application p</code> or <code>.v-application ul</code> are no longer included. If you need to add margin to <code>p</code>, or add left padding to <code>ul</code> and <code>ol</code>, add this in the root component's Manually set in the <code><style></code> tag. </li> </ul> <p>The above guidance on <code>rounded</code> simply replaces <code>rounded</code> with <code>.rounded-te</code> will not work (not to mention It is mentioned in another type of control). </p> <p>It says flat has been removed from some other controls and replaced by the "single variant attribute", but trying to replace <code>flat< with <code>variant="flat"</code> /code> gives me a syntax error.</p> <p>Thank you! </p> <p>(I originally asked this question here and someone suggested I split it into multiple questions)</p>