How to set up global configuration for Vuetify's components
Vuetify enables you to configure default prop values either globally or for individual components when initializing your application. With this feature, you can, for instance, turn off the ripple effect across all components or establish a default elevation for all sheets and buttons.
This video shows how to set up the global configuration for Vuetify's components.
This video shows how to set up the global configuration for Vuetify's components.
Category
🦄
CreativityTranscript
00:00In Beautify, we have the option to customize globally the styles of all available components.
00:14In this video, I will explain how is possible to customize globally the styles for Beautify components.
00:27If we want to use Beautify in a Vue application, we need first to create an instance for Beautify using this function.
00:45Then, we need to use this instance in the Vue instance.
00:55This is the Vue instance in my application.
01:02Then, all Beautify components will be supported in all my Vue applications.
01:13The Beautify instance allows to customize the components.
01:25To do this, we need to copy the global configuration from the component page in the official documentation.
01:39For example, I copied the global configuration for the button component.
01:49This key should be used if we want global configuration.
02:01Here, we need to use the global configuration for all components inside the defaults.
02:09This configuration will be available for all buttons in my application.
02:22Let's see how looks the buttons with rounded corners.
02:29Now, my buttons are displayed with rounded corners.