How to adjust divider witdh in vuetify component? - css

Question

I have using Nuxt.js and Vuetify.js in my project.
I need to adjust v-divider width, so I tried to write css in my code.
But it didn't work.
Does anyone teach me how to change v-divider width in Vuetify components?
<template>
<divider class="test"/>
</template>
<style lang="scss" scoped>
.test{ width:100px}
</style>

Answer 1

vuetify <v-divider> uses border properties. So instead of width you should specify borders.
const opts = {}
Vue.use(Vuetify)
new Vue ({
el: '#app',
vuetify: new Vuetify(opts),
})
.test {
border-width: 4px !important;
border-color: black !important;
height: 100%;
}
body, .container, html {
width:100%;
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app" class="container">
<v-app>
<v-divider class="test" vertical></v-divider>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

Answer 2

Just a typo of <divider/> instead of <v-divider/>.
Alternatively (and not really recommended), you can set the width by specifying the width attribute of <v-divider/> since it uses <hr/> element. However, this approach seems to be deprecated and the best approach is to style it using css.
<v-divider width="100"/>