v-img is a Vuetify's component, which is specifically designed to display images with Vuetify's Material Design features.
This video shows how to use v-img to display a logo, v-btn to display logout link and the v-spacer component to add space between logo and link.
This video shows how to use v-img to display a logo, v-btn to display logout link and the v-spacer component to add space between logo and link.
Category
🦄
CreativityTranscript
00:00To add an image in a VTify application, we can use the VIMG component,
00:10which is specifically designed to display images with VTify's material design styling.
00:20In this video, I'm showing how I'm adding the logo for my Lochelle scheduler app using the VIMG component.
00:34The logo will be here.
00:37And additionally, I will add a logout link in the top right corner here.
00:46The logo image is located here.
00:53To add it in the top bar, I will use the VIMG component.
01:17Here is my logo.
01:22By default, the width of the VIMG component in VTify is determined by the width of its container.
01:40For this reason, it looks in this way.
01:46To ensure the expected appearance, the default width and height should be set.
01:55Now it looks better, but its width is still 100%.
02:22To solve this, I will add MaxWidth instead of Width.
02:35Now it looks as expected.
02:41VTify provides multiple options to customize the VIMG component.
02:53For example, we can display a small placeholder image while a larger one loads.
03:04We can also apply a background gradient.
03:10For now, I will just add the Alt prop in the VIMG component.
03:19In this top bar, I will add even a logout link.
03:38In reality, I will add a VTify button using the VPTN component.
03:55It will be a button without a background.
04:01The logout link was added as expected.
04:08First, I need to move it in the top right angle.
04:16For this scope, I will use the VSpacer component.
04:24I will add the VSpacer component here, between the image and the button.
04:39Now it looks as expected.