# How to Customize Vuetify 2 To fit Metronic Experience

Hello In this article I want to share with you how to customize Vuetify styles, appearance, to fit Metronic one.

Useful links:

* [Vuetify Docs](https://vuetifyjs.com/en/getting-started/installation/)
* [Metronic Demo](https://preview.keenthemes.com/metronic8/demo1/index.html)
* [Metronic Docs](https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started.html)

## Table Of content:
- How to override Vuetify Styles
- How to set default Vuetify Props
- Colors
- Screenshots

## How to override Vuetify Styles
Vuetify uses uses SASS/SCSS variables in most of their styles. giving the ability to override every single property.

[Vuetify SASS Variables Docs Page](https://vuetifyjs.com/en/features/sass-variables/)

There are two types of SASS variables:
- global SASS Variables (apply to the whole framework)
- component based SASS Variables (specific for one component)

And I'll give you an example for both of them

### global SASS Variables

#### Grid Breakpoints:
Vuetify uses this breakpoint:
while Metronic uses bootstrap breakpoints:

To solve this problem we can define custom grid breakpoints in our `override.scss` file

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1290px,
);

#### font weights

Most of metronic text are using `font-weight: 500`
while the default font weight is `400`

to customize font weight we can add

$font-weights: (
  'thin': 100,
  'light': 400,
  'regular': 500,
  'medium': 600,
  'bold': 700,
  'black': 900,
);

now any text will be with font weight `500`

#### ripple:
Vuetiy uses ripple in most of their components ([What is ripple?](https://material.io/develop/ios/supporting/ripple)) but It's not used by metronic

So we can disable it globally

/* DISABLE VRIPPLE EXPERINCE */
$ripple-animation-transition-in: none;
$ripple-animation-transition-out: none;
$ripple-animation-visible-opacity: 0;

#### font-size, font-family:

to customize vuetify default `font-size` & `font-family`
we can Add:

$font-size-root: 13px;
$body-font-family: 'Poppins', 'Almarai', sans-serif;

Now the `font-family` is 'Poppins' and 'Almarai' if not found (Almarai is useful for Arabic text)

ِAny other style can be changed: Heading, spacers step, default border radius, etc...

### Component based SASS Variables
lets take a Button for example
Here is [Vuetify Buttons Docs](https://vuetifyjs.com/en/components/buttons/#usage)

Please note that we'll talk about Buttons Propsin the section: **How to set default Vuetify Props** below. now We're only talking about the styles

You can see that the button text is uppercase, have a little bit letter spacing, border radius, and other styles.

To override them we can use:

$btn-tile-border-radius: $border-radius-root;
$btn-letter-spacing: 0;
$btn-text-transform: 'initial';

Each vuetify component has an API page to check its props, SASS varaibles: [Buttons API Page](https://vuetifyjs.com/en/api/v-btn/)

And so on, we can override each components styles in this way.

Now lets talk about how to set default Component Props

## How to set default Vuetify Props

Vuetify Has wide options of props for each compoent
Applying some of them will make the component looks like Metronic one.

To acheive this we need the power of `extend` in Vue, which is provided to all vuetiy components (all vuetify components are extendable)

useful links
* [Extend in Vue 2](https://v2.vuejs.org/v2/api/#Vue-extend)
* [extending Vuetify component](https://vuetifyjs.com/en/getting-started/frequently-asked-questions/#extend-components)

Extending Vuetify Component will make us being able to make the default props like Metronic

Lets take the same button for example:
You've noticed that It has a shadow, and the shadow is a prop called `elevation`. but Metronic doesn't have that shadow.

To override its default value we can make this custom component, lets Call it `CBtn` instead of `VBtn`

import { VBtn } from 'vuetify/lib'

export default {
  extends: VBtn,

  props: {
    elevation: { type: [String, Number], default: 0 },
  },
}

now the default button won't have any shadow unless we defined the prop `elevation` and give it a value

I won't dive deep in all components but you got the idea.

Also we can make combine some custom components to get componets that are not available in Vuetify `Symbol` for example.

Here is the code of Metronic Symbol but with vuetiy components

<template>
  <v-avatar v-bind="$props" class="lighten-5" v-on="$listeners" >
    <v-icon :size="$props.size / 2"  :color="$props.color">
      <template #default> <slot name="default" /> </template>
    </v-icon>
  </v-avatar>
</template>

<script>
import { VAvatar } from 'vuetify/lib'

export default {
  extends: VAvatar,

  props: {
    rounded: { type: Boolean, default: true },
  },
}
</script>

Output:

Now lets Go to the Colors!

## Colors

Vuetify Gives you the option to define your custom colors, see [Vuetify Themes](https://vuetifyjs.com/en/features/theme/#light-and-dark)

So I can define the colors Based on metronic:

export default {
  primary: {
    base: '#009ef7',
    lighten5: '#F1FAFF',
  },
  secondary: '#e4e6ef',
  success: {
    base: '#50cd89',
    lighten5: '#E8FFF3',
  },
  info: {
    base: '#7239ea',
    lighten5: '#F8F5FF',
  },
  warning: {
    base: '#FFA800',
    lighten5: '#FFF8DD',
  },
  error: {
    base: '#f1416c',
    lighten5: '#FFF5F8',
  },
  dark: {
    base: '#181c32',
    lighten5: '#EFF2F5',
  },
  light: '#f5f8fa',
  lighten: '#FAFBFC',
  'gray-dark': '#3f4254',
  'gray-100': '#f5f8fa',
  'gray-200': '#eff2f5',
  'gray-300': '#e4e6ef',
  'gray-400': '#b5b5c3',
  'gray-500': '#a1a5b7',
  'gray-600': '#7e8299',
  'gray-700': '#5e6278',
  'gray-800': '#3f4254',
  'gray-900': '#181c32',
}

Each color can Either a hex string, or an object to define color varaints, you can define (5 lighten, 5 darken) of each color and use them

## Screenshots
This Screenshot is for a project which we're building write now. Sorry, But I don't have the authority to share the source code with you, but I've written this article to share with you how this project is acheived.


**RTL**

**RESPONSIVE**