How to create a responsive layout in Vuetify
Vuetify is a popular Material Design component framework that provides a wide range of UI components and tools build responsive, mobile-first applications with a consistent design language. This video shows how I'm creating a layout for my Social Scheduler app.
Category
🦄
CreativityTranscript
00:00In this video, I'm going to show how I'm creating the layout for my social scheduler using Vuetify.
00:13For my social scheduler, I will use my authentication service, which I have developed in Vue and Django.
00:29Here will be the main page of my scheduler.
00:41My layout will have three sections.
00:46Header, PostLists and PostComposer.
00:56It will be responsive and I will create it using Vuetify.
01:05So, let's start.
01:08First, I will add the Vuetify root component that provides the context for other Vuetify components.
01:22Without it, they won't work.
01:26In my layout, I will create first the section for top bar, where I will have the logo and logout link.
01:39To create the top bar, I will use the special VAppBar component.
01:50And here is the preview.
01:56I don't like the original box shadow for my top bar.
02:04For this reason, I will custom it directly in this component.
02:21Now I like it.
02:25I will use the VMain component to define the area for the other two sections in my layout.
02:41My layout will be responsive.
02:46For this reason, I will use the VContainer component to adjust its width and spacing based on the screen size.
03:06The fluid prop makes it take up to 100% of the available width, regardless of screen size.
03:24The VRow component helps to organize the columns inside, which I will use as sections in my layout.
03:42Inside the VRow component, I will add two columns that will be used for posts list and posts composer sections.
04:02To remove the default spaces between my columns, I will use the NoGoddess prop in my VRow component.
04:19In this component, I will use SCSS instead of CSS.
04:34And I will use the default styles for colors, fonts and animations.
04:48My top bar will have 64 PS.
05:03And the other two sections should fill the page until the bottom without spaces.
05:19The posts composer will have a background with grey color.
05:29Let's see the preview.
05:32This is my top bar, section for posts and section for composer.
05:43Let's see now if my layout is responsive.
06:13It works as expected.