The Vuetify rating system seems to be having trouble displaying

I've integrated the Vuetify rating component into my app (https://vuetifyjs.com/en/components/ratings#ratings), but I'm facing an issue. Despite having Vuetify 1.5.5 installed and working with other components like buttons, the stars in the rating component are not being displayed, only the text appears.

Does anyone have any suggestions on how to resolve this? I couldn't find any helpful information online. Alternatively, if someone could recommend a different Vue rating component that is stable, that would be great too.

This is the section of code where I am using the rating:

<div>
    <span class="headerText">Dataset Product</span>
    <span class="headerDesc">Short description</span>
    <span class="headerDesc">@georgeBush.</span>
    <v-rating v-model="rating"></v-rating>
 </div>

Here is my main.js file which includes the import for Vuetify CSS:

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

I have also attached a screenshot showing how the rating component was rendered without the stars:

See the screenshot here

javascriptcssvue.jsvuetify.js

Answer №1

Could it be that you forgot to include the Material Icons library in your project? Here's the link to download it:

I encountered the same issue when I omitted it from a Codepen experiment.

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

Enhanced customization of material-ui styles

After exploring various resources on styling overrides, I encountered a unique challenge. I am engaged in crafting styled material-ui components and integrating them across different sections of my application. My objective is to enable the customization o ...

cssreactjsmaterial-ui

Adding a Stripe pay button using Jquery append results in the return of an [object HTMLScriptElement

I'm currently working on dynamically adding the Stripe pay with card button through jQuery. I've decided to append it because I only want it to show up once a specific condition is met by the user, as well as due to the fact that the pricing can ...

javascriptphpjquery

Encountering errors with CORS middleware when attempting to make a POST request to

I've developed a CORS middleware to prevent "CORS error" for all APIs. Here's my middleware code: $response = $next($request); $response->headers->set('Access-Control-Allow-Origin', '*'); $response->headers->set(&a ...

laravelvue.jsnginxcors

What is the most efficient way to retrieve the key at a specific index within a JavaScript map object?

If I have the map object shown below: const items = new Map([['item1','A'], ['item2','B'], ['item3', 'C']]) I am trying to retrieve the key at index 2. Is there a method other than using a for ...

javascriptecmascript-6

When I try to post using the raw feature in Postman in Node.js, the post ends up empty

My API is supposed to receive data for saving in the database. However, when I call the PUT method, my req.body.nome returns empty. It works fine with form-urlencoded, but I've tried using body-parser and it's deprecated. Here is my request usin ...

javascriptnode.jsexpress

AngularJS's angular.element is currently accessing the current Document Object Model

While experimenting with angular.element, I was curious about accessing the current DOM from an ng-click event. Is there a way to do this? For example: <div ng-click="angular.element(curElement).parent()..."></div> How can I retrieve the cur ...

javascriptangularjs

What could be causing my CSS to not display properly on GitHub Pages?

Currently working on a web-based game project called Sweet Shoppe, and utilizing GitHub Pages for hosting. However, encountered an issue where the CSS does not seem to be functioning properly on GitHub Pages. Attempted placing the CSS file in the main rep ...

cssgithubgithub-pages

Move the Div element up and down when clicked

When a tag is clicked, the corresponding div opens and closes. I would like the div to slide down and up slowly instead of appearing immediately. <a href="" class="accordion">Click here</a> <div class="panel" id="AccordionDiv"> ...

javascriptjqueryhtmlcssangularjs

Exploring the possibilities of utilizing dynamic components in Nuxt.js 3

I am attempting to display dynamic components but it is not functioning as expected. <component :is="comp" /> The variable comp contains the name of the component during the process (CardComponent). No error messages are being shown and n ...

vue.jsnuxt3

Learning how to integrate Next.js, React.js, and Redux into an HTML page for an enhanced user

My current project is built on Asp.Net MVC, but the technology used is not crucial. I integrated react.js and redux for searching a section of my html page using a cdn link. Now, I am considering deploying the server side of the application with next.js. ...

javascriptreactjsasp.netreduxnext.js

Clicking two times changes the background

I am facing an issue with three boxes on my website. Each box is associated with a corresponding div. When I click on any box, the div displays and the background color turns red. However, when I click on the same box again, the div disappears but the back ...

javascripthtmlcss

Customizing AxiosRequestConfig with Axios in TypeScript can greatly enhance the functionality and

Currently working with React and Axios. Lately, I've been experimenting with custom configurations in Axios as shown below: import $axios from 'helpers/axiosInstance' $axios.get('/customers', { handlerEnabled: false }) However, wh ...

javascriptreactjstypescripttypesaxios

CSS technique to display background on hover

My website has a bootstrap 'More' dropdown feature on the left navigation bar. However, there is an unwanted background hover effect that I can't seem to remove. Despite removing all background hovers from my CSS, the issue persists. Can any ...

css

What is the best way to accomplish this in Next.js?

I am working on a NextJs application and I need to include a new route /cabinet with its own navigation. The challenge is that the application already has a navigation bar defined in _app.js. Is it possible to create a similar setup like _app.js for /cab ...

javascriptreactjsnext.js

Node version 6.11.0 experiencing JavaScript heap error even with zero memory usage in the program

Encountering an out of memory error even though only two variables (i & j) are being used. Can someone please provide clarification? I am not storing anything in memory or saving it to any storage; whatever is generated is outputted to the console and the ...

javascriptnode.jsmemory

The div element with the id "wrapper" is not functioning properly within the box model

I have defined an ID wrapper in CSS: #wrapper { position: relative; background: yellow; -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); width: 960px; padding: 40px 35px 35px ...

javascriptjqueryhtmlcss

Receiving multiple NodeJS Responses through AJAX for a single request

I have been working on a WebApp that involves heavy AJAX calls from the frontend and NodeJS Express at the backend. Here is a glimpse of my Frontend Code- Below is the global AJAX function I consistently use in all my projects: function _ajax(params = {}, ...

javascriptnode.jsajaxexpress

Is there a difference in font size between Firefox and Webkit browsers?

The issue with different fonts (Myriad Pro) displaying in Firefox and Webkit browsers (such as Chrome and Safari) has been noticed. Testing on Internet Explorer has not yet been conducted. form.standard.small input[type=submit] { width: 104px; h ...

cssfontscross-browserfont-face

Exploring the Power of Jasmine Testing with Ternary Conditions

Imagine a scenario where we are working with the following snippet of JavaScript code. object = _.isUndefined(object) ? '' : aDifferentObject.property; Is it possible to write a Jasmine test that covers both scenarios? Do we need to use two se ...

javascripttestingjasmineistanbul

When an element with a border attribute is hovered over, it shifts position

When I hover over an li-element, I want to apply borders at the top and bottom. Here's the code snippet: #overview li:hover { background: rgb(31, 31, 31); border-top: 1px solid white; border-bottom: 1px solid white; } Check out this JSFi ...

htmlcss