I am new to Nuxt.
I have a page
pages/page1.vue
<template>
<h1 class="title">Page</h1>
</template>
<style>
.title {
font-size: 16px;
}
</style>
Then, under layouts I have an error.vue
layouts/error.vue
<template>
<h1 class="title">Error Page</h1>
</template>
<style>
.title {
color: red;
font-size: 18px;
}
</style>
What I found is that when page1 is rendered, the title appears in Red. I checked the inspect elements and found that the CSS of error as well as of page 1 is applied.
I do not have a default.vue in the layouts directory.
As mentioned this is my first project in Nuxt (or vue) and want to understand how to ensure that CSS of a page are applied on that page only. This is in development mode (npm run dev). Thanks
The issue is CSS without scoped attribute renders at application level. You should use scoped attribute in styles tag as
layouts/error.vue
<template>
<h1 class="title">Error Page</h1>
</template>
<style scoped>
.title {
color: red;
font-size: 18px;
}
</style>
**When a <style> tag has the scoped attribute, its CSS will apply to elements of the current component only otherwise consider global style.
Related
Im having a lot of problems triying to style a child from parent in vue3.
In this case, i create a generic button with some css properties, and i try to customize this button from other component
Parent
<template>
<OwnButton
class="accept-button"
#ownButtonClicked="emit('accept')"
>
<slot>
ACCEPT
</slot>
</OwnButton>
</template>
<script setup>
import OwnButton from 'path/to/own-button.vue';
const emit = defineEmits(['accept']);
</script>
<style scoped>
.accept-button :deep(.own-button)
{
background-color : #4CAF50 !important;
outline-color : green !important;
}
.accept-button :deep(.own-button:hover)
{
background-color: green !important;
}
</style>
Child
<template>
<button
class="own-button"
type="button"
#click="emit('ownButtonClicked')"
v-on:keyup.enter="emit('ownButtonClicked')"
>
<slot>
</slot>
</button>
</template>
<script setup>
const emit = defineEmits
([
'ownButtonClicked'
]);
</script>
<style scoped>
.own-button
{
background-color : azure;
outline-color : lightblue;
color : black;
margin : 2px;
padding : 5px;
border-radius : 15px;
border : 0;
box-shadow : 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
outline-style : solid;
min-width : 100px;
max-width : 150px;
}
.own-button:hover
{
cursor: pointer;
}
</style>
I tried everything I could think of, including using :deep(button) in parent
This is a design limitation of Vue 3 when dealing with multi-root nodes
I wrote about this in my article Scoped styles and multi-root nodes don't work well together.
Understanding the issue
In Vue 3 we can finally have more than "one root node" components. That is great, but there is a design limitation when doing that. Imagine we have a child component:
<template>
<p class="my-p">First p</p>
<p class="my-p">Second p</p>
</template>
And a parent component:
<template>
<h1>My awesome component</h1>
<MyChildComponent />
</template>
<style scoped>
// There is no way to style the p tags of MyChildComponent
.my-p { color: red; }
:deep(.my-p) { color: red; }
</style>
There is no way from the scoped styling of the multi-root parent component to style the child component's p tags.
So in short, a multi-root component, can't target multi-root child component's styles with scoped styles.
Solutions
👉 💡 The best way to fix that would be to wrap the parent or child component (or both) so we have only one root element.
But if you absolutely need both to have multi-root nodes, you can:
Use a non-scoped style
<style>
.my-p { color: red; }
</style>
Use CSS Modules
<template>
<h1>My awesome component</h1>
<MyChildComponent :class="$style.trick" />
</template>
<style module>
.trick {
color: red;
}
</style>
Since we are specifying a class here, then the multi-root child component has to explicitly specify the attribute fallthrough behavior.
If you want my opinion, unless you absolutely need a multi-root node component, go with a single root node and don't deal with this design limitation at all.
I think it is related to where you apply the main class.
Try to put a wrapper around like that:
<template>
<div class="accept-button">
<OwnButton
#ownButtonClicked="emit('accept')"
>
<slot>
ACCEPT
</slot>
</OwnButton>
</div>
</template>
<script setup>
import OwnButton from './Comp.vue';
const emit = defineEmits(['accept']);
</script>
<style scoped>
.accept-button :deep(.own-button)
{
background-color : yellow !important;
outline-color : green !important;
}
.accept-button :deep(.own-button:hover)
{
background-color: green !important;
}
</style>
Here is the example above.
I have this simple page, designed with Vue and Tailwind:
App.vue:
<template>
<!-- <div class="bg-blue-500 flex flex-col h-screen min-h-screen " id="app">-->
<div id = "app" class = "bg-blue-500 flex flex-col h-screen min-h-screen app">
<Header/>
<main id ="app-main">
<p>app</p>
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
</main>
<Footer/>
</div>
</template>
<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
name: 'App',
components: {
Header, Footer
}
}
</script>
<style>
#app {
}
#app-main {
display: flex;
flex: 1 1 0%;
}
</style>
However if I edit #app style:
#app {
background-color: purple;
}
So as can be seen, when Tailwind is used, the styling behaves as expected: everything outside header and footer is blue, header and footer - their respective colors. However an attempt to set a color in the <style> tag, results in #app's background color overriding those of header and footer.
How do I fix it? How do people deal with it, when they don't use Tailwind?
If I understood you correctly, you are trying to change the color of the blue app region.
Notice the class bg-blue-500 on #app element? That's the class controlling the element's background color.
I can't check it but I bet renaming it to bh-purple-500 will color the background purple. You can find more default colors in the docs.
They way you're doing it overrides the styles of the child elements.
I am using a vuetify component as a widget on a page along with another content after the widget. However, I have too much free space between the widget and the rest of the page. The vuetify app takes too much height and I can't figure out how to remove it.
Here's how it look in the browser.
I have tried to override the css of App.vue in the following way but it doesn't work. Any suggestions?
<style scoped>
[data-vuetify] {
overflow-y: hidden;
}
[data-vuetify] .v-application--wrap {
min-height: 0vh !important;
}
</style>
Here's how App.vue looks like:
<template>
<div data-vuetify>
<v-app id="app">
<router-view></router-view>
</v-app>
</div>
</template>
<style scoped>
section {
margin: 10px 0;
}
[data-vuetify] {
overflow-y: hidden;
}
[data-vuetify] .v-application--wrap {
min-height: 0vh !important;
}
</style>
Here is the solution that worked for me.
<style scoped lang="scss">
::v-deep .v-application--wrap {
min-height: fit-content;
}
</style>
I have had the same problem and I have solved it as follows:
<style>
.v-application--wrap {
min-height: 0vh !important;
}
</style>
In App.vue
Also, I have built it as a library using vue-cli
I'm new to Vue and Vuetify.
Try unsetting it via CSS in your App.vue file:
<style>
.v-application--wrap {
min-height: unset;
}
</style>
It should unset the default rule "min-height: 100vh;".
For me, I removed <v-app> from the component and added it to the enclosing page (I'm using Nuxt) which removed the extra space from the component.
I'm building web app with Ant Design Vue.
I would like to know how to remove bottom-width in the header of <a-modal>.
This is the screenshot of what I would like to.
This is my code.
<template>
<a-modal width="1000px" title="demo">
Hi, Modal
</a-modal>
</template>
<script>
:
</script>
<style lang="less" scoped>
.ant-modal-header {
border-bottom-width: 0;
}
</style>
I know the class ant-modal-header defines border-bottom-width in Chrome Developer Tool.
So I defined new ant-modal-header in <style lang="less" scoped> to overwrite design, but somehow, it doesn't work.
You can use wrapClassName prop to give class to this specific modal container, and once you give class name to container you can target it but scoped style won't work here because classes are assigned in your current component
so something like this should work.
<template>
<a-modal width="1000px" wrap-class-name="my-special-modal" title="demo">
Hi, Modal
</a-modal>
</template>
<script>
:
</script>
<style lang="less">
.my-special-modal {
.ant-modal-header {
border-bottom-width: 0;
}
}
</style>
This should work:
.ant-modal-header {
border-top: 0 none;
}
I'm having trouble overriding bootstrap styles in my single file component when using bootstrap-vue
My file looks like this:
<template>
<b-tabs pills vertical>
<b-tab title="This title" title-item-class="mytab" acitve>
Some tab
</b-tab>
<b-tab title="This title 2" title-item-class="mytab">
Some other tab
</b-tab>
</b-tabs>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.nav-pills .mytab .nav-link:not(.active) {
background-color: red !important;
}
.nav-pills .mytab .nav-link {
background-color: blue !important;
}
.tab-content > .tab-pane {
border: 1px solid;
border-left: 0px none;
}
</style>
I can inspect my component and I can see that the "mytab" class is being added to the li parent divs with nav-item classname but the css isn't showing up.
It works here: https://jsfiddle.net/3xwmm1qt/43/ but I'm pretty sure it's because the css is being loaded after the page renders. I'm not 100% about that.
Updated I also tried removing the 'scoped' attribute from the style tag and the css still would work. It still doesn't even show up when I inspect the div. I can still see the classname, but in the Rules tab (using FF) there's no styling for my custom classname.
Yeah the difference between the jsfiddle and your code is that you've written scoped CSS (less):
Here's how you fix it, Remove the scoped from style:
<style lang="less">
.nav-pills .mytab .nav-link:not(.active) {
background-color: red !important;
}
.nav-pills .mytab .nav-link {
background-color: blue !important;
}
.tab-content > .tab-pane {
border: 1px solid;
border-left: 0px none;
}
</style>
Scoped means that the css code will only work in this element and vue will try to do it only for the classes attached to the elements which have the class you tried to override while not being scoped means that it'll do it for the entire document hence will override bootstrap's css.