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>
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>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"/>