We Keep Coding

CSS is breaking in vuejs on reload of page

when i reload the page the css is breaking in vuejs
I tried to change the css from my app.vue but nothing happened it is having the same problem..

To avoid this, you can use v-cloak. This directive is used to hide an element until the Vue instance has finished compiling. This is useful when dealing with dynamic content that is generated by the Vue instance, and we want to avoid any flickering or jumping of the page as the content is being loaded.
Check the official docs.
const app = Vue.createApp()
app.mount('#app')
#app[v-cloak] {
display: none
}
section {
width: 200px;
height: 200px;
background-color: lightcyan
}
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
<div id="app" v-cloak>
<section></section>
</div>

How to changing a style in node_modules in its own vue <style> tags

I want to make changes to the css file inside the multiselect package. But I don't want to change it from within node_modules, all I want is to write it between style tags of my page that I created with vue. I want to change the white-space property But I can't see any change when I write as below. Can you help with this?
Default.css (Node_modules)
.multiselect-tag {
align-items: center;
background: var(--ms-tag-bg,#10b981);
border-radius: var(--ms-tag-radius,4px);
color: var(--ms-tag-color,#fff);
white-space: nowrap;
}
My template
<template>
<div class="filters">
<Multiselect
class="multiselect"
v-model="value"
mode="tags"
placeholder="Customer"
:close-on-select="false"
:filter-results="false"
/>
</div>
</template>
My CSS code
<style scoped>
.multiselect {
--ms-tag-bg: #dbeafe;
--ms-tag-color: #2563eb;
--ms-radius: 0.475rem;
--ms-dropdown-radius: 0.475rem;
--ms-spinner-color: #2563eb;
--ms-tag-ml: 0.85rem;
}
.multiselect,
.multiselect-tag {
white-space: normal !important;
}
</style>

I think you need to remove the scoped from your <style scoped> style tag, as this will let the styles only apply for the current component (and the root node of the child). But you want to style an element the Multiselect component.
<style>
.multiselect {
--ms-tag-bg: #dbeafe;
--ms-tag-color: #2563eb;
--ms-radius: 0.475rem;
--ms-dropdown-radius: 0.475rem;
--ms-spinner-color: #2563eb;
--ms-tag-ml: 0.85rem;
}
.multiselect,
.multiselect-tag {
white-space: normal !important;
}
</style>
Beware that removing the scoped will make the styles apply globally, so all Multiselect instances will be affected. If this is not what you need, you might try to use deep selectors.
See vue style docs.
Hope this helps.

So if I have got you right, you want to change / overwrite your default CSS from your stylesheet with new values in your hmtl.
To do this, simply insert "style" within your tag.
For example:
<Multiselect class="multiselect" style="color: black;"/>

My q-btn elements are not rendering appropriately in Quasar

I am new to Quasar and I don't know why, but my q-btn component buttons render as white backgrounds sometimes, ignoring the background-color I added to them, using external stylesheets.
The following are examples of this baffling problem
The above button should look like below
Another example is
The above one should look like
The buttons render properly some times, but just like that, without any clear pattern, they render with the white backgrounds.
It was suggested that the reason this was happening is because the buttons are being rendered before the external scss files are parsed. I changed the style of importing external scss files from
<template>
...
</template>
<script>
import './_custom-style.scss // initial import style
...
</script>
to
<template>
...
</template>
<script>
...
</script>
<style lang="scss" src="./_custom-style.scss"></style> // new css import style
This didn't work.
It was suggested that I use q-btn's color prop, (which is less than ideal, because I won't be able to use a custom hex color for my background), however I tried adding the color prop to it, using one of quasar's colors (in the color palette) and it still isn't rendering appropriately all the time. I don't know what else to do.
EDIT:
These are the scss file and one of the templates that use the q-btn component.
airtime {
...
&__redeem-btn {
margin-top: 1rem;
width: 80%;
padding: .5rem;
background-color: $purple-dark-3;
color: $primary-white;
font-size: 1.7rem;
}
}
<template>
<div class="airtime text-center">
<h1 class="..">Congratulations!</h1>
<p class="..">You got <strong>7</strong> questions correct</p>
<q-img
src="icons/...svg"
transition="fade"
class=".."
alt=".."
/>
<p class=".."></p>
<q-btn
class="airtime__redeem-btn"
rounded
label="Redeem"
no-caps
#click="$emit('selectNetworkProvider')"
/>
</div>
</template>

I have discovered the error. It turns out that there was a clashing style in my application
.q-btn__wrapper {
background-color: $primary-white;
}
This style overrode the background-color of the q-btn components.

React CSS inline vs CSS external styling

I am have been seeing that some things do not work the same in react CSS inline styling vs CSS external sheet styling. I was having an issue with adding a background image to my react app. I could not get it to compile via the normal CSS way. It seemed that it could not resolve.
I ended up using an inline style approach that worked. I am not sure if this is the most efficient way to add background images.
What is the best way to add background images to react, inline or external.
Working code:
App.js
import './App.css';
import PorfileCard from './PorfileCard';
function App() {
const mystyle = {
backgroundImage: "url(/images/bg-pattern-top.svg)",
backgroundSize: "cover",
backgroundRepeat: "no-repeat"
}
return (
<div style={ mystyle }>
<PorfileCard/>
</div>
);
}
export default App;
None working Code via external CSS
App.css
body {
margin: 0;
font-family: var(--fontFamily);
font-size: var(--fontSize);
background-color: (var(--darkCyan));
background-image: url("images/bg-pattern-top.svg");
}
I have tried with the leading forward slash and removing the quotes. I get the same error.

Put your images folder in the 'public' directory as mentioned in the comments and to reach these images, uses:
process.env.PUBLIC_URL
examples :
<div style={{ background: `url(${process.env.PUBLIC_URL)/images/bg-pattern-top.svg` }}>
</div>
<img src={process.env.PUBLIC_URL + /images/bg-pattern-top.svg} alt="" />

Can't add images to Vue.js component

I'm new to Vue. I'm trying to add an image(svg/png) to a component but I keep getting this error. I'm new to it, please keep that in consideration.
Failed to compile.
./src/components/Overview.vue?vue&type=template&id=6408adae&scoped=true&
(./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"06a978e8-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Overview.vue?vue&type=template&id=6408adae&scoped=true&)
Module not found: Error: Can't resolve './assets/logo.png' in
'/Users/kurbs/Desktop/Flaintweb2/flaintweb/src/components'
My code
<template>
<div class="hello">
<h1>Flaint</h1>
<p>Flaint allows artists to create their virtual art gallery to showcase their paintings.</p>
//Error <img src="./assets/logo.png">
</div>
</template>
<script>
export default {
name: 'Overview',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

by passing a relative URL to the img tag, I think webpack is trying to handle the resource, thus generating an error because you don't have the proper loader.
Good news are, you don't really need a webpack loader. When you build the vue application, any resource under /public will be served as an asset.
So you can fix this by moving your image to public/assets, and then setting up your component's img as:
<img src="/assets/logo.png">
(I'm only used to vue-cli 3. I don't really know if assets handling changes from other versions of vue-cli)