Customizing active-class in Vuetify

How do I customize the appearance of my v-list-item-group when it is in the active state?

<v-list>
   <v-list-item-group v-model="day" color="green">
     <v-list-item v-for="(item, i) in items" :key="i">
        <v-list-item-content>
           <v-list-item-title v-text="item.day"></v-list-item-title>
           <v-list-item-title v-text="item.title"></v-list-item-title>
           <v-list-item-subtitle v-text="item.date"></v-list-item-subtitle>
        </v-list-item-content>
    </v-list-item>
   </v-list-item-group>
</v-list>

This is the desired result.

https://i.stack.imgur.com/rP44a.png

I have attempted to apply custom styles using CSS but nothing seems to work:

.v-list-group-active {
  color: green;
}
cssvue.jsvuejs2vuetify.js

Answer №1

option 1 - customized style

Typically, it's recommended to create a specific class for the list to avoid affecting other parts of the page with these styles. 

.red_list .v-list-item-group .v-list-item--active{
  background-color: red;
  color: white;
}

Sample code snippet:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    item: 1,
    items: [
      { text: 'Real-Time', icon: 'mdi-clock' },
      { text: 'Audience', icon: 'mdi-account' },
      { text: 'Conversions', icon: 'mdi-flag' },
    ],
  }),
})
.red_list .v-list-item-group .v-list-item--active{
  background-color: red;
  color: white;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82f4f7e7f6ebe4fbc2b0acb0acb0b2">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9990918bbfcbd187">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet"/>


<div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
      max-width="300"
      tile
    >
      <v-list class="red_list">
        <v-subheader>REPORTS</v-subheader>
        <v-list-item-group v-model="item" color="primary">
          <v-list-item
            v-for="(item, i) in items"
            :key="i"
          >
            <v-list-item-icon>
              <v-icon v-text="item.icon"></v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfc9cadaff8d91c7">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b7d7e6e7f626d724b39253925393b">[email protected]</a>/dist/vuetify.min.js"></script>

option 2 - based on color property

An alternative approach to keep the code DRY (Don't Repeat Yourself). 

<v-list-item-group v-model="item" color="red">
...rest of the code

Assigns the specified color to the element - it can be a material color name (e.g., success or purple) or a CSS color code (#033 or rgba(255, 0, 0, 0.5)). For a list of predefined colors, refer to the official documentation.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [
      {
        icon: 'mdi-inbox',
        text: 'Inbox',
      },
      {
        icon: 'mdi-star',
        text: 'Star',
      },
      {
        icon: 'mdi-send',
        text: 'Send',
      },
      {
        icon: 'mdi-email-open',
        text: 'Drafts',
      },
    ],
    model: 0,
  }),
})
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddaba8b8a9b4bba49deff3eff3efed">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81e7eeeff5c1b5aff9">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet"/>
<div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
      max-width="500"
    >
      <v-list>
        <v-list-item-group v-model="model" color="red">
          <v-list-item
            v-for="(item, i) in items"
            :key="i"
          >
            <v-list-item-icon>
              <v-icon v-text="item.icon"></v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6808393b6c4d88e">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83f5f6e6f7eae5fac3b1adb1adb1b3">[email protected]</a>/dist/vuetify.min.js"></script>

Answer №2

Just implemented this on the v-list-item instead of the v-list-group

.v-list-item--active {
  background-color: red;
}

Surprisingly, it was successful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the CSS Transition Solely Active for the Introductory Animation?

I'm currently looking to enhance the smoothness of div expansion and contraction on hover using CSS transitions. However, I have noticed that the Transition property only seems to affect the entry animation (i.e., when the mouse hovers and the div exp ...

javascripthtmlcssreactjsweb

Build a photo carousel similar to a YouTube channel

Is there a way to create an image slider similar to the one on YouTube channels? I've noticed that when there are multiple videos on a channel, YouTube displays them in a slider with back and forth buttons to navigate through the videos that aren&apos ...

javascriptjquerycssimageslider

Vue: Exploring the Restriction of Using refs in Component Templates

I can't seem to figure out Vue refs. Whenever I define them in my main Vue instance's template, they work perfectly fine. However, when I define them within a component template, they don't seem to work at all. What could be causing this iss ...

vue.jsvue-component

Storing and Manipulating a JavaScript Object with Vuex: A New Perspective

Consider a hypothetical JavaScript object class like this: class Car { var engineTurnedOn = false; ... public turnEngineOn() { engineTurnedOn = true } } If I want to turn the engine on, should I create an action called 'turnEngineOn&ap ...

javascriptvue.jsvuex

Achieving a Pushing Footer Design with Content

Hey guys, I'm working on a website and I'm having some trouble with the footer. It's sticking to the bottom of the page, but the content is overflowing it. Check out this screenshot for reference: . Here is my HTML/CSS code for the footer: ...

htmlcssfooter

Transmitting data from Vue.js to an API endpoint

I am facing a challenge while attempting to send data to an API endpoint. The method I have in place to trigger this action seems to overlook the user ID and form data. Currently, I have a form that serves the purpose of updating user information through ...

vue.jsaxiosvuejs3

How to Create a Compact JavaFX ComboBox

I'm attempting to create a more compact version of the ComboBox, but no matter what I try, the space between the text and arrow button remains consistent. When using the following CSS: .combo-box-base > *.arrow-button { -fx-padding: 0 0 0 0; ...

csslayoutcomboboxjavafxsize

Is it possible to restrict the application of jquery .css() to a particular media query only?

Whenever a user's browser width is below 1160px, a media query is set up to hide my website's right sidebar. They can bring it back by clicking on an arrow icon, causing it to overlap the content with absolute positioning. To achieve this functi ...

javascriptjqueryhtmlcssmedia-queries

Class-driven dynamic CSS

Recently, I came across a JSP code snippet that looks like this: <table id="mytable" cellspacing="0"> <tr data-depth="0" class="collapse level0"> <td></td> <td></td> <td></td> </tr> ////... /...// < ...

htmlcssjsp

"Encountering Server Unavailability Issue while Deploying Vue App to Azure App Service on Linux

Working on developing a web app with Vue and Azure App Service on Linux has been successful locally. However, encountering a "Service Unavailable" error when attempting to build it on the server. The project is utilizing NUXT, with the port currently set ...

azurevue.jsnuxt.js

Stellar.js is malfunctioning

I've been attempting to implement a parallax effect using Stellar.js with two image tag elements, but I'm encountering issues. Despite trying various configurations, including following the Stellar.js creator's tutorial scripts closely, noth ...

javascriptjqueryhtmlcss

Place an image on top of adsense

Is there a way to overlay an image on top of Google AdSense ads in order to track user clicks? I am trying to implement an onclick method for when someone clicks on the ads. .ad-alert { width: 728px; height: 400px; background: #cccccc; mar ...

htmlcssadsense

Issue with VueJS rendering data within a for loop

As a newcomer to VueJS, I appreciate your patience as I navigate through this. Let me provide as much detail as possible. I am currently working on a Vue app that needs to retrieve a response from a server, iterate through the data, and set a Vue data var ...

javascriptjsonvue.jsscopeaxios

A guide to incorporating VueSweetalert2 into your Quasar Project

I'm having trouble setting up a Sweetalert2 modal to pop up. I used npm i vue-sweetalert2 to install it, but I'm encountering two errors. One says "The "VueSweetalert2" component has been registered but not used." and the other indicates that thi ...

vue.jsquasarvue-sweetalert2

Authenticate users using Laravel's default authentication system, then serve the Vuejs single page application only to logged

Currently working on a Single Page Application using the default Laravel scaffolding: // Setting up basic scaffolding... php artisan ui vue // Implementing login / registration features... php artisan ui vue --auth These commands provide a solid foundati ...

laravelvue.jswebpack

Delivering Django and Vue applications efficiently through an Nginx server

I have a website that utilizes Django for the API and Vue for the frontend. When deploying the site, my current process involves: Generating a production build of the Vue app (npm run build) Transferring the Vue dist folder to a specific directory within ...

djangovue.jsnginx

Continuously animate a series of CSS properties

Here's the code snippet I'm working with: @keyframes ball1 { 0% { transform: translateX(0px); opacity: 0%; } 50% { opacity: 100%; } 100% { transform: translateX(120px); opacity: 0%; } } @keyframes ball2 { 0 ...

javascriptcssanimation

Learn the proper way to write onClick in tsx with Vue 2.7.13

current version of vue is 2.7.13 Although it supports jsx, I encounter a type error when using onClick event handling. The type '(event: MouseEvent) => Promise<void>' cannot be assigned to type 'MouseEvent' Is there a correct ...

javascripttypescriptvue.jsvuejs2tsx

Feeling lost when it comes to forms and hitting that submit button?

Below is a sample form structure: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST"> <div align="center"> <br><br; <br& ...

javascripthtmlcss

Deceptive responses in Laravel when using axios in Vue.js

Here is the code snippet from my Laravel controller: public function display($postId){ $reaction = Reaction::where([ 'post_id' => $postId, 'user_id' => auth()->id(), ])->first(); ...

laravelvue.jsaxios