The unique Phanto application design implemented in a Vue CLI3 project using Vuetify framework

I have recently started a vuetify project using Vue CLI3.

It seems that the styling of my body fonts is being overridden by a mysterious class called .application. Despite my efforts, I cannot locate this class anywhere in the framework code.

In addition, I have a file named vuetify.ts with the following contents:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'md',
})

How can I incorporate a custom pre-made SCSS file as the main stylesheet and make it take precedence over the default font families set by the framework?

I attempted a solution which did not work as expected, you can find more about it here: https://medium.com/@jacobedawson/vuetify-vue-cli-3-change-default-font-a70c22adc55

Thank you!

UPDATE

Below is an excerpt from the existing SCSS file that I plan to use:

@import url("https://use.typekit.net/upu2cxc.css");
$font-family-sans-serif:      proxima-nova, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-sans-serif-extra-condensed:  proxima-nova-extra-condensed,  -apple-system, sans-serif;

$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-serif:           Georgia, serif;
$font-family-base:            $font-family-sans-serif;
...
vue.jsvuetify.js

Answer №1

When working with a typical vue cli setup, the app.vue file serves as the main hub for maintaining app-wide styles.

To see an example of this in action within app.vue:

<style lang='scss'>
@import url("https://use.typekit.net/upu2cxc.css");
$font-family-sans-serif:      proxima-nova, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-sans-serif-extra-condensed:  proxima-nova-extra-condensed,  -apple-system, sans-serif;

$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-serif:           Georgia, serif;
$font-family-base:            $font-family-sans-serif;
</style>

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

Looking to adjust the title font size when exporting DataTable to Excel?

Would like to customize the title of an excel file exported from Datatable. I attempted to implement a solution found on a stackoverflow post, but it ended up applying the customization to the entire sheet. $("#datatable").DataTable({ ...

javascriptexcelvue.jsdatatables

Eliminate the space between the navigation bar and carousel when using Materialize with Vue.js and Laravel

I am facing an issue with the gap between the navbar and carousel in my materialize design. I have implemented Vue components for each div and Laravel as the backend. Using Sass for CSS preprocessing, I attempted to adjust the margins for the body, navbar, ...

csslaravelvue.jssassmaterialize

The integration of Quill.js is problematic within a Vuetify v-dialog component

As I attempt to integrate a Quill.js editor within a Vuetify v-dialog, I'm encountering an issue where the toolbar dropdowns fail to close when the user clicks outside of the currently open dropdown. You can view my implementation on JSFiddle: https: ...

vue.jsvuetify.jsquill

Creating a radial progress chart using Plotly JavaScript

I recently started working with the Plotly library and now I need to display a circular progress graph in Vuejs 2, like the one shown below. While Plotly is a comprehensive tool, I have not come across an example that matches this specific design using Ja ...

javascriptvue.jsplotlyplotly.js

Designing personalized plugins with Typescript in Nuxt

In my Nuxt project, I have implemented a custom plugin file that contains an object with settings called /helpers/settings: export const settings = { baseURL: 'https://my-site.com', ... }; This file is then imported and registered in /plugi ...

javascripttypescriptvue.jspluginsnuxt.js

Exploring Data Objects in Vue.js

I have a data() object in my Maincomponent.vue. Inside the data(), there is an array named myDatabase that contains multiple objects. My goal is to utilize methods to access the fields within myDatabase. I am looking to create functionality to toggle the ...

vue.jsvuejs2nuxt.js

VueJS does not refresh other components in the application

I am working with two components. Let's start with Component 1: <template> <div> <div class="form-group"> <label for="group">Category</label> <select name="category" v-model="category" @change="setCategory(ca ...

javascriptvue.js

How to Send an Ajax Request from a Vue.js Application to WordPress

I've designed a custom page template to seamlessly integrate a vue app into an existing website <?php /* * Template Name: Registration Form */ get_header(); ?> <div id="app"></div> <?php get_footer(); ?> After some ...

phpajaxwordpressvue.jsaxios

Using a string in VueJS to assign a variable name

Can the variable myvar be initialized using a string in this code snippet? <script> export default { data() { return { myvar: 'foo' }; } } </script> I attempted to achieve this with no success: e ...

vue.js

Set the :value for a specific member in an array or object within a Vue 3 - Vuetify input component

I am attempting to retrieve the value of different inputs such as combo boxes, text fields, and switches on these dynamic forms, but I am not having any success with it. Custom Template: VDialog(v-model='vDialogTrigger') VCard VCardTitle ...

vue.jsvuejs3vuetify.js

npm package construction failed

https://i.stack.imgur.com/bk9r2.png Whenever I attempt to execute the command npm run watch, I consistently encounter this error message. Can someone please assist me with resolving this issue? Click on the image to view the problem. Thank you in advance. ...

laravelvue.jsnpm

What is the best way to showcase Vue data of a selected element from a v-for loop in a

Here is an example of how my json data is structured. I have multiple elements being displayed in a v-for loop, and when one is clicked, I want to show specific information from that element in a modal. [{ "id": 1, "companyNa ...

javascriptvue.jsvuejs2vue-componentbootstrap-vue

The thread_id_key value must not be 0x7777 in order to execute the function find_thread_id_key, as specified in the ../src/coroutine.cc

I am currently working on a Vue project and encountered an issue after running npm run serve. The error message I received is as follows: 66% building 670/715 modules 45 active /Users/bytedance/go/src/code.byted.org/ad/omega_fe/node_modules/echarts/lib/cha ...

node.jsvue.jsnpmvue-component

How can I send an error message from a Laravel controller and handle it in InertiaJS using the form helper?

I am facing an issue where I need to handle errors in the controller, but they are not Laravel validation errors. This prevents me from accessing them using the inertiajs form helper without using props.errors. How can I return the error in a way that allo ...

laravelvue.jsinertiajs

How do you trim a string and display the final 3 characters?

When dealing with a list of objects, I want to ensure that the chain of tasks does not become too long and break the table or appear aesthetically unpleasing. Therefore, my goal is to trim the tasks and display only the last 3. In the image below, multiple ...

javascriptvue.jsvuejs2

Using Vue.js to conditionally render content based on changes in a variable

I am facing a challenge in rendering a new element once the boolean variable waiting changes to true. The issue arises when transitioning from one v-if statement to another, as the boolean does not update until the first statement is completed. How can I s ...

javascriptvue.jsvuejs2

Detecting a component within a slot using Vue

Within my tile component, there is a slot where users can input various html tags, including a specific component called <listitem />. Is there a way to detect if this special component is used within the slot? <div class="tile"> &l ...

vue.jscomponents

Adjust the scroll position when the height of a div is modified

Imagine we have a large div A with a height value and below it are other divs B, C, and more. If the user is viewing divs B or C, and A reduces its height by half, the scrolling position will remain the same. However, divs B and C will move up by that amo ...

javascripthtmlcssvue.js

Let the Vuejs transition occur exclusively during the opening of a slide

Trying to implement a smooth transition when the toggle button is clicked. Successfully applied the transition effect on the slider, but struggling to animate the text inside the div.hello class upon sliding open. <transition name="slide"> <a ...

javascriptvue.jsvuejs2

Vue.JS component containing DOM elements outside of the designated $el scope

Transitioning from a custom front-end framework to Vue is a new adventure for me. Our website is gradually integrating Vue, and as we refactor old components, I've encountered an issue. My question is: Can a component create DOM elements outside of i ...

javascriptvue.jsvue-component