Search code examples
vue.jsvuetifyjs3

Issue defining configuration defaults for Vuetify 3

NOTE: The question has been edited/updated as per @Moritz Ringler's answer.

In my Laravel 10, Vuetify 3 project, I am using many components that use several <v-text-field>, <v-textarea>, <v-select>, etc. I want to use the same settings for density and variant with all components, e.g.

<v-select
     density="compact"
     variant="outlined"
     v-model="lu_duration_id"
     :items="lu_duration"
     label="Duration"
></v-select>

I have tried to define these in app.js, as shown:

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'


// For Vuetify material icons
import { aliases, mdi } from 'vuetify/iconsets/mdi'
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css'
const icons = {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    }
  }

 // default options
 const defaults = {
    global: {
        variant: "outlined",
    },
    VSelect: {
        density: "compact",
    },
};


const vuetify = createVuetify({
    components,
    directives,
    icons,
    defaults,
    })

The defaults option, when included with createVuetify provides the desired affect, i.e. I see outlined effect on all components. However, the css (colours and look of all components gets messed up. For example, here is an image of a page before using defaults in createVuetify:

enter image description here

And, this is image of the page after including defaults:

enter image description here

The look of <v-select> changes significantly. Here is the image ofa page before using defaults

enter image description here

And this is an image after including defaults

enter image description here

One more thing I have observed that even before including defaults, look of my components is slightly different from those on the vuetify website. Notice that in the following image, the first <v-text-field> which has focus, has a thick border and the border has no radius. Even other components have a dark bottom border. (I am using version 3.2.3 of Vuetify installed using npm)

enter image description here

Any tips to fix this issue is highly appreciated.

Solution

  • I think you are looking for the defaults property:

    export default createVuetify({
  defaults: {
    global: {
      variant: 'outlined',
    },
    VSelect: {
      density: "compact",
    }
  }
}

    The props in global will be set for all components that understand these props. Using the PascalCase name, you can set defaults for individual components.

    Have a look at the snippet:

    const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify({
  defaults:{
    global:{
      density: "compact",
      variant: 'outlined',
    }
  }
})
createApp({}).use(vuetify).mount('#app')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main class="pa-4">
      <v-text-field label="label" :modelValue="value"/>
    </v-main>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>