Develop Reference

How to change the style of layout elements for each specific page?

I have a Nuxt.js and Vue.js project and I have a layout in it that all my landing pages use this layout and I have given a series of styles to the v-app-bar menu tag in this layout. But as you can see in the image on the brokers page, the styles are displayed correctly for the nav-bar section , This means that the nav-bar menu buttons are white in color,
But on the how it work page, the color of the menus should not be white and should be changed to black so that the menus can be easily viewed.
How it works page:
Brokers page:
The main How it works page, which should be designed in the same way:
My Code is:
<v-app-bar absolute color="transparent" elevate-on-scroll>
<div class="d-flex align-center">
<v-img max-width="166"lass="d-flex align-center mr-10" src="/RectangleProfile.png">
</v-img>
<v-btn nuxt to="/landing-page/how-it-works" text
class="mr-2 font-bold-link-text">
How it Works
</v-btn>
<v-btn
text
class="mr-2 font-bold-link-text"
nuxt
to="/landing-page/list-of-top-brokers"
>Brokers</v-btn >
<v-btn text class="mr-2 font-bold-link-text">Tutorial</v-btn>
<v-btn text class="mr-2 font-bold-link-text">Blogs</v-btn>
<v-btn text class="mr-2 font-bold-link-text">About us</v-btn>
<v-btn
v-if="selectedMagnify === false" icon
v-on:click.stop="searchSelected()">
<v-icon color="white">
mdi-magnify
</v-icon>
</v-btn>
<v-text-field
v-else
flat
color="#ffffff"
autofocus
hide-details
rounded
height="40"
filled
dense
single-line
clearable
placeholder="Search">
</v-text-field>
</div>
</v-app-bar>
My CSS Code is:
.font-bold-link-text {
font-weight: normal;
font-size: 14px;
color: #ffffff !important;
}

As Iman said in the comments, you can use a scoped style on the page where you have the problem.
Otherwise, another way is to create a dark class that is bind to a var. And you set it to true on the page where you need the black buttons. That way, you can have your style in a global stylesheet.
Something like :
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<v-btn text class="mr-2 font-bold-link-text">Light button</v-btn>
<v-btn text class="mr-2 font-bold-link-text" :class="dark: dark">Dark button</v-btn>
<script>
export default {
data(){
return{
dark: true,
}
},
}
</script>
<style scoped>
.font-bold-link-text{
padding: 8px 16px;
color: black;
background: white;
}
.dark{
padding: 8px 16px;
color: white;
background: black;
}
</style>

How to customize vuetify carousel arrows?

Hello i have the following template in my application:
<v-carousel cycle height="300" class="carousel" hide-delimiters>
<template v-slot:prev="{ on, attrs }">
<v-btn fab :color="theme.highlightColor" v-bind="attrs" v-on="on"
><v-icon>mdi-arrow-left</v-icon></v-btn
>
</template>
<template v-slot:next="{ on, attrs }">
<v-btn fab :color="theme.highlightColor" v-bind="attrs" v-on="on"
><v-icon>mdi-arrow-right</v-icon></v-btn
>
</template>
<v-carousel-item
v-for="i in 4"
:key="i"
:src="photo"
></v-carousel-item>
</v-carousel>
I wanted to customize arrows responsible for changing the slide. For this purpose, according to vuetify documentation i've used prev, and next slot. The problem is my code has no influence on the look of mentioned arrows. Also no errors are logged to the console. What am i doing wrong? How to customize carousel arrows?

This is working exemple. Something more is needed ???
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
colors: [
'indigo',
'warning',
'pink darken-2',
'red lighten-1',
'deep-purple accent-4',
],
slides: [
'First',
'Second',
'Third',
'Fourth',
'Fifth',
],
}
},
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app id="inspire">
<v-carousel
cycle
height="400"
hide-delimiter-background
show-arrows-on-hover
>
<template v-slot:prev="{ on, attrs }">
<v-btn
color="success"
v-bind="attrs"
v-on="on"
>PREV #Bulchsu</v-btn>
</template>
<template v-slot:next="{ on, attrs }">
<v-btn
color="info"
v-bind="attrs"
v-on="on"
>NEXT #Bulchsu</v-btn>
</template>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
>
<v-sheet
:color="colors[i]"
height="100%"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="display-3">
{{ slide }} Slide
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</div>

As I imagine that the solutions proposed at the beginning in the doc are not worth it delimiter-icon="mdi-icon".
Because this only allows you to change the background icon image and has an extra difficulty to change it in the moments that are active.
I can suggest something simple and very efficient for this case
clean the limiter icon on the carrousel delimiter-icon=""
assign your carousel a css class <v-carousel class="cssClass".....
include in the corresponding class the css classes to change
.cssClass { .v-btn {
color: transparent !important;
border: 1px solid red !important;
background-color: transparent !important;
}
.v-btn--active {
color: red !important;
border: 1px solid red !important;
background-color: red !important;
}
}
it would look something like this
<v-carousel class="cssClass"
v-model="model"
cycle
delimiter-icon="">
....
</v-carousel>
Once this is done, the result of the carrousel will now be the following
I hope I have helped, regards.

Why is this.$refs undefined in Vue child component?

I'm working on a drag and drop component in Vue but when I try to access the form using this.$refs, it is returning undefined. I'm using the dialog UI component from Vuetify to place my upload form into a dialog/modal.
CodePen
The dialog is a child component to another component, and the form isn't visible until after the "Add Attachments" button is clicked. I suspect the later is the issue, but I'm unsure how to solve it. I figured placing the code under the mounted life-cycle hook would do the trick but I understand that runs immediately when it renders the button into the parent component.
<template>
<v-dialog v-model="dialog" persistent max-width="600px" style="z-index:999;">
<template v-slot:activator="{ on }">
<v-btn small outlined color="#102a43" v-on="on">Add Attachments</v-btn>
</template>
<v-card>
<v-card-text class="pt-4">
<v-container class="my-4">
<form ref="fileform" class="file-upload-form">
<div v-if="dragAndDropCapable" class="dropzone">
<p>
Drop your file here, or
<span>browse</span>
</p>
<p>Supported File Types: pdf, jpg, png</p>
</div>
<div v-else>
<v-file-input label="Select File" outlined dense></v-file-input>
</div>
</form>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="#b2b2b2" text #click="cancel">Cancel</v-btn>
<v-btn color="#102a43" outlined>Upload</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
data: function() {
return {
files: [],
dialog: false,
dragAndDropCapable: false
};
},
methods: {
isDragAndDropCapable() {
const div = document.createElement("div");
return (
("draggable" in div || ("ondragstart" in div && "ondrop" in div)) &&
"FormData" in window &&
"FileReader" in window
);
},
cancel() {
this.dialog = false;
}
},
mounted() {
//Verify Drag and Drop Capability
this.dragAndDropCapable = this.isDragAndDropCapable();
//Code below return undefined - Expected behavior is to return form element
console.log(this.$refs.fileform);
}
};
</script>
<style lang="scss" scoped>
.dropzone {
border: 2px dashed #90a4ae;
border-radius: 8px;
min-height: 5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&:hover {
cursor: pointer;
}
p {
margin-bottom: 0;
&:first-of-type {
font-weight: 500;
font-size: 1rem;
color: #263238;
span {
color: #62b0e8;
}
}
&:last-of-type {
font-size: 0.8rem;
}
}
}
</style>

By default content within v-dialog components isn't rendered until it is activated.
Add the eager attribute to change this <v-dialog eager>
https://vuetifyjs.com/en/components/dialogs/

On mounted, the v-dialog isnt actually mounted or lets say its not initialized.
I have modified your CodePen.
Try this eager prop of the v-dialog like this below :
<v-app id="app">
<v-app id="inspire">
<v-dialog v-model="dialog" persistent max-width="600px" eager>
<template v-slot:activator="{ on }">
<v-btn color="red lighten-2"
dark
v-on="on">Add Attachments</v-btn>
</template>
<v-card>
<v-card-text class="pt-4">
<v-container class="my-4">
<form ref="fileform" class="file-upload-form">
<div v-if="dragAndDropCapable" class="dropzone">
<p>
Drop your file here, or
<span>browse</span>
</p>
<p>Supported File Types: pdf, jpg, png</p>
</div>
<div v-else>
<v-file-input label="Select File" outlined dense></v-file-input>
</div>
</form>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="#b2b2b2" text #click="cancel">Cancel</v-btn>
<v-btn color="#102a43" outlined>Upload</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
</div>

Limit maximum page length in css

I have a Vue application running Vuetify but neither of these seem to be equipped to handle my desire to limit the maximum length of the page to be such that there is no scrolling. I hope that makes sense. My hope is to just pull up a screen with a bunch of routing to similarly formatted screens. Of course, the user could make the window smaller, in which case I would need scrolling. So how would I set that up when I want to have the page open to full screen with a maximum page length that will prevent the NEED for scrolling, but still allow scrolling if the need is there due to the user resizing the page to something a good bit smaller?
I spent hours looking around for details on this but didn't find anything that really seemed to be a direct solution. How can I set a max page length? Would CSS offer this? I saw a solution putting CSS in the <head>-tag but with a Vue application this head tag doesn't get used in the same way as typical HTML pages.
EDIT: because I don't think it's clear that because I'm working in vue/vuetify the solution might be different from the general case, I think it is best if I provide my App.vue and an example page.
--- App.vue ---
<template>
<v-app>
<app-toolbar></app-toolbar>
<router-view></router-view>
<app-footer></app-footer>
</v-app>
</template>
<script>
import AppToolbar from "./components/AppToolbar.vue";
import AppFooter from "./components/AppFooter.vue";
export default {
name: "App",
components: {
AppToolbar,
AppFooter
},
data: () => ({
//
})
};
</script>
<style scoped></style>
--- Homepage.vue ---
<template>
<div>
<v-app>
<v-responsive aspect-ratio="16/9">
<v-carousel cycle hide-delimiter-background show-arrows-on-hover>
<v-carousel-item
v-for="(item, i) in items"
:key="i"
:src="item.src"
reverse-transition="fade-transition"
transition="fade-transition"
></v-carousel-item>
</v-carousel>
</v-responsive>
</v-app>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
src: "https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
}
]
};
}
};
</script>
<style></style>
EDIT 2: Adding the app-toolbar & app-footer
--- Toolbar.vue ---
<template>
<div>
<v-toolbar dense color="#3F51B5" dark>
<v-app-bar-nav-icon
color="#76ff03"
#click.stop="drawer = !drawer"
></v-app-bar-nav-icon>
<v-btn to="/" color="#76ff03" text>Vuetification</v-btn>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-row align="center" justify="center">
<v-badge bordered color="error" icon="mdi-lock" overlap>
<v-btn class="white--text" color="error" depressed>
Lock Account
</v-btn>
</v-badge>
<div class="mx-3"></div>
<v-badge
bordered
bottom
color="deep-purple accent-4"
dot
offset-x="10"
offset-y="10"
>
<v-avatar size="40">
<v-img src="https://cdn.vuetifyjs.com/images/lists/2.jpg"></v-img>
</v-avatar>
</v-badge>
<div class="mx-3"></div>
<v-badge avatar bordered overlap>
<template v-slot:badge>
<v-avatar>
<v-img src="https://cdn.vuetifyjs.com/images/logos/v.png"></v-img>
</v-avatar>
</template>
<v-avatar size="40">
<v-img src="https://cdn.vuetifyjs.com/images/john.png"></v-img>
</v-avatar>
</v-badge>
</v-row>
<div class="hidden-sm-and-down">
<v-btn icon>
<v-icon color="#76ff03">mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon color="#76ff03">mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon color="#76ff03">mdi-dots-vertical</v-icon>
</v-btn>
<v-btn color="#76ff03" text>About</v-btn>
<v-btn to="/contact" color="#76ff03" text>Contact</v-btn>
<v-btn to="/login" color="#76ff03" text>Login</v-btn>
</div>
</v-toolbar>
<v-navigation-drawer
v-model="drawer"
expand-on-hover
app
temporary
right
height="160px"
>
<v-list-item>
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/men/78.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>John Leider</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item v-for="item in items" :key="item.title" link>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</div>
</template>
<script>
export default {
data() {
return {
drawer: false,
items: [
{ title: "Home", icon: "mdi-ghost" },
{ title: "About", icon: "mdi-kabaddi" }
]
};
}
};
</script>
<style scoped>
.toolbar-item {
color: #76ff03;
}
</style>
--- Footer.vue ---
plate>
<v-app>
<v-footer dark padless fixed>
<v-card class="flex" text tile>
<v-card-title class="teal">
<strong class="subheading"
>Get connected with us on social networks!</strong
>
<v-spacer></v-spacer>
<v-btn v-for="icon in icons" :key="icon" class="mx-4" dark icon>
<v-icon color="#76ff03" size="24px">{{ icon }}</v-icon>
</v-btn>
</v-card-title>
<v-card-text class="text-center">
<v-layout>
<v-flex class="toolbar-item" v-for="(col, i) in rows" :key="i" xs3>
<span class="body-2" v-text="col.title.toUpperCase()" />
<div v-for="(child, i) in col.children" :key="i" v-text="child" />
</v-flex>
<v-flex class="toolbar-item" xd3 layout column>
<span class="body-2">CONTACT</span>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-home</v-icon
>
New York, NY 10012, US
</div>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-envelope</v-icon
>
info#example.com
</div>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-phone</v-icon
>
+ 01 234 567 89
</div>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-print</v-icon
>
+ 98 765 432 10
</div>
</v-flex>
</v-layout>
<strong> {{ new Date().getFullYear() }} — Vuetify </strong>
</v-card-text>
</v-card>
</v-footer>
</v-app>
</template>
<script>
export default {
data: () => ({
icons: [
"fab fa-facebook",
"fab fa-twitter",
"fab fa-google-plus",
"fab fa-linkedin",
"fab fa-instagram"
],
rows: [
{
title: "Company Name",
children: [
"Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit"
]
},
{
title: "Produts",
children: [
"MDBootstrap",
"MDWordPress",
"BrandFlow",
"BootstrapAngular"
]
},
{
title: "Useful Links",
children: [
"Your account",
"Become an Affiliate",
"Shipping Rates",
"Helper"
]
}
]
})
};
</script>
<style scoped>
strong {
color: #76ff03;
}
.toolbar-item {
color: #76ff03;
}
</style
>

By default, if the HTML content is larger than the window, the browser will create scrollbars and if it's smaller than the window there won't be a scroll. However, I don't think this is what you're really asking for. I think you're trying to change the window size itself.
I'm going to start by saying its very bad practice to modify the size of the user's browser window. You should work to make your content fit instead.
That said, as Vue.js and Vuetify are built on Javascript, and you'll need to write some custom JS to resize the browser window. The default overflow on the <body> tag (yes those exist in a Vue app) will take care of the scrolling...
window.resizeTo(width, height);
Should be called after Vue has rendered the content to the screen so inside Vue's Mounted Lifecycle hook.
Now, I assume the height of the content changes so you would want to grab the height of the Vue app div.
var newHeight = document.getElementById('app').innerHeight()
You also want to get the screen size so you don't make the window larger than the screen. You can get that height from the screen object.
var screenHeight = window.screen.height
so
if(newHeight < screenHeight){
window.resizeTo('800px', newHeight);
} else {
window.resizeTo('800px', screenHeight);
}
Before you do this
You should know that most modern browsers BLOCK the window.resizeTo() function so again you should find a different solution to the problem.

You Can nest your content inside another div element.If max-height of your inner div is equal to the height of its container, scroll bar will never appear. if you want to see scroll bar use this.
.scrollDiv {
height:auto;
max-height:150%;
overflow:auto;
}

Vue, Vuetify - Reduce space between buttons in toolbar

I've tried everything to reduce the space between the buttons, so that they all sit nicely centered and evenly spaced in the toolbar when on mobile, but for some reason the space next to the left-most button remains, while the right-most button is slightly over the right edge, as seen in the pic below.
Here's the last thing I tried before coming to ask a question here:
<!-- Notice the "ma-0 pa-0" that I've now added in literally everywhere -->
<v-toolbar fixed color="teal lighten-1" dark class="hidden-md-and-up ma-0 pa-0">
<v-toolbar-items class="ma-0 pa-0">
<v-btn
flat
v-for="link in navigation"
:key="link.text"
:class="{ 'teal lighten-2':link.active }"
#click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
class="mobile ma-0 pa-0"
>
<v-icon>{{ link.icon }}</v-icon>
</v-btn>
</v-toolbar-items>
</v-toolbar>
I've also tried things like creating a custom style rule (non-scoped, otherwise Vuetify seems to ignore 'em) like .v-btn.mobile { margin:0; padding:0 } to no avail, and trying all the different justify- attributes.
Other than that I've also tried different Vuetify elements like v-footer, and adding in v-containers, v-layouts and v-flexs. None of which seem to work.
The image is a screenshot from my phone, while connected to the vue dev server on my pc on the same network, in case that makes a difference.

The padding comes from the .v-toolbar__content element created by vuetify.
Unfortunately vuetify doesn't provide a straight-forward way to get rid of this padding.
However you can easily override this with a custom style:
<v-toolbar fixed color="teal lighten-1" dark class="my-toolbar hidden-md-and-up">
<v-toolbar-items>
<v-btn
flat
v-for="link in navigation"
:key="link.text"
:class="{ 'teal lighten-2':link.active }"
#click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
class="mobile"
>
<v-icon>{{ link.icon }}</v-icon>
</v-btn>
</v-toolbar-items>
</v-toolbar>
With the following style (assuming you're using plain css)
<style scoped>
.my-toolbar >>> .v-toolbar__content {
padding: 0;
}
</style>
You're right, you can't style the vuetify-generated elements directly, but you can keep the scoped styles by using deep selectors
(the >>> in the example, you might need to use /deep/ or ::v-deep if you're using a css preprocessor)
Edit: For centering and stretching the buttons you just need to remove the v-toolbar-items and give the buttons the block attribute and the fill-height class, e.g.:
<v-toolbar fixed color="teal lighten-1" dark class="my-toolbar hidden-md-and-up">
<v-btn
flat
block
v-for="link in navigation"
:key="link.text"
:class="{ 'teal lighten-2':link.active }"
#click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
class="mobile fill-height"
>
<v-icon>{{ link.icon }}</v-icon>
</v-btn>
</v-toolbar>
If you only want to center the items, you could use something like this:
<v-toolbar fixed color="teal lighten-1" dark class="my-toolbar hidden-md-and-up">
<v-btn
flat
v-for="link in navigation"
:key="link.text"
:class="{ 'teal lighten-2':link.active }"
#click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
class="mobile fill-height ma-0"
>
<v-icon>{{ link.icon }}</v-icon>
</v-btn>
</v-toolbar>
<!-- with the following style: -->
<style scoped>
.my-toolbar >>> .v-toolbar__content {
padding: 0;
justify-content: center;
}
</style>