Utilizing v-chip as an information banner within a Vue-Leaflet map has been the focus of my project. The chip design is based on this example here, and I have been working to adapt it accordingly. Locally, I successfully achieved my intended goal, demonstrated below;
https://i.sstatic.net/fogXe.png
However, an issue arises when deploying my new v-chip feature with firebase hosting, resulting in a broken chip as seen below;
https://i.sstatic.net/BhxQi.png
Oddly enough, the production version does not display as expected. You can view the current deployed implementation here. Here is the Repository link and the code snippet between lines 72 and 79 found in this file,
<div class="text-center">
<span class="ma-2 v-chip v-chip--outlined v-chip--pill theme--light v-size--default deep-purple accent-4 deep-purple--text text--accent-4">
<span class="v-chip__content">
<i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-information-outline theme--light"></i>
${placeholder}
</span>
</span>
</div>`
Steps Taken So Far
- I compared the classes used in both the CodePen example and the Deployed app to identify any differences, but they were identical. This ruled out missing classes as the cause.
- In an attempt to troubleshoot, I directly copied the CSS from the inspected classes in the CodePen example and implemented it into the local repository for comparison.