Feature/vuetify plugins

[jackhuynh95]

hello @UnrefinedBrain , I know you as your field about tool upgrade the codebase Vuejs

My projects which need to upgrade vuetify 2 => 3. Actually, I had to write an executive script bash on linux using WSL

However, I am leaning to this solution based on yours with in new plugin vuetify src/plugins/vuetify what I expected and was struggled with this issue below

Reference of the docs Vuetify Guide Migration

https://gist.github.com/mgd216/33d7805847f9bb1ef23a381fd76e22e6#file-vue_nuxt_vuetify_migration-md
https://vuetifyjs.com/en/getting-started/upgrade-guide/#setup

pnpm install && pnpm build 🐛🐛🐛

[jackhuynh95]

Actually, I had to write an executive script bash on linux using WSL

The migrate-vuetify.sh script will scan your Vue files for potentially incompatible stuff and cover Vuetify 3 replacements:

#!/bin/bash

# Function to migrate Vuetify-specific code in a Vue file
migrate_vuetify_file() {
  local file=$1
  echo "Migrating Vuetify in: $file"
  
  # General prop changes
  sed -i 's/:value=/:model-value=/g' "$file"
  sed -i 's/v-model:value/v-model/g' "$file"
  sed -i 's/:background-color=/:bg-color=/g' "$file"
  sed -i 's/:absolute=/:position=/g' "$file"
  sed -i 's/:fixed=/:position=/g' "$file"
  
  # Size and density changes
  sed -i 's/:small="true"/size="small"/g' "$file"
  sed -i 's/:large="true"/size="large"/g' "$file"
  sed -i 's/:x-small="true"/size="x-small"/g' "$file"
  sed -i 's/:x-large="true"/size="x-large"/g' "$file"
  sed -i 's/:dense="true"/density="compact"/g' "$file"
  
  # Location consolidation
  sed -i 's/:top="true"/location="top"/g' "$file"
  sed -i 's/:bottom="true"/location="bottom"/g' "$file"
  sed -i 's/:left="true"/location="left"/g' "$file"
  sed -i 's/:right="true"/location="right"/g' "$file"
  
  # Input components
  sed -i 's/append-outer/append/g' "$file"
  sed -i 's/validate-on-blur/validate-on="blur"/g' "$file"
  sed -i 's/:filled="true"/variant="filled"/g' "$file"
  sed -i 's/:outlined="true"/variant="outlined"/g' "$file"
  sed -i 's/:solo="true"/variant="solo"/g' "$file"
  
  # v-select/v-combobox/v-autocomplete changes
  sed -i 's/item-text/item-title/g' "$file"
  sed -i 's/cache-items//g' "$file"
  sed -i 's/v-slot:selection="{ item }"/v-slot:chip="{ item }"/g' "$file"
  
  # v-slider/v-range-slider changes
  sed -i 's/:ticks="true"/show-ticks/g' "$file"
  sed -i 's/tick-labels/ticks/g' "$file"
  sed -i 's/:vertical="true"/direction="vertical"/g' "$file"
  
  # v-img changes
  sed -i 's/:contain="true"//g' "$file"
  sed -i 's/cover="false"/contain/g' "$file"
  
  # v-snackbar changes
  sed -i 's/#action/#actions/g' "$file"
  sed -i 's/v-slot:action/v-slot:actions/g' "$file"
  
  # v-alert changes
  sed -i 's/colored-border/border-color/g' "$file"
  sed -i 's/dismissable/closable/g' "$file"
  
  # v-btn changes
  sed -i 's/active-class/selected-class/g' "$file"
  sed -i 's/:fab="true"/icon rounded="circle"/g' "$file"
  sed -i 's/:depressed="true"/variant="flat"/g' "$file"
  sed -i 's/retain-focus-on-click//g' "$file"
  
  # v-checkbox/v-radio/v-switch changes
  sed -i 's/input-value/model-value/g' "$file"
  sed -i 's/on-icon/true-icon/g' "$file"
  sed -i 's/off-icon/false-icon/g' "$file"
  sed -i 's/on-value/true-value/g' "$file"
  sed -i 's/off-value/false-value/g' "$file"
  
  # v-list changes
  sed -i 's/:two-line="true"/lines="two"/g' "$file"
  sed -i 's/:three-line="true"/lines="three"/g' "$file"
  sed -i 's/v-list-item-group//g' "$file"
  sed -i 's/input-value="true"/active/g' "$file"
  sed -i 's/inactive/active="false" :link="false"/g' "$file"
  sed -i 's/v-subheader/v-list-subheader/g' "$file"
  
  # v-data-table header changes
  sed -i 's/text:/title:/g' "$file"
  sed -i 's/"text":\s*"/"title": "/g' "$file"
  sed -i 's/value:\s*"data-table-select"/key: "data-table-select"/g' "$file"
  sed -i 's/value:\s*"data-table-expand"/key: "data-table-expand"/g' "$file"
  sed -i 's/class:/headerProps:/g' "$file"
  sed -i 's/cellClass:/cellProps:/g' "$file"
  sed -i 's/item-class/row-props/g' "$file"
  sed -i 's/item-style/row-props/g' "$file"
  sed -i 's/<v-data-table\s\+server-items-length/<v-data-table-server items-length/g' "$file"
  sed -i 's/@current-items/@update:current-items/g' "$file"
  
  # v-sparkline changes
  sed -i 's/:value=/:model-value=/g' "$file"
  
  # Utility class changes
  sed -i 's/rounded-r-/rounded-e-/g' "$file"
  sed -i 's/rounded-l-/rounded-s-/g' "$file"
  
  # Class-based changes
  sed -i 's/primary--text/text-primary/g' "$file"
  sed -i 's/secondary--text/text-secondary/g' "$file"
  sed -i 's/success--text/text-success/g' "$file"
  sed -i 's/error--text/text-error/g' "$file"
  sed -i 's/info--text/text-info/g' "$file"
  sed -i 's/warning--text/text-warning/g' "$file"
  sed -i 's/white--text/text-white/g' "$file"
  
  # Background colors
  sed -i 's/class="primary /class="bg-primary /g' "$file"
  sed -i 's/class="secondary /class="bg-secondary /g' "$file"
  sed -i 's/class="success /class="bg-success /g' "$file"
  sed -i 's/class="error /class="bg-error /g' "$file"
  sed -i 's/class="info /class="bg-info /g' "$file"
  sed -i 's/class="warning /class="bg-warning /g' "$file"
  
  # Typography classes
  sed -i 's/class="display-4/class="text-h1/g' "$file"
  sed -i 's/class="display-3/class="text-h2/g' "$file"
  sed -i 's/class="display-2/class="text-h3/g' "$file"
  sed -i 's/class="display-1/class="text-h4/g' "$file"
  sed -i 's/class="headline/class="text-h5/g' "$file"
  sed -i 's/class="title/class="text-h6/g' "$file"
  sed -i 's/class="subtitle-1/class="text-subtitle-1/g' "$file"
  sed -i 's/class="subtitle-2/class="text-subtitle-2/g' "$file"
  sed -i 's/class="caption/class="text-caption/g' "$file"
  
  # Component props
  sed -i 's/:flat="true"/variant="flat"/g' "$file"
  sed -i 's/:text="true"/variant="text"/g' "$file"
  sed -i 's/:plain="true"/variant="plain"/g' "$file"
  
  # Input events
  sed -i 's/@input/@update:model-value/g' "$file"
  
  # Directional props
  sed -i 's/:left="true"/:start="true"/g' "$file"
  sed -i 's/:right="true"/:end="true"/g' "$file"
  
  # v-list changes
  sed -i 's/v-list-item-content>//g' "$file"
  sed -i 's/<\/v-list-item-content//g' "$file"
  sed -i 's/v-list-item-title/v-list-item-title/g' "$file"
  sed -i 's/v-list-item-subtitle/v-list-item-subtitle/g' "$file"
  sed -i 's/v-list-item-action/v-list-item append-icon/g' "$file"
  sed -i 's/v-list-item-avatar/v-list-item prepend-avatar/g' "$file"
  
  # v-tabs changes
  sed -i 's/v-tab-item/v-window-item/g' "$file"
  sed -i 's/v-tabs-items/v-window/g' "$file"
  
  # v-simple-table to v-table
  sed -i 's/v-simple-table/v-table/g' "$file"
  
  # Activator slot changes
  sed -i 's/#activator="{ on, attrs }"/#activator="{ props }"/g' "$file"
  sed -i 's/v-slot:activator="{ on, attrs }"/v-slot:activator="{ props }"/g' "$file"
  sed -i 's/v-on="on"/v-bind="props"/g' "$file"
  sed -i 's/v-bind="attrs"/v-bind="props"/g' "$file"
  
  # v-expansion-panel changes
  sed -i 's/v-expansion-panel-header/v-expansion-panel-title/g' "$file"
  sed -i 's/v-expansion-panel-content/v-expansion-panel-text/g' "$file"
  
  echo "Completed Vuetify migration for: $file"
}

# Find all Vue files and migrate them
find src -name "*.vue" -type f | while read -r file; do
  migrate_vuetify_file "$file"
done