Vue3 / Nuxt3 / Vuetify3 Migration Steps

The following notes are a 'checklist' for migrating a large Vue2 / Vuetify2 project to Vue3 / Nuxt3 / Vuetify3. It is NOT intended to be a step-by-step migration guide, they are rough notes our team used for migration
Our team decided to create a brand new Nuxt3 app, instead of tyring a 'bridge' or running Vue2/Vue3 side-by-side:
- nuxi init our-new-app-v3
We also changed our store from Vuex to Pinia
We decided to use the experimental @vue/reactivity-transform. This provides the ability to use a ref in the script block without having to use .value everywhere
- without reactivity-transform
  - let userName = ref<string>('')
  - userName.value = "John Doe"
- with reactivity-transform
  - let userName = $ref<string>('')
  - userName = "John Doe"
- to enable add the following to nuxt.config.ts
  - experimental: { reactivityTransform: true }
Props are defined using interfaces, this means you can access props without having to use props.myVar
- without interface definition
  - const props = defineProps(['userName'])
  - console.log("NAME", props.userName)
- with interface definition
  - interface Props { userName: string; }
  - const { userName = 'Joe Doe' } = defineProps<Props>();
  - console.log("NAME", userName)
Using reactivity-transform and defining props with interfaces keeps our resulting code very clean because you do not have to use myvar.value or props.myvar.

Structure Changes

Copy each Vue2 file into a new Vue3 file using proper Nuxt folders:
- components/UserInfoCard.vue > components/User/InfoCard.vue
Move the Script block above the Template block

Script Block Changes

Add into the script tag: <script setup lang="ts">
Search and remove "this."
Delete all imports statements, most are auto-imported by Nuxt
Remove from the copied Vue2 export block {}:
- name
- components
Migrate Props
- interface Props { sid: string;}
- const { sid } = defineProps< Props >();
Migrate Data
- let var = $ref< string >()
Migrate Computed
- mapGetters > const { var } = $(useSomething())
- const var = $computed(()=>{})
Migrate Created
- onBeforeMount(() => {})
Migrate Watchers
- watch(() => varToWatch,() => { functionToCall(); });
- watch(() => varToWatch,() => { functionToCall(); }, { immediate: true });
- watch(() => varToWatch,() => { functionToCall(); }, { deep: true, immediate: true });
- watch([() => var1ToWatch, () => var2ToWatch],() => { functionToCall(); })
Migrate Methods
- mapActions > const { function } = useStore()
- copy functions directly out of method {} block
Change constants to enums
Paages
- Add the Nuxt Page metadata
- definePageMeta({key: (route) => route.fullPath, middleware: ['auth'], layout: 'page',});

Template Block Changes

Remove all Filters replace with functions or composables
- <span>{{ updateDate | dateFormat}}</span> > <span>{{ formatDate(updateDate)}}</span>
Change $refs
- $refs are no longer available for access to components in template as a ref
- Include component with ref: <UserDialog ref="UserDialogRef" />
- On UserDialog component expose function to open: defineExpose({showDialog})
- In script of parent, create a ref: const UserDialogRef = $ref<InstanceType<typeof UserDialog> | null>(null);
- from the parent call the exposed method: MyDialogRef.showDialog();

Vuetify Changes

Change Icons
- change fa-icon > v-icon icon="fa:fas fa-home"
- check text colors green--text > color="green"
Change Text Typogrpahy
- title > text-h5
- caption > text-caption
- success--text > text-success
- warning--text > text-warning
- error--text > text-error
- white--text > text-white
v-list Changes
- remove v-list-item-content > It is now the default slot on v-list-item
v-chip Changes
- sizes are now size="small" not attributes
- colors are now color="primary" not a class
- default is a translucent background, need to use variant="flat"
v-select and v-autocomplete
- @input= > @update:model-value=
- item-text > item-title
v-tabs
- v-tabs-items > v-window
- v-tab-item > v-window-item
v-simple-table
- v-simple-table > v-table
- dense > density="compact"
v-virtual-scroll (Not available until Vuetify 3.1+)
- Use RecycleScroller (https://www.npmjs.com/package/vue-virtual-scroller)
v-textfield
- filled > variant="plain"
- append-icon="mdi-magnify" > prepend-inner-icon="fa:fas fa-search"
- @input= > @update:model-value=
Activators (v-tooltip)
- #activator="{ on }" > #activator="{ props }"
- v-on="on" > v-bind="props"

Code Example

Original Vue2 / Vuetify2 file

components/PersonSoftwareCard.vue

<template>
  <BaseCard :title="title">
    <template #body>
      <LoadingSpinner :loading="softwaresLoading" title="Software" :size="30">
        <v-row>
          <v-col cols="6">
            <div class="title grey darken-2 pl-2"> Owned: </div>
            <div v-if="softwareOwned.length > 0">
              <v-virtual-scroll
                :bench="10"
                :items="softwareOwned"
                :item-height="30"
                :height="200"
                class="scroller-blue"
              >
                <template #default="{ item, index }">
                  <v-row
                    dense
                    no-gutters
                    style="height: 30px"
                    :style="AppService.getAltRowColor(index, '#121212')"
                    align="center"
                  >
                    <v-col cols="8" class="text-truncate">
                      <span class="ml-2 font-weight-bold">{{ item.softwareName }}</span>
                    </v-col>
                    <v-col cols="1">
                      {{ item.quantity | numFormat('0,0') }}
                    </v-col>
                    <v-col cols="3" class="text-center">
                      <SoftwareStatusLabel :software="item" />
                    </v-col>
                  </v-row>
                </template>
              </v-virtual-scroll>
            </div>
            <div v-else>
              <div class="text-center headline my-5">
                There is no Software assigned to {{ userId }} as the Owned.
              </div>
            </div>
          </v-col>
          <v-col cols="6">
            <div class="title grey darken-2 pl-2"> Subscribed: </div>
            <div v-if="softwareSubscribed.length > 0">
              <v-virtual-scroll :bench="10" :items="softwareSubscribed" :item-height="30" :height="200" class="scroller-blue">
                <template #default="{ item, index }">
                  <v-row
                    dense
                    no-gutters
                    style="height: 30px"
                    :style="AppService.getAltRowColor(index, '#121212')"
                    align="center"
                  >
                    <v-col cols="8" class="text-truncate">
                      <span class="ml-2 font-weight-bold">{{ item.softwareName }}</span>
                    </v-col>
                    <v-col cols="1">
                      {{ item.quantity | numFormat('0,0') }}
                    </v-col>
                    <v-col cols="3" class="text-center">
                      <SoftwareStatusLabel :software="item" />
                    </v-col>
                  </v-row>
                </template>
              </v-virtual-scroll>
            </div>
            <div v-else>
              <div class="text-center headline my-5">
                There is no Software assigned to {{ userId }} as the Subscribed.
              </div>
            </div>
          </v-col>
        </v-row>
      </LoadingSpinner>
    </template>
  </BaseCard>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import AppService from '@/services/app.service.js'
import BaseCard from '@/components/layout/BaseCard.vue'
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
import SoftwareStatusLabel from '@/components/software/SoftwareStatusLabel.vue'

export default {
  name: 'PersonSoftwareCard',
  components: {
    BaseCard,
    LoadingSpinner,
    SoftwareStatusLabel,
  },
  props: {
    userId: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      AppService,
      softwareOwned: [],
      softwareSubscribed: [],
    }
  },
  computed: {
    ...mapGetters(['softwares', 'softwaresLoading', 'userIdAuth']),
    title() {
      return this.userId === this.userIdAuth ? 'My Assigned Software' : `Software Assigned to: ${this.userId}`
    },
  },
  created() {
    this.initialize()
  },
  methods: {
    ...mapActions(['getSoftwares']),
    async initialize() {
      if (this.softwares.length === 0) {
        await this.getSoftwares()
      }
      this.softwareOwned = this.softwares.filter((s) => {
        if (s.ownedUserId?._id === this.userId) return true
        return false
      })
      this.softwareSubscribed = this.softwares.filter((s) => {
        if (s.subscribeUserId?._id === this.userId) return true
        return false
      })
    },
  },
}
</script>

New Vue3 / Nuxt3 / Vuetify3 file

components/Person/SoftwareCard.vue

<script lang="ts" setup>
interface Props {
  userId?: string;
}
const { userId } = defineProps<Props>();

const NumSvc = useNumeral();

let softwareOwned = $ref<any[]>([]);
let softwareSubscribed = $ref<any[]>([]);

const { userIdAuth } = useAuthStore();
const { getAltRowColor } = useAppStore();
const { getSoftwares, softwares, softwaresLoading } = useSoftwareStore();

const title = computed(() => {
  return userId === userIdAuth ? 'My Assigned Software' : `Software Assigned to: ${userId}`;
});

onBeforeMount(async () => {
  if (softwares.length === 0) {
    await getSoftwares();
  }
  softwareOwned = softwares.filter((s) => {
    if (s.ownedUserId?._id === userId) return true;
    return false;
  });
  softwareSubscribed = softwares.filter((s) => {
    if (s.subscribeUserId?._id === userId) return true;
    return false;
  });
});
</script>

<template>
  <BaseCard :title="title">
    <template #body>
      <LoadingSpinner :loading="softwaresLoading" title="Software" :size="30">
        <v-row>
          <v-col cols="6">
            <div class="text-h5 grey-darken-2 pl-2">Owned:</div>
            <div v-if="softwareOwned.length > 0">
              <RecycleScroller
                v-slot="{ item, index }"
                :items="softwareOwned"
                :item-size="30"
                class="scroller-200"
                key-field="_id"
              >
                <v-row no-gutters style="height: 30px" :style="getAltRowColor(index, '#121212')" align="center">
                  <v-col cols="8" class="text-truncate">
                    <span class="ml-2 font-weight-bold">{{ item.softwareName }}</span>
                  </v-col>
                  <v-col cols="1">
                    {{ NumSvc.numberFormat(item.quantity, '0,0') }}
                  </v-col>
                  <v-col cols="3" class="text-center">
                    <SoftwareStatusLabel :software="item" />
                  </v-col>
                </v-row>
              </RecycleScroller>
            </div>
            <div v-else>
              <div class="text-center text-h5 my-5">
                There is no Software assigned to <b>{{ userId }}</b> as the Owned.
              </div>
            </div>
          </v-col>
          <v-col cols="6">
            <div class="text-h5 grey-darken-2 pl-2">Subscribed:</div>
            <div v-if="softwareSubscribed.length > 0">
              <RecycleScroller
                v-slot="{ item, index }"
                :items="softwareSubscribed"
                :item-size="30"
                class="scroller-200"
                key-field="_id"
              >
                <v-row no-gutters style="height: 30px" :style="getAltRowColor(index, '#121212')" align="center">
                  <v-col cols="8" class="text-truncate">
                    <span class="ml-2 font-weight-bold">{{ item.softwareName }}</span>
                  </v-col>
                  <v-col cols="1">
                    {{ NumSvc.numberFormat(item.quantity, '0,0') }}
                  </v-col>
                  <v-col cols="3" class="text-center">
                    <SoftwareStatusLabel :software="item" />
                  </v-col>
                </v-row>
              </RecycleScroller>
            </div>
            <div v-else>
              <div class="text-center text-h5 my-5">
                There is no Software assigned to <b>{{ userId }}</b> as the Subscribed.
              </div>
            </div>
          </v-col>
        </v-row>
      </LoadingSpinner>
    </template>
  </BaseCard>
</template>

mgd216/vue_nuxt_vuetify_migration.md

Vue3 / Nuxt3 / Vuetify3 Migration Steps

Structure Changes

Script Block Changes

Template Block Changes

Vuetify Changes

Code Example

Original Vue2 / Vuetify2 file

New Vue3 / Nuxt3 / Vuetify3 file