Migration Guide

1.1.0 to 1.2.0

WARNING

There is a breaking change of UI in this update in which typography, shadows, form elements, components and layout are aligned according to the Figma design.

Note

If you do not want to update your project with this template's update, that is totally up to you.

But in the future, if we introduce any component, app or page, it will be based on this UI which is aligned with the Figma design. If you want those changes in your project, then you will have to implement the v1.2.0 update and go through this migration.

Note

If you are starting your new project with the latest version of Vuexy Next.js, then you won't have to consider this migration.

In this update, we have aligned typography, shadows, form elements, components and layout according to the Figma design. Due to this, you will find changes like:

• Colors are updated
• Shadows are updated
• Font sizes are smaller
• Whole UI is changed for many of the components
• Vertical menu, horizontal menu and the layout are updated
• Alignment will break for all the components (components will work as it is but alignment may break)
• Newly introduced in this update:
  • tonal variant of the Button component. Refer to this guide for more details.
  • CustomTextField component for rendering custom TextFields and Select components. Refer to this guide for more details.
  • CustomAutocomplete component for rendering custom Autocomplete component. Refer to this guide for more details.

Steps to migrate

Please follow these steps to easily move to the new update:

1. Take a backup of your project's src/@core folder
2. Replace your project's src/@core folder with the latest update's src/@core folder
3. Manually check if your custom pages or components needs proper alignment
4. If needed, change any button's variant to tonal
5. If needed, update TextField and/or Select components with the help of the CustomTextField component
6. If needed, update Autocomplete components with the help of the CustomAutocomplete component