Hi I am learning vuetify and I want to change the background of a navigation drawer that I imported from vuetify default layout template.
The tamplate was found and imported on official vuetify docs.
The problem is I am unable to change the background of the drawer and set it to image
This is the Default layout with drawer
<template>
<v-app
id="inspire"
dark
>
<v-navigation-drawer
v-model="drawer"
fixed
clipped
app
>
<v-list dense>
<v-list-tile v-for="item in items" :key="item.text" @click="">
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
{{ item.text }}
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-subheader class="mt-3 grey--text text--darken-1">SUBSCRIPTIONS</v-subheader>
<v-list>
<v-list-tile v-for="item in items2" :key="item.text" avatar @click="">
<v-list-tile-avatar>
<img :src="`https://randomuser.me/api/portraits/men/${item.picture}.jpg`" alt="">
</v-list-tile-avatar>
<v-list-tile-title v-text="item.text"></v-list-tile-title>
</v-list-tile>
</v-list>
<v-list-tile class="mt-3" @click="">
<v-list-tile-action>
<v-icon color="grey darken-1">add_circle_outline</v-icon>
</v-list-tile-action>
<v-list-tile-title class="grey--text text--darken-1">Browse Channels</v-list-tile-title>
</v-list-tile>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon color="grey darken-1">settings</v-icon>
</v-list-tile-action>
<v-list-tile-title class="grey--text text--darken-1">Manage Subscriptions</v-list-tile-title>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar
color="red"
dense
fixed
clipped-left
app
>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-icon class="mx-3">fab fa-youtube</v-icon>
<v-toolbar-title class="mr-5 align-center">
<span class="title">Youtube</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-layout row align-center style="max-width: 650px">
<v-text-field
:append-icon-cb="() => {}"
placeholder="Search..."
single-line
append-icon="search"
color="white"
hide-details
></v-text-field>
</v-layout>
</v-toolbar>
<v-content>
<v-container fill-height>
<v-layout justify-center align-center>
<v-flex shrink>
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn :href="source" icon large target="_blank" v-on="on">
<v-icon large>code</v-icon>
</v-btn>
</template>
<span>Source</span>
</v-tooltip>
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn icon large href="https://codepen.io/johnjleider/pen/YeRKwQ" target="_blank" v-on="on">
<v-icon large>mdi-codepen</v-icon>
</v-btn>
</template>
<span>Codepen</span>
</v-tooltip>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</template>
<script>
export default {
data: () => ({
drawer: null,
items: [
{ icon: 'trending_up', text: 'Most Popular' },
{ icon: 'subscriptions', text: 'Subscriptions' },
{ icon: 'history', text: 'History' },
{ icon: 'featured_play_list', text: 'Playlists' },
{ icon: 'watch_later', text: 'Watch Later' }
],
items2: [
{ picture: 28, text: 'Joseph' },
{ picture: 38, text: 'Apple' },
{ picture: 48, text: 'Xbox Ahoy' },
{ picture: 58, text: 'Nokia' },
{ picture: 78, text: 'MKBHD' }
]
}),
props: {
source: String
}
}
</script>
I am expecting apply the background image to drawer, example : https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg
I tried to use in my drawer src atribute :
<v-navigation-drawer
v-model="drawer"
fixed
clipped
app
src="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg"
>
But that is not working, also I tried wrapping drawer in Div and accessing the class with scoped css but without any success.
There is a backgrounds ready component for drawers at official vuetify codepen : https://codepen.io/pen/?&editable=true&editors=101 that shows using src atribute. But for some reason it is not working with this example.
