From c30b172a74423ccd8a78411e9682dd063c6d3e95 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Wed, 18 Oct 2023 22:54:37 +0900
Subject: [PATCH 01/29] chore: Migrate @ui/mixins to composables

---
 .../ui/composables/useDisableScroll.ts        | 29 ++++++++++++++++
 .../components/ui/composables/useDisabled.ts  | 34 +++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 packages/app-frontend/src/features/components/ui/composables/useDisableScroll.ts
 create mode 100644 packages/app-frontend/src/features/components/ui/composables/useDisabled.ts

diff --git a/packages/app-frontend/src/features/components/ui/composables/useDisableScroll.ts b/packages/app-frontend/src/features/components/ui/composables/useDisableScroll.ts
new file mode 100644
index 000000000..56c1c21e2
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/composables/useDisableScroll.ts
@@ -0,0 +1,29 @@
+import { onBeforeUnmount, onMounted } from 'vue'
+
+let count = 0
+
+function getScrollingElements () {
+  return document.querySelectorAll('.vue-ui-disable-scroll, body')
+}
+
+function updateScroll () {
+  if (count === 0) {
+    getScrollingElements().forEach((el) =>
+      el.classList.remove('vue-ui-no-scroll'),
+    )
+  } else if (count === 1) {
+    getScrollingElements().forEach((el) => el.classList.add('vue-ui-no-scroll'))
+  }
+}
+
+export function useDisableScroll () {
+  onMounted(() => {
+    count++
+    updateScroll()
+  })
+
+  onBeforeUnmount(() => {
+    count--
+    updateScroll()
+  })
+}
diff --git a/packages/app-frontend/src/features/components/ui/composables/useDisabled.ts b/packages/app-frontend/src/features/components/ui/composables/useDisabled.ts
new file mode 100644
index 000000000..81132f843
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/composables/useDisabled.ts
@@ -0,0 +1,34 @@
+/**
+ * (Use with the DisabledChild mixin)
+ * Allow disabling an entire tree of components implementing the DisabledChild mixin.
+ */
+
+import { provide, reactive, watch, inject, computed } from 'vue'
+
+export const useDisabledParent = (props: { disabled?: boolean }) => {
+  const injectedDisableData = reactive({
+    value: props.disabled || false,
+  })
+
+  provide('VueDisableMixin', {
+    data: injectedDisableData,
+  })
+
+  watch(
+    () => props.disabled,
+    (value, oldValue) => {
+      if (value !== oldValue) injectedDisableData.value = value
+    },
+  )
+}
+
+export const useDisabledChild = (props: { disabled?: boolean }) => {
+  const injectDisable = inject<{ data: { value: boolean } } | undefined>(
+    'VueDisableMixin',
+    null,
+  )
+
+  return {
+    finalDisabled: computed(() => props.disabled || (injectDisable && injectDisable.data.value)),
+  }
+}

From 28697ded58fd0294430c24c06159176c9e154de2 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Wed, 18 Oct 2023 22:55:26 +0900
Subject: [PATCH 02/29] chore: Migrate @ui/components to setup syntax

---
 .../components/ui/components/VueButton.vue    | 108 +++++
 .../components/ui/components/VueDisable.vue   |  48 ++
 .../components/ui/components/VueDropdown.vue  | 196 ++++++++
 .../ui/components/VueDropdownButton.vue       |  13 +
 .../components/ui/components/VueFormField.vue |  94 ++++
 .../components/ui/components/VueGroup.vue     | 131 ++++++
 .../ui/components/VueGroupButton.vue          |  55 +++
 .../components/ui/components/VueIcon.vue      |  20 +
 .../components/ui/components/VueInput.vue     | 429 ++++++++++++++++++
 .../ui/components/VueLoadingBar.vue           |  26 ++
 .../ui/components/VueLoadingIndicator.vue     |   6 +
 .../components/ui/components/VueModal.vue     |  96 ++++
 .../components/ui/components/VueSelect.vue    |  81 ++++
 .../ui/components/VueSelectButton.vue         |  52 +++
 .../components/ui/components/VueSwitch.vue    |  83 ++++
 15 files changed, 1438 insertions(+)
 create mode 100644 packages/app-frontend/src/features/components/ui/components/VueButton.vue
 create mode 100644 packages/app-frontend/src/features/components/ui/components/VueDisable.vue
 create mode 100644 packages/app-frontend/src/features/components/ui/components/VueDropdown.vue
 create mode 100644 packages/app-frontend/src/features/components/ui/components/VueDropdownButton.vue
 create mode 100644 packages/app-frontend/src/features/components/ui/components/VueFormField.vue
 create mode 100644 packages/app-frontend/src/features/components/ui/components/VueGroup.vue
 create mode 100644 packages/app-frontend/src/features/components/ui/components/VueGroupButton.vue
 create mode 100644 packages/app-frontend/src/features/components/ui/components/VueIcon.vue
 create mode 100644 packages/app-frontend/src/features/components/ui/components/VueInput.vue
 create mode 100644 packages/app-frontend/src/features/components/ui/components/VueLoadingBar.vue
 create mode 100644 packages/app-frontend/src/features/components/ui/components/VueLoadingIndicator.vue
 create mode 100644 packages/app-frontend/src/features/components/ui/components/VueModal.vue
 create mode 100644 packages/app-frontend/src/features/components/ui/components/VueSelect.vue
 create mode 100644 packages/app-frontend/src/features/components/ui/components/VueSelectButton.vue
 create mode 100644 packages/app-frontend/src/features/components/ui/components/VueSwitch.vue

diff --git a/packages/app-frontend/src/features/components/ui/components/VueButton.vue b/packages/app-frontend/src/features/components/ui/components/VueButton.vue
new file mode 100644
index 000000000..71018c81e
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/components/VueButton.vue
@@ -0,0 +1,108 @@
+<template>
+  <component
+    :is="component"
+    class="vue-ui-button"
+    :class="[
+      component,
+      {
+        loading,
+        ghost,
+      },
+    ]"
+    :type="type"
+    :tabindex="ghost ? -1 : 0"
+    role="button"
+    :aria-disabled="ghost ? true : null"
+    @click.capture="handleClick"
+  >
+    <VueLoadingIndicator v-if="loading" />
+
+    <span class="content">
+      <VueLoadingIndicator
+        v-if="loadingSecondary"
+        class="inline small loading-secondary"
+      />
+      <VueIcon v-else-if="iconLeft" :icon="iconLeft" class="button-icon left" />
+
+      <span class="default-slot">
+        <slot>
+          {{ label }}
+        </slot>
+      </span>
+
+      <div v-if="tag != null" class="tag-wrapper">
+        <div class="tag">{{ tag }}</div>
+      </div>
+
+      <VueIcon v-if="iconRight" :icon="iconRight" class="button-icon right" />
+    </span>
+  </component>
+</template>
+
+<script lang="ts">
+import { PropType, useAttrs, computed, defineComponent } from 'vue'
+import { useDisabledChild } from '../composables/useDisabled'
+
+export default defineComponent({
+  props: {
+    iconLeft: {
+      type: String,
+      default: '',
+    },
+    iconRight: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    loading: Boolean,
+    loadingSecondary: Boolean,
+    type: {
+      type: String as PropType<'button' | 'submit' | 'reset'>,
+      default: 'button',
+    },
+    tag: {
+      type: [String, Number],
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['click'],
+  setup (props, { emit }) {
+    const attrs = useAttrs()
+    const { finalDisabled } = useDisabledChild(props)
+    const component = computed(() => {
+      if (attrs.to) {
+        return 'router-link'
+      } else if (attrs.href) {
+        return 'a'
+      } else {
+        return 'button'
+      }
+    })
+    const ghost = computed(() => {
+      return finalDisabled.value || props.loading || props.loadingSecondary
+    })
+    const handleClick = (event: MouseEvent) => {
+      if (ghost.value) {
+        event.preventDefault()
+        event.stopPropagation()
+        event.stopImmediatePropagation()
+      } else {
+        emit('click', event)
+      }
+    }
+    return {
+      attrs,
+      component,
+      ghost,
+      handleClick,
+    }
+  },
+})
+</script>
diff --git a/packages/app-frontend/src/features/components/ui/components/VueDisable.vue b/packages/app-frontend/src/features/components/ui/components/VueDisable.vue
new file mode 100644
index 000000000..5d27b56a7
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/components/VueDisable.vue
@@ -0,0 +1,48 @@
+<template>
+  <PropagateDisable :disabled="propagateDisabled">
+    <slot />
+  </PropagateDisable>
+</template>
+
+<script>
+import { computed, defineComponent, h } from 'vue'
+import { useDisabledChild, useDisabledParent } from '../composables/useDisabled'
+
+export default defineComponent({
+  name: 'VueDisable',
+  props: {
+    stopPropagation: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    PropagateDisable: {
+      props: {
+        disabled: {
+          type: Boolean,
+          default: false,
+        },
+      },
+      setup (props, { slots }) {
+        useDisabledParent(props)
+        return () => h('div', { class: 'vue-ui-disable' }, slots)
+      },
+    },
+  },
+  setup (props) {
+    const { finalDisabled } = useDisabledChild(props)
+    const propagateDisabled = computed(() => {
+      return props.stopPropagation ? props.disabled : finalDisabled.value
+    })
+
+    return {
+      propagateDisabled,
+    }
+  },
+})
+</script>
diff --git a/packages/app-frontend/src/features/components/ui/components/VueDropdown.vue b/packages/app-frontend/src/features/components/ui/components/VueDropdown.vue
new file mode 100644
index 000000000..41a553da8
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/components/VueDropdown.vue
@@ -0,0 +1,196 @@
+<template>
+  <VDropdown
+    ref="popover"
+    class="vue-ui-dropdown"
+    :auto-hide="autoHide"
+    :distance="offset[1]"
+    :skidding="offset[0]"
+    :disabled="finalDisabled"
+    :shown="model"
+    @update:shown="onUpdateShown"
+    @keydown.tab="onKeyTab"
+  >
+    <div class="dropdown-trigger">
+      <slot name="trigger">
+        <VueButton
+          :class="buttonClass"
+          :icon-left="iconLeft"
+          :icon-right="iconRight"
+          :disabled="finalDisabled"
+          >{{ label }}</VueButton>
+      </slot>
+    </div>
+
+    <template #popper>
+      <VueDisable
+        ref="popoverContent"
+        class="vue-ui-dropdown-content"
+        :class="contentClass"
+        :style="{
+          minWidth: forceMinSize ? `${width}px` : '0',
+        }"
+        :disabled="!model"
+        @mousedown="onPopoverContentMousedown"
+      >
+        <slot />
+      </VueDisable>
+    </template>
+
+    <resize-observer v-if="forceMinSize" @notify="onResize" />
+  </VDropdown>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  ref,
+  nextTick,
+  onBeforeUnmount,
+  computed,
+  watch,
+} from 'vue'
+import { useDisabledChild } from '../composables/useDisabled'
+
+export default defineComponent({
+  name: 'VueDropdown',
+  emits: ['update:modelValue', 'popover-mousedown', 'popover-mouseup'],
+  props: {
+    autoHide: {
+      type: Boolean,
+      default: true,
+    },
+
+    buttonClass: {
+      type: [String, Array, Object],
+      default: null,
+    },
+
+    contentClass: {
+      type: [String, Array, Object],
+      default: null,
+    },
+
+    forceMinSize: {
+      type: Boolean,
+      default: false,
+    },
+
+    iconLeft: {
+      type: String,
+      default: null,
+    },
+
+    iconRight: {
+      type: String,
+      default: null,
+    },
+
+    label: {
+      type: [String, Number],
+      default: null,
+    },
+
+    offset: {
+      type: Array,
+      default: () => [0, 4],
+    },
+
+    noPopoverFocus: {
+      type: Boolean,
+      default: false,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup (props, { emit }) {
+    const width = ref(0)
+    const popoverContent = ref<HTMLElement | null>(null)
+    const popover = ref<HTMLElement | null>(null)
+    const { finalDisabled } = useDisabledChild(props)
+
+    const isOpen = ref(props.modelValue)
+
+    const model = computed({
+      get: () => isOpen.value,
+      set: value => {
+        isOpen.value = value
+        emit('update:modelValue', value)
+      },
+    })
+
+    watch(() => props.modelValue, () => {
+      if (props.modelValue !== model.value) {
+        model.value = props.modelValue
+      }
+    })
+
+    onMounted(async () => {
+      if (props.forceMinSize) {
+        await nextTick()
+        onResize()
+      }
+    })
+
+    onBeforeUnmount(() => {
+      removeGlobalMouseEvents()
+    })
+
+    function onKeyTab (event: KeyboardEvent) {
+      // Focus the first focusable element in the popover instead of cycling through the whole app
+      // (popover content will be append at the end of the body)
+      if (model.value && !props.noPopoverFocus) {
+        const el = popoverContent.value.querySelector<HTMLElement>(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]',
+        )
+        if (el) {
+          event.preventDefault()
+          el.focus()
+        }
+      }
+    }
+
+    function onPopoverContentMousedown (event: MouseEvent) {
+      emit('popover-mousedown', event)
+      window.addEventListener('mouseup', onPopoverContentMouseup)
+    }
+
+    function onPopoverContentMouseup (event: MouseEvent) {
+      emit('popover-mouseup', event)
+      removeGlobalMouseEvents()
+    }
+
+    function onResize () {
+      width.value = popover.value.offsetWidth
+    }
+
+    function onUpdateShown (value: boolean) {
+      model.value = value
+    }
+
+    function removeGlobalMouseEvents () {
+      window.removeEventListener('mouseup', onPopoverContentMouseup)
+    }
+
+    return {
+      model,
+      width,
+      popoverContent,
+      popover,
+      onKeyTab,
+      onResize,
+      onPopoverContentMousedown,
+      onUpdateShown,
+      finalDisabled,
+    }
+  },
+})
+</script>
diff --git a/packages/app-frontend/src/features/components/ui/components/VueDropdownButton.vue b/packages/app-frontend/src/features/components/ui/components/VueDropdownButton.vue
new file mode 100644
index 000000000..ecbd0fbb1
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/components/VueDropdownButton.vue
@@ -0,0 +1,13 @@
+<template>
+  <VueButton v-close-popper="true" class="vue-ui-dropdown-button">
+    <slot />
+  </VueButton>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'VueDropdownButton',
+})
+</script>
diff --git a/packages/app-frontend/src/features/components/ui/components/VueFormField.vue b/packages/app-frontend/src/features/components/ui/components/VueFormField.vue
new file mode 100644
index 000000000..76437aba0
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/components/VueFormField.vue
@@ -0,0 +1,94 @@
+<template>
+  <div
+    class="vue-ui-form-field"
+    :class="{
+      focused: injectedData.focused,
+      [`status-${injectedData.status}`]: injectedData.status,
+    }"
+  >
+    <div class="wrapper">
+      <div class="title">
+        <slot name="title">
+          <span v-html="title" />
+        </slot>
+      </div>
+      <div class="content">
+        <slot />
+      </div>
+      <div
+        class="subtitle"
+        :class="{
+          [`vue-ui-text ${injectedData.status}`]: injectedData.status,
+        }"
+      >
+        <VueIcon v-if="subtitleIconId" :icon="subtitleIconId" />
+        <slot name="subtitle">
+          <span v-html="subtitle" />
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, provide, reactive } from 'vue'
+
+const statusIcons = {
+  danger: 'error',
+  warning: 'warning',
+  info: 'info',
+  success: 'check_circle',
+} as const
+
+export default defineComponent({
+  props: {
+    subtitle: {
+      type: String,
+      default: undefined,
+    },
+    subtitleIcon: {
+      type: String,
+      default: undefined,
+    },
+    statusIcon: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: undefined,
+    },
+  },
+
+  setup (props) {
+    const injectedData = reactive({
+      focused: false,
+      status: null,
+    })
+
+    provide('VueFormField', {
+      data: injectedData,
+    })
+
+    const subtitleIconId = computed(() => {
+      if (props.subtitleIcon) {
+        return props.subtitleIcon
+      }
+
+      if (props.statusIcon) {
+        const status = injectedData.status
+        if (status) {
+          return statusIcons[status]
+        }
+      }
+
+      return ''
+    })
+
+    return {
+      injectedData,
+      subtitleIconId,
+    }
+  },
+})
+</script>
diff --git a/packages/app-frontend/src/features/components/ui/components/VueGroup.vue b/packages/app-frontend/src/features/components/ui/components/VueGroup.vue
new file mode 100644
index 000000000..abdb619ba
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/components/VueGroup.vue
@@ -0,0 +1,131 @@
+<template>
+  <div
+    ref="root"
+    class="vue-ui-group"
+    :class="{
+      'has-indicator': indicator,
+    }"
+  >
+    <div class="content-wrapper">
+      <div class="content">
+        <slot />
+      </div>
+      <resize-observer
+        v-if="indicator"
+        @notify="updateIndicator()"
+      />
+    </div>
+
+    <div
+      v-if="indicator && indicatorStyle"
+      class="indicator"
+      :style="{
+        top: `${indicatorStyle.top}px`,
+        left: `${indicatorStyle.left}px`,
+        width: `${indicatorStyle.width}px`,
+        height: `${indicatorStyle.height}px`,
+      }"
+    >
+      <div class="content">
+        <slot name="indicator" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  onMounted,
+  provide,
+  ref,
+  watch,
+  nextTick,
+  useSlots,
+  computed,
+  defineComponent,
+} from 'vue'
+
+export default defineComponent({
+  props: {
+    indicator: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: [String, Object],
+      default: '',
+    },
+  },
+  emits: ['update:modelValue'],
+
+  setup (props, { emit }) {
+    const indicatorStyle = ref<null | {
+      top: number
+      left: number
+      width: number
+      height: number
+    }>(null)
+
+    const model = computed({
+      get: () => props.modelValue,
+      set: (value) => emit('update:modelValue', value),
+    })
+
+    provide('VueGroup', {
+      data: model,
+      setValue: (value) => (model.value = value),
+    })
+
+    const rootEl = ref<null | HTMLElement>(null)
+
+    const updateIndicator = async () => {
+      await nextTick()
+      const el = rootEl.value?.querySelector('.selected') as HTMLElement
+      if (!el) {
+        indicatorStyle.value = null
+        return
+      }
+      const offset = {
+        top: el.offsetTop,
+        left: el.offsetLeft,
+        width: el.offsetWidth,
+        height: el.offsetHeight,
+      }
+      let parent = el.offsetParent as HTMLElement
+      while (parent && parent !== rootEl.value) {
+        offset.top += parent.offsetTop
+        offset.left += parent.offsetLeft
+        parent = parent.offsetParent as HTMLElement
+      }
+      indicatorStyle.value = offset
+    }
+
+    watch(
+      () => model.value,
+      (value, oldValue) => {
+        if (value !== oldValue) {
+          updateIndicator()
+        }
+      },
+    )
+
+    const slot = useSlots()
+    watch(
+      () => slot.length,
+      () => {
+        updateIndicator()
+      },
+    )
+
+    onMounted(() => {
+      updateIndicator()
+    })
+
+    return {
+      rootEl,
+      indicatorStyle,
+      updateIndicator,
+    }
+  },
+})
+</script>
diff --git a/packages/app-frontend/src/features/components/ui/components/VueGroupButton.vue b/packages/app-frontend/src/features/components/ui/components/VueGroupButton.vue
new file mode 100644
index 000000000..ae922798a
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/components/VueGroupButton.vue
@@ -0,0 +1,55 @@
+<template>
+  <VueButton
+    class="vue-ui-group-button"
+    :class="{
+      selected,
+      flat: flat && !selected,
+    }"
+    :aria-selected="selected ? true : null"
+    @click="handleClick"
+  >
+    <slot />
+  </VueButton>
+</template>
+
+<script lang="ts">
+import { Ref, computed, inject, watch, defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'VueGroupButton',
+  props: {
+    value: {
+      type: [String, Object],
+      required: true,
+    },
+    flat: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['selected', 'click'],
+  setup (props, { emit }) {
+    const { data, setValue } = inject<{
+      data: Ref<string | Record<string, unknown>>
+      setValue: (value: string | Record<string, unknown>) => void
+        }>('VueGroup')
+    const selected = computed(() => props.value === data.value)
+
+    watch(selected, (value, oldValue) => {
+      if (value !== oldValue) {
+        emit('selected', value)
+      }
+    })
+
+    const handleClick = () => {
+      emit('click')
+      setValue(props.value)
+    }
+
+    return {
+      selected,
+      handleClick,
+    }
+  },
+})
+</script>
diff --git a/packages/app-frontend/src/features/components/ui/components/VueIcon.vue b/packages/app-frontend/src/features/components/ui/components/VueIcon.vue
new file mode 100644
index 000000000..e780e07ad
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/components/VueIcon.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="vue-ui-icon">
+    <svg>
+      <use :href="`#ic_${icon}_standard`" />
+    </svg>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+  },
+})
+</script>
diff --git a/packages/app-frontend/src/features/components/ui/components/VueInput.vue b/packages/app-frontend/src/features/components/ui/components/VueInput.vue
new file mode 100644
index 000000000..d3df00326
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/components/VueInput.vue
@@ -0,0 +1,429 @@
+<template>
+  <div
+    class="vue-ui-input"
+    :class="[
+      `type-${type}`,
+      {
+        focused,
+        'show-suggestion': showSuggestion,
+        [`status-${status}`]: status,
+      },
+      $attrs.class,
+    ]"
+    @click="focus()"
+  >
+    <div class="content">
+      <VueLoadingIndicator v-if="loadingLeft" class="small left" />
+
+      <VueIcon v-else-if="iconLeft" :icon="iconLeft" class="input-icon left" />
+
+      <slot name="left" />
+
+      <div class="input-wrapper">
+        <component
+          :is="type === 'textarea' ? type : 'input'"
+          ref="input"
+          class="input"
+          :type="type"
+          :value.prop="modelValue"
+          :placeholder="placeholder"
+          v-bind="$attrs"
+          @input="model = $event.currentTarget.value"
+          @focus="onFocus"
+          @blur="onBlur"
+          @keydown.tab="onKeyTab"
+        />
+
+        <input
+          v-if="showSuggestion"
+          class="input suggestion"
+          :value="suggestion"
+          disabled
+        />
+      </div>
+
+      <slot name="right" />
+
+      <VueIcon v-if="iconRight" :icon="iconRight" class="input-icon right" />
+
+      <VueLoadingIndicator v-if="loadingRight" class="small right" />
+
+      <!-- Focus animation -->
+      <div class="border" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  inject,
+  defineComponent,
+  ref,
+  computed,
+  watch,
+  UnwrapNestedRefs,
+  reactive,
+} from 'vue'
+
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    iconLeft: {
+      type: String,
+      default: null,
+    },
+    iconRight: {
+      type: String,
+      default: null,
+    },
+    loadingLeft: {
+      type: Boolean,
+      default: false,
+    },
+    loadingRight: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: undefined,
+    },
+    selectAll: {
+      type: Boolean,
+      default: false,
+    },
+    status: {
+      type: String,
+      default: undefined,
+    },
+    suggestion: {
+      type: [String, Number],
+      default: null,
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    modelValue: {
+      type: [String, Number],
+      required: true,
+    },
+  },
+  emits: ['blur', 'focus', 'update:modelValue'],
+
+  setup (props, { emit }) {
+    const vueFormField = inject<{
+      data: UnwrapNestedRefs<{
+        focused: boolean
+        status: string | null
+      }>
+    }>('VueFormField', null)
+
+    const model = computed({
+      get: () => props.modelValue,
+      set: (value: string | number) => {
+        emit('update:modelValue', value)
+      },
+    })
+    const input = ref<HTMLInputElement | HTMLTextAreaElement | null>(null)
+    const focused = ref(false)
+    const select = reactive({
+      autoSelect: false,
+      selectAllTimer: null,
+    })
+
+    const showSuggestion = computed(
+      () =>
+        props.suggestion !== null &&
+        props.suggestion !== model.value &&
+        focused.value &&
+        model.value,
+    )
+
+    watch(
+      () => focused.value,
+      (value) => {
+        if (vueFormField) {
+          vueFormField.data.focused = value
+        }
+      },
+      {
+        immediate: true,
+      },
+    )
+
+    watch(
+      () => props.status,
+      (value) => {
+        if (vueFormField) {
+          vueFormField.data.status = value
+        }
+      },
+      {
+        immediate: true,
+      },
+    )
+
+    const focus = () => {
+      input.value?.focus()
+    }
+
+    const autoSelectAll = () => {
+      if (props.selectAll && select.autoSelect) {
+        const inputElement = input.value
+        requestAnimationFrame(() => {
+          inputElement.setSelectionRange(0, inputElement.value.length)
+          clearTimeout(select.selectAllTimer)
+          select.selectAllTimer = setTimeout(() => {
+            select.autoSelect = false
+          }, 500)
+        })
+      }
+    }
+
+    const onBlur = (event: FocusEvent) => {
+      focused.value = false
+      select.autoSelect = false
+      emit('blur', event)
+    }
+
+    const onFocus = (event: FocusEvent) => {
+      if (!focused.value) {
+        clearTimeout(select.selectAllTimer)
+        select.autoSelect = true
+      }
+      focused.value = true
+      autoSelectAll()
+      emit('focus', event)
+    }
+
+    const onKeyTab = (event: KeyboardEvent) => {
+      if (showSuggestion.value) {
+        model.value = props.suggestion
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    }
+
+    return {
+      input,
+      focused,
+      showSuggestion,
+      model,
+      focus,
+      onBlur,
+      onFocus,
+      onKeyTab,
+    }
+  },
+})
+</script>
+
+<style lang="stylus">
+@import '~@vue/ui/src/style/imports'
+
+colors($color)
+  > .content
+    > .border
+      background $color
+  &.focused
+    > .content
+      > .vue-ui-loading-indicator
+        .animation
+          border-right-color $color
+          border-bottom-color $color
+      > .input-icon
+        svg
+          fill rgba($color, .8)
+
+.vue-ui-input
+  $lightened = $vue-ui-gray-500
+  display inline-block
+  vertical-align middle
+  box-sizing border-box
+  width auto
+  min-width 200px
+
+  > .content
+    h-box()
+    box-center()
+    padding 0 10px
+    border solid 1px $vue-ui-primary-100
+    color $vue-ui-gray-800
+    border-radius $br
+    transition background .3s
+    position relative
+    .vue-ui-dark-mode &
+      border-color $vue-ui-gray-700
+      color $vue-ui-white
+
+    > .input-wrapper
+      position relative
+      width 0
+      flex auto 1 1
+
+      > .input
+        position relative
+        z-index 1
+        font-family inherit
+        font-size 14px
+        line-height 14px
+        color @color
+        padding 0
+        width 100%
+        display block
+        border none
+        background transparent
+        .vue-ui-dark-mode &
+          color $vue-ui-white
+        &:not(textarea)
+          height 30px
+        &::placeholder
+          color $lightened
+          .vue-ui-dark-mode &
+            color $vue-ui-gray-300
+        // Disable noisy browser styles
+        outline none
+        &::-moz-focus-inner
+          border 0
+
+      > textarea.input
+        padding 8px 10px
+        resize vertical
+        min-height 30px
+        box-sizing border-box
+        line-height 18px
+
+      > .suggestion
+        position absolute
+        z-index 0
+        top 0
+        left 0
+        overflow hidden
+        white-space nowrap
+        text-overflow ellipsis
+        color $lightened
+        pointer-events none
+
+    > .input-icon
+      &.left
+        margin-right 6px
+      &.right
+        margin-left 6px
+      svg
+        fill $lightened
+        transition fill .3s
+
+    > .vue-ui-loading-indicator
+      &.left
+        margin-right 8px
+      &.right
+        margin-left 8px
+      .animation
+        border-right-color $lightened
+        border-bottom-color $lightened
+
+    > .border
+      position absolute
+      bottom -1px
+      left 30%
+      right @left
+      opacity 0
+      height 2px
+      pointer-events none
+      transition left .15s, right .15s, opacity .15s
+
+  &.type-textarea
+    > .content
+      padding 0
+
+  &:not(.flat)
+    > .content
+      background $vue-ui-white
+      .vue-ui-dark-mode &
+        background $vue-ui-gray-900
+
+  &.show-suggestion
+    > .content > .input-wrapper > .input
+      &::placeholder
+        color transparent
+
+  // Colors
+  colors($vue-ui-primary-500)
+  &.accent
+    colors($vue-ui-accent-500)
+    .vue-ui-dark-mode &
+      colors($vue-ui-accent-300)
+  &.danger,
+  &.status-danger
+    colors($vue-ui-danger-500)
+  &.warning,
+  &.status-warning
+    colors($vue-ui-warning-500)
+  &.info,
+  &.status-info
+    colors($vue-ui-info-500)
+  &.success,
+  &.status-success
+    colors($vue-ui-primary-500)
+
+  &.focused
+    &:not(.flat)
+      > .content
+        > .border
+          left 0
+          right @left
+          opacity 1
+      &.round
+        > .content > .border
+          display none
+
+  &.flat
+    > .content
+      border-color transparent
+      > .border
+        display none
+
+  &.big
+    > .content
+      padding 0 14px
+      > .input-wrapper
+        > .input
+          font-size 16px
+          &:not(textarea)
+            height 42px
+        > textarea.input
+          padding 14px 0
+
+      > .input-icon
+        width 20px
+        height @width
+        &.left
+          margin-right 10px
+        &.right
+          margin-left 10px
+
+  &.round
+    > .content
+      border-radius 17px
+    // Big button
+    &.big
+      > .content
+        border-radius 22px
+
+  &:not(.disabled)
+    cursor text
+
+  &.disabled
+    opacity .5
+
+  .vue-ui-dropdown-content > &
+    min-width 200px
+    padding 0 4px 4px
+
+  .vue-ui-high-contrast &
+    > .content
+      border-width 2px
+      border-style dashed
+      background $md-black !important
+</style>
diff --git a/packages/app-frontend/src/features/components/ui/components/VueLoadingBar.vue b/packages/app-frontend/src/features/components/ui/components/VueLoadingBar.vue
new file mode 100644
index 000000000..f92413475
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/components/VueLoadingBar.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="vue-ui-loading-bar" :class="unknown && 'unknown'">
+    <div
+      class="bar"
+      :style="!unknown ? { width: `${value * 100}%` } : undefined"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'VueLoadingBar',
+  props: {
+    value: {
+      type: Number,
+      default: 0,
+    },
+    unknown: {
+      type: Boolean,
+      default: false,
+    },
+  },
+})
+</script>
diff --git a/packages/app-frontend/src/features/components/ui/components/VueLoadingIndicator.vue b/packages/app-frontend/src/features/components/ui/components/VueLoadingIndicator.vue
new file mode 100644
index 000000000..751b25232
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/components/VueLoadingIndicator.vue
@@ -0,0 +1,6 @@
+<template>
+  <div class="vue-ui-loading-indicator">
+    <div class="animation" />
+    <slot />
+  </div>
+</template>
diff --git a/packages/app-frontend/src/features/components/ui/components/VueModal.vue b/packages/app-frontend/src/features/components/ui/components/VueModal.vue
new file mode 100644
index 000000000..2f6cdc732
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/components/VueModal.vue
@@ -0,0 +1,96 @@
+<template>
+  <transition
+    ref="rootElement"
+    name="vue-ui-modal"
+    :duration="{
+      enter: 1000,
+      leave: 300,
+    }"
+    appear
+  >
+    <div
+      class="vue-ui-modal"
+      :class="{
+        locked,
+      }"
+      tabindex="0"
+      role="dialog"
+      aria-modal="true"
+      @keyup.esc="close()"
+    >
+      <div
+        class="backdrop"
+        @click="close()"
+      />
+
+      <div
+        class="shell"
+        @keyup.esc="close()"
+      >
+        <div class="header">
+          <slot name="header">
+            <div
+              v-if="title"
+              class="title"
+              v-html="title"
+            />
+          </slot>
+        </div>
+        <div class="body">
+          <slot />
+        </div>
+        <div class="footer">
+          <slot name="footer" />
+        </div>
+
+        <VueButton
+          v-if="!locked"
+          class="close-button icon-button flat round"
+          icon-left="close"
+          @click="close()"
+        />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, onMounted, ref } from 'vue'
+import { useDisableScroll } from '../composables/useDisableScroll'
+
+export default defineComponent({
+  name: 'VueModal',
+
+  props: {
+    locked: {
+      type: Boolean,
+      default: false,
+    },
+
+    title: {
+      type: String,
+      default: null,
+    },
+  },
+
+  setup (props, { emit }) {
+    const rootElement = ref<HTMLElement | null>(null)
+    onMounted(async () => {
+      await nextTick()
+      rootElement.value.focus()
+    })
+
+    useDisableScroll()
+
+    const close = () => {
+      if (!props.locked) {
+        emit('close')
+      }
+    }
+
+    return {
+      close,
+    }
+  },
+})
+</script>
diff --git a/packages/app-frontend/src/features/components/ui/components/VueSelect.vue b/packages/app-frontend/src/features/components/ui/components/VueSelect.vue
new file mode 100644
index 000000000..710aaac66
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/components/VueSelect.vue
@@ -0,0 +1,81 @@
+<template>
+  <VueDropdown
+    class="vue-ui-select"
+    :label="displayedLabel"
+    :icon-right="iconRight"
+    :popover-class="['popover', 'select-popover']"
+    content-class="vue-ui-select-popover-content"
+    force-min-size
+    auto-size
+    eager-mount
+  >
+    <template #trigger>
+      <slot name="trigger" :label="displayedLabel"/>
+    </template>
+
+    <VueGroup
+      v-model="model"
+      class="vertical"
+    >
+      <slot/>
+    </VueGroup>
+  </VueDropdown>
+</template>
+
+
+<script lang="ts">
+import { computed, defineComponent, provide, ref, ComponentInternalInstance } from 'vue'
+
+export default defineComponent({
+  name: 'VueSelect',
+  props: {
+    placeholder: {
+      type: String,
+      default: 'Select...',
+    },
+    iconRight: {
+      type: String,
+      default: 'keyboard_arrow_down',
+    },
+    modelValue: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const currentChild = ref<ComponentInternalInstance | null>(null)
+
+    function setCurrentChild (vm) {
+      currentChild.value = vm
+    }
+
+    provide('VueSelect', {
+      setCurrentChild,
+      getCurrentChild: () => currentChild.value,
+    })
+
+    const model = computed({
+      get () { return props.modelValue },
+      set (value: string) { emit('update:modelValue', value) },
+    })
+
+    const displayedLabel = computed(() => {
+      if (currentChild.value) {
+        return currentChild.value.props.label
+      } else if (props.placeholder) {
+        return props.placeholder
+      } else {
+        return model.value
+      }
+    })
+
+    return {
+      model,
+      currentChild,
+      setCurrentChild,
+      displayedLabel
+    }
+  }
+})
+</script>
\ No newline at end of file
diff --git a/packages/app-frontend/src/features/components/ui/components/VueSelectButton.vue b/packages/app-frontend/src/features/components/ui/components/VueSelectButton.vue
new file mode 100644
index 000000000..36cfcfe0c
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/components/VueSelectButton.vue
@@ -0,0 +1,52 @@
+<template>
+  <VueGroupButton
+    ref="groupButton"
+    class="vue-ui-select-button"
+    v-close-popper="true"
+    :label="label"
+    flat
+    @selected="onSelect"
+  >
+    <slot/>
+  </VueGroupButton>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject, onMounted, getCurrentInstance, ComponentInternalInstance, Ref, ref } from 'vue'
+
+export default defineComponent({
+  name: 'VueSelectButton',
+
+  props: {
+    label: {
+      type: String,
+      default: null,
+    },
+  },
+
+  setup () {
+    const currentInstance = getCurrentInstance()
+    const groupButton = ref(null)
+    const { setCurrentChild, getCurrentChild } = inject<{
+      setCurrentChild: (child: ComponentInternalInstance) => void
+      getCurrentChild: () => Ref<ComponentInternalInstance | null>}>('VueSelect')
+
+    onMounted(() => {
+      onSelect(groupButton.value.selected)
+    })
+
+    function onSelect (selected: boolean) {
+      if (selected) {
+        setCurrentChild(currentInstance)
+      } else if (getCurrentChild()?.value === currentInstance) {
+        setCurrentChild(null)
+      }
+    }
+
+    return {
+      groupButton,
+      onSelect,
+    }
+  },
+})
+</script>
diff --git a/packages/app-frontend/src/features/components/ui/components/VueSwitch.vue b/packages/app-frontend/src/features/components/ui/components/VueSwitch.vue
new file mode 100644
index 000000000..30b1691a0
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/components/VueSwitch.vue
@@ -0,0 +1,83 @@
+<template>
+  <div
+    class="vue-ui-switch"
+    :class="{
+      selected: model,
+      disabled: finalDisabled,
+      focus: focused,
+    }"
+    :tabindex="disabled ? -1 : 0"
+    role="checkbox"
+    :aria-disabled="disabled ? true : null"
+    :aria-checked="!!model"
+    @click="toggleValue"
+    @keydown.enter="toggleWithFocus"
+    @keydown.space="toggleWithFocus"
+    @blur="focused = false"
+  >
+    <div class="content">
+      <VueIcon v-if="icon" :icon="icon" />
+      <span class="slot">
+        <slot />
+      </span>
+      <div class="wrapper">
+        <div class="bullet" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, computed } from 'vue'
+import { useDisabledChild } from '../composables/useDisabled'
+
+export default defineComponent({
+  name: 'VueSwitch',
+  props: {
+    icon: {
+      type: String,
+      default: null,
+    },
+
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue'],
+  setup (props, { emit }) {
+    const focused = ref(false)
+    const model = computed({
+      get: () => props.modelValue,
+      set: (value) => {
+        emit('update:modelValue', value)
+      },
+    })
+
+    const { finalDisabled } = useDisabledChild(props)
+
+    const toggleValue = () => {
+      if (finalDisabled.value) return
+      model.value = !model.value
+    }
+
+    const toggleWithFocus = () => {
+      focused.value = true
+      toggleValue()
+    }
+
+    return {
+      focused,
+      model,
+      finalDisabled,
+      toggleValue,
+      toggleWithFocus,
+    }
+  },
+})
+</script>

From 045da44fcd108d7acef6bcbd4f28cddfb9a3e026 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Wed, 18 Oct 2023 23:33:25 +0900
Subject: [PATCH 03/29] chore: Migrate useRoute(r) / Vue.set

---
 .../src/features/apps/AppSelect.vue           |  2 +-
 .../src/features/apps/AppSelectPane.vue       |  2 +-
 .../app-frontend/src/features/apps/index.ts   |  6 ++--
 .../components/composable/components.ts       | 32 +++++++++----------
 .../features/timeline/TimelineEventList.vue   | 10 +++---
 .../features/timeline/composable/layers.ts    | 14 ++++----
 packages/app-frontend/src/util/router.ts      | 10 ------
 7 files changed, 32 insertions(+), 44 deletions(-)
 delete mode 100644 packages/app-frontend/src/util/router.ts

diff --git a/packages/app-frontend/src/features/apps/AppSelect.vue b/packages/app-frontend/src/features/apps/AppSelect.vue
index 72b255dfe..5b6ff267f 100644
--- a/packages/app-frontend/src/features/apps/AppSelect.vue
+++ b/packages/app-frontend/src/features/apps/AppSelect.vue
@@ -6,7 +6,7 @@ import { watch, defineComponent, computed } from 'vue'
 import { BridgeEvents, SharedData } from '@vue-devtools/shared-utils'
 import { useApps, pendingSelectAppId, scanLegacyApps } from '@front/features/apps'
 import { useOrientation } from '@front/features/layout/orientation'
-import { useRouter } from '@front/util/router'
+import { useRouter } from 'vue-router'
 import { useBridge } from '../bridge'
 import { useVueVersionCheck } from './vue-version-check'
 
diff --git a/packages/app-frontend/src/features/apps/AppSelectPane.vue b/packages/app-frontend/src/features/apps/AppSelectPane.vue
index 1326329fe..9581de477 100644
--- a/packages/app-frontend/src/features/apps/AppSelectPane.vue
+++ b/packages/app-frontend/src/features/apps/AppSelectPane.vue
@@ -4,7 +4,7 @@ import AppSelectPaneItem from './AppSelectPaneItem.vue'
 import { watch, defineComponent, ref, computed } from 'vue'
 import { BridgeEvents, SharedData } from '@vue-devtools/shared-utils'
 import { useApps, pendingSelectAppId, scanLegacyApps } from '@front/features/apps'
-import { useRouter } from '@front/util/router'
+import { useRouter } from 'vue-router'
 import { useBridge } from '../bridge'
 
 export default defineComponent({
diff --git a/packages/app-frontend/src/features/apps/index.ts b/packages/app-frontend/src/features/apps/index.ts
index 32ae6eeab..f3a201848 100644
--- a/packages/app-frontend/src/features/apps/index.ts
+++ b/packages/app-frontend/src/features/apps/index.ts
@@ -1,7 +1,7 @@
 import { ref, computed } from 'vue'
 import { BridgeEvents, Bridge } from '@vue-devtools/shared-utils'
 import { getBridge } from '@front/features/bridge'
-import { useRoute, useRouter } from '@front/util/router'
+import { useRoute, useRouter } from 'vue-router'
 import { fetchLayers } from '../timeline/composable'
 
 export interface AppRecord {
@@ -15,7 +15,7 @@ const apps = ref<AppRecord[]>([])
 
 export function useCurrentApp () {
   const route = useRoute()
-  const currentAppId = computed(() => route.value.params.appId)
+  const currentAppId = computed(() => route.params.appId as string)
   const currentApp = computed(() => apps.value.find(a => currentAppId.value === a.id))
 
   return {
@@ -71,7 +71,7 @@ function fetchApps () {
   getBridge().send(BridgeEvents.TO_BACK_APP_LIST, {})
 }
 
-export const pendingSelectAppId = ref<string>(null)
+export const pendingSelectAppId = ref<string | null>(null)
 
 const pendingSelectPromises: (() => void)[] = []
 
diff --git a/packages/app-frontend/src/features/components/composable/components.ts b/packages/app-frontend/src/features/components/composable/components.ts
index 3b42cb4d2..b53042e2a 100644
--- a/packages/app-frontend/src/features/components/composable/components.ts
+++ b/packages/app-frontend/src/features/components/composable/components.ts
@@ -1,4 +1,4 @@
-import Vue, { ref, computed, watch, Ref, onMounted } from 'vue'
+import { ref, computed, watch, Ref, onMounted } from 'vue'
 import { ComponentTreeNode, EditStatePayload, InspectedComponentData } from '@vue/devtools-api'
 import groupBy from 'lodash/groupBy'
 import {
@@ -12,16 +12,16 @@ import {
 } from '@vue-devtools/shared-utils'
 import { getBridge, useBridge } from '@front/features/bridge'
 import { AppRecord, waitForAppSelect, useCurrentApp } from '@front/features/apps'
-import { useRoute, useRouter } from '@front/util/router'
+import { useRoute, useRouter } from 'vue-router'
 
 export const rootInstances = ref<ComponentTreeNode[]>([])
 export const componentsMap = ref<Record<ComponentTreeNode['id'], ComponentTreeNode>>({})
 let componentsParent: Record<ComponentTreeNode['id'], ComponentTreeNode['id']> = {}
 const treeFilter = ref('')
-export const selectedComponentId = ref<ComponentTreeNode['id']>(null)
-export const selectedComponentData = ref<InspectedComponentData>(null)
+export const selectedComponentId = ref<ComponentTreeNode['id'] | null>(null)
+export const selectedComponentData = ref<InspectedComponentData | null>(null)
 const selectedComponentStateFilter = ref('')
-export const selectedComponentPendingId = ref<ComponentTreeNode['id']>(null)
+export const selectedComponentPendingId = ref<ComponentTreeNode['id'] | null>(null)
 let lastSelectedApp: AppRecord = null
 export const lastSelectedComponentId: Record<AppRecord['id'], ComponentTreeNode['id']> = {}
 export const expandedMap = ref<Record<ComponentTreeNode['id'], boolean>>({})
@@ -61,8 +61,8 @@ export function useComponents () {
     requestComponentTree()
   })
 
-  watch(() => route.value.params.componentId, () => {
-    const value = route.value.params.componentId
+  watch(() => route.params.componentId, () => {
+    const value = route.params.componentId as string
     if (value && getAppIdFromComponentId(value) === currentAppId.value) {
       selectedComponentId.value = value
       loadComponent(value)
@@ -197,10 +197,10 @@ export function useComponent (instance: Ref<ComponentTreeNode>) {
 }
 
 export function setComponentOpen (id: ComponentTreeNode['id'], isOpen: boolean) {
-  Vue.set(expandedMap.value, id, isOpen)
+  expandedMap.value[id] = isOpen
 }
 
-export function isComponentOpen (id) {
+export function isComponentOpen (id: ComponentTreeNode['id']) {
   return !!expandedMap.value[id]
 }
 
@@ -240,7 +240,7 @@ export function useSelectedComponent () {
 
   function editState (dotPath: string, payload: EditStatePayload, type?: string) {
     bridge.send(BridgeEvents.TO_BACK_COMPONENT_EDIT_STATE, {
-      instanceId: data.value.id,
+      instanceId: data.value?.id,
       dotPath,
       type,
       ...payload,
@@ -249,7 +249,7 @@ export function useSelectedComponent () {
 
   function scrollToComponent () {
     bridge.send(BridgeEvents.TO_BACK_COMPONENT_SCROLL_TO, {
-      instanceId: data.value.id,
+      instanceId: data.value?.id,
     })
   }
 
@@ -278,7 +278,7 @@ export const requestedComponentTree = new Set()
 
 let requestComponentTreeRetryDelay = 500
 
-export async function requestComponentTree (instanceId: ComponentTreeNode['id'] = null, recursively = false) {
+export async function requestComponentTree (instanceId: ComponentTreeNode['id'] | null = null, recursively = false) {
   if (!instanceId) {
     instanceId = '_root'
   }
@@ -340,10 +340,10 @@ function updateComponentsMapData (data: ComponentTreeNode) {
     if (key === 'children') {
       if (!data.hasChildren || data.children.length) {
         const children = ensureComponentsMapChildren(component.id, data.children)
-        Vue.set(component, key, children)
+        component[key] = children
       }
     } else {
-      Vue.set(component, key, data[key])
+      component[key] = data[key]
     }
   }
   return component
@@ -413,10 +413,10 @@ export function addUpdateTrackingEvent (instanceId: string, time: number) {
     event.count++
     event.time = time
   } else {
-    Vue.set(updateTrackingEvents.value, instanceId, {
+    updateTrackingEvents.value[instanceId] = {
       instanceId,
       time,
       count: 1,
-    })
+    }
   }
 }
diff --git a/packages/app-frontend/src/features/timeline/TimelineEventList.vue b/packages/app-frontend/src/features/timeline/TimelineEventList.vue
index 3dc4a8977..044b31dd5 100644
--- a/packages/app-frontend/src/features/timeline/TimelineEventList.vue
+++ b/packages/app-frontend/src/features/timeline/TimelineEventList.vue
@@ -4,7 +4,7 @@ import TimelineEventListItem from './TimelineEventListItem.vue'
 
 import { computed, ref, watch, defineComponent } from 'vue'
 import { getStorage, setStorage } from '@vue-devtools/shared-utils'
-import { useRoute, useRouter } from '@front/util/router'
+import { useRoute, useRouter } from 'vue-router'
 import { onKeyDown } from '@front/util/keyboard'
 import { useInspectedEvent, useSelectedEvent, selectEvent, useLayers } from './composable'
 
@@ -38,19 +38,19 @@ export default defineComponent({
     // Tabs
 
     const tabId = computed({
-      get: () => route.value.query.tabId,
+      get: () => route.query.tabId,
       set: value => {
         setStorage(STORAGE_TAB_ID, value)
         router.push({
           query: {
-            ...route.value.query,
+            ...route.query,
             tabId: value,
           },
         })
       },
     })
 
-    if (!route.value.query.tabId) {
+    if (!route.query.tabId) {
       tabId.value = getStorage(STORAGE_TAB_ID, 'all')
     }
 
@@ -239,7 +239,7 @@ export default defineComponent({
       :items="filteredEvents"
       :item-size="itemHeight"
       class="flex-1"
-      @scroll.native.passive="onScroll()"
+      @scroll.passive="onScroll()"
     >
       <template #default="{ item: event }">
         <TimelineEventListItem
diff --git a/packages/app-frontend/src/features/timeline/composable/layers.ts b/packages/app-frontend/src/features/timeline/composable/layers.ts
index b67e933e9..776f02ff2 100644
--- a/packages/app-frontend/src/features/timeline/composable/layers.ts
+++ b/packages/app-frontend/src/features/timeline/composable/layers.ts
@@ -1,4 +1,4 @@
-import { computed, set } from 'vue'
+import { computed } from 'vue'
 import { BridgeEvents, setStorage } from '@vue-devtools/shared-utils'
 import { useApps, waitForAppSelect } from '@front/features/apps'
 import { getBridge } from '@front/features/bridge'
@@ -14,7 +14,7 @@ import {
   inspectedEvent,
   EventGroup,
 } from './store'
-import { useRouter } from '@front/util/router'
+import { useRouter } from 'vue-router'
 import { addNonReactiveProperties } from '@front/util/reactivity'
 
 export function layerFactory (options: LayerFromBackend): Layer {
@@ -40,8 +40,7 @@ export function getLayers (appId: string) {
   let layers = layersPerApp.value[appId]
   if (!layers) {
     layers = []
-    set(layersPerApp.value, appId, layers)
-    // Read the property again to make it reactive
+    layersPerApp.value[appId] = layers
     layers = layersPerApp.value[appId]
   }
   return layers
@@ -51,8 +50,7 @@ function getHiddenLayers (appId: string) {
   let layers = hiddenLayersPerApp.value[appId]
   if (!layers) {
     layers = []
-    set(hiddenLayersPerApp.value, appId, layers)
-    // Read the property again to make it reactive
+    hiddenLayersPerApp.value[appId] = layers
     layers = hiddenLayersPerApp.value[appId]
   }
   return layers
@@ -95,7 +93,7 @@ export function useLayers () {
 
     router.push({
       query: {
-        ...router.currentRoute.query,
+        ...router.currentRoute.value.query,
         tabId: 'all',
       },
     })
@@ -107,7 +105,7 @@ export function useLayers () {
     vScroll: computed({
       get: () => vScrollPerApp.value[currentAppId.value] || 0,
       set: (value: number) => {
-        set(vScrollPerApp.value, currentAppId.value, value)
+        vScrollPerApp.value[currentAppId.value] = value
       },
     }),
     isLayerHidden,
diff --git a/packages/app-frontend/src/util/router.ts b/packages/app-frontend/src/util/router.ts
deleted file mode 100644
index ad905e3f5..000000000
--- a/packages/app-frontend/src/util/router.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { getCurrentInstance, computed } from 'vue'
-
-export function useRouter () {
-  return getCurrentInstance().proxy.$router
-}
-
-export function useRoute () {
-  const vm = getCurrentInstance()
-  return computed(() => vm.proxy.$route)
-}

From 44d1a837bcf8a107cfec16bc9a927fdbbf5018a8 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Wed, 18 Oct 2023 23:57:01 +0900
Subject: [PATCH 04/29] chore: Migrate emits syntax

---
 .../src/features/apps/AppSelectPaneItem.vue   |  1 +
 .../src/features/code/CodeEditor.vue          | 29 ++++++++-----------
 .../src/features/header/AppHeaderSelect.vue   |  7 ++---
 .../features/plugin/PluginSettingsItem.vue    |  6 ++--
 .../src/features/timeline/LayerItem.vue       |  4 +--
 .../features/timeline/TimelineScrollbar.vue   |  4 +--
 .../src/features/timeline/composable/setup.ts |  5 ++--
 7 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/packages/app-frontend/src/features/apps/AppSelectPaneItem.vue b/packages/app-frontend/src/features/apps/AppSelectPaneItem.vue
index 07a18a3e9..7346140d7 100644
--- a/packages/app-frontend/src/features/apps/AppSelectPaneItem.vue
+++ b/packages/app-frontend/src/features/apps/AppSelectPaneItem.vue
@@ -14,6 +14,7 @@ export default defineComponent({
       default: false,
     },
   },
+  emits: ['select'],
 
   setup (props) {
     const { getLatestVersion } = useVueVersionCheck()
diff --git a/packages/app-frontend/src/features/code/CodeEditor.vue b/packages/app-frontend/src/features/code/CodeEditor.vue
index 68aa1c4fd..04a2a80d0 100644
--- a/packages/app-frontend/src/features/code/CodeEditor.vue
+++ b/packages/app-frontend/src/features/code/CodeEditor.vue
@@ -1,6 +1,5 @@
 <script>
 // Fork of https://github.com/egoist/vue-monaco/
-
 import * as monaco from 'monaco-editor'
 import assign from 'lodash/merge'
 
@@ -11,17 +10,12 @@ monaco.editor.defineTheme('github-dark', require('@front/assets/github-theme/dar
 
 export default {
   name: 'MonacoEditor',
-
-  model: {
-    event: 'change',
-  },
-
   props: {
     original: {
       type: String,
       default: null,
     },
-    value: {
+    modelValue: {
       type: String,
       required: true,
     },
@@ -42,7 +36,7 @@ export default {
       default: false,
     },
   },
-
+  emits: ['update:modelValue'],
   watch: {
     options: {
       deep: true,
@@ -54,7 +48,7 @@ export default {
       },
     },
 
-    value (newValue) {
+    modelValue (newValue) {
       if (this.editor) {
         const editor = this.getModifiedEditor()
         if (newValue !== editor.getValue()) {
@@ -93,7 +87,7 @@ export default {
     })
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.editor && this.editor.dispose()
   },
 
@@ -103,21 +97,22 @@ export default {
 
       const options = assign(
         {
-          value: this.value,
+          value: this.modelValue,
           theme: this.theme,
           language: this.language,
         },
         this.options,
       )
+      const root = this.$refs.root
 
       if (this.diffEditor) {
-        this.editor = monaco.editor.createDiffEditor(this.$el, options)
+        this.editor = monaco.editor.createDiffEditor(root, options)
         const originalModel = monaco.editor.createModel(
           this.original,
           this.language,
         )
         const modifiedModel = monaco.editor.createModel(
-          this.value,
+          this.modelValue,
           this.language,
         )
         this.editor.setModel({
@@ -125,15 +120,15 @@ export default {
           modified: modifiedModel,
         })
       } else {
-        this.editor = monaco.editor.create(this.$el, options)
+        this.editor = monaco.editor.create(root, options)
       }
 
       // @event `change`
       const editor = this.getModifiedEditor()
       editor.onDidChangeModelContent(event => {
         const value = editor.getValue()
-        if (this.value !== value) {
-          this.$emit('change', value, event)
+        if (this.modelValue !== value) {
+          this.$emit('update:modelValue', value, event)
         }
       })
 
@@ -165,5 +160,5 @@ export default {
 </script>
 
 <template>
-  <div />
+  <div ref="root" />
 </template>
diff --git a/packages/app-frontend/src/features/header/AppHeaderSelect.vue b/packages/app-frontend/src/features/header/AppHeaderSelect.vue
index 2cf3c1bbe..cda81e494 100644
--- a/packages/app-frontend/src/features/header/AppHeaderSelect.vue
+++ b/packages/app-frontend/src/features/header/AppHeaderSelect.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { ref, computed, watch, defineComponent } from 'vue'
+import { ref, computed, defineComponent } from 'vue'
 import { SharedData } from '@vue-devtools/shared-utils'
 import { useOrientation } from '@front/features/layout/orientation'
 
@@ -20,7 +20,7 @@ export default defineComponent({
       default: null,
     },
   },
-
+  emits: ['select'],
   setup (props, { emit }) {
     /* Open/Close */
 
@@ -156,11 +156,10 @@ export default defineComponent({
 
 <template>
   <VueDropdown
+    v-model="isShown"
     placement="bottom-start"
     :triggers="[]"
     :offset="[0, 0]"
-    :shown.sync="isShown"
-    :show-group="`header-select-${_uid}`"
     :delay="0"
     :auto-hide="false"
     @apply-show="isShowApplied = true"
diff --git a/packages/app-frontend/src/features/plugin/PluginSettingsItem.vue b/packages/app-frontend/src/features/plugin/PluginSettingsItem.vue
index 7d47d8ea4..2b7452dbd 100644
--- a/packages/app-frontend/src/features/plugin/PluginSettingsItem.vue
+++ b/packages/app-frontend/src/features/plugin/PluginSettingsItem.vue
@@ -20,9 +20,11 @@ export default defineComponent({
       required: true,
     },
 
-    value: {},
+    value: {
+      required: true,
+    },
   },
-
+  emits: ['update:value'],
   setup (props, { emit }) {
     const model = computed({
       get () {
diff --git a/packages/app-frontend/src/features/timeline/LayerItem.vue b/packages/app-frontend/src/features/timeline/LayerItem.vue
index d76067982..d40f22e82 100644
--- a/packages/app-frontend/src/features/timeline/LayerItem.vue
+++ b/packages/app-frontend/src/features/timeline/LayerItem.vue
@@ -27,7 +27,7 @@ export default defineComponent({
       default: false,
     },
   },
-
+  emits: ['select', 'hide'],
   setup (props, { emit }) {
     function select () {
       emit('select')
@@ -106,7 +106,7 @@ export default defineComponent({
           <PluginSourceIcon
             v-if="layer.pluginId"
             :plugin-id="layer.pluginId"
-            @click.native.stop
+            @click.stop
           />
         </div>
 
diff --git a/packages/app-frontend/src/features/timeline/TimelineScrollbar.vue b/packages/app-frontend/src/features/timeline/TimelineScrollbar.vue
index fbfa2fd22..e5571899c 100644
--- a/packages/app-frontend/src/features/timeline/TimelineScrollbar.vue
+++ b/packages/app-frontend/src/features/timeline/TimelineScrollbar.vue
@@ -23,14 +23,14 @@ export default defineComponent({
       required: true,
     },
   },
-
+  emits: ['update:start', 'update:end'],
   setup (props, { emit }) {
     const startRatio = computed(() => (props.start - props.min) / (props.max - props.min))
     const endRatio = computed(() => (props.max - props.end) / (props.max - props.min))
 
     const el = ref(null)
 
-    let mouseStartX, initialValue
+    let mouseStartX: number, initialValue: number
 
     // Main bar
 
diff --git a/packages/app-frontend/src/features/timeline/composable/setup.ts b/packages/app-frontend/src/features/timeline/composable/setup.ts
index 47a6a80b8..b37c1ea91 100644
--- a/packages/app-frontend/src/features/timeline/composable/setup.ts
+++ b/packages/app-frontend/src/features/timeline/composable/setup.ts
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import { Bridge, BridgeEvents, parse } from '@vue-devtools/shared-utils'
 import { getApps } from '@front/features/apps'
 import {
@@ -111,7 +110,7 @@ export function setupTimelineBridgeEvents (bridge: Bridge) {
     }
 
     markersAllApps.value = allList
-    Vue.set(markersPerApp.value, appId, appList)
+    markersPerApp.value[appId] = appList
   })
 
   bridge.on(BridgeEvents.TO_FRONT_TIMELINE_MARKER, ({ marker, appId }: { marker: MarkerFromBackend, appId: string }) => {
@@ -120,7 +119,7 @@ export function setupTimelineBridgeEvents (bridge: Bridge) {
       targetList = markersAllApps.value
     } else {
       if (!markersPerApp.value[appId]) {
-        Vue.set(markersPerApp.value, appId, [])
+        markersPerApp.value[appId] = []
       }
       targetList = markersPerApp.value[appId]
     }

From 1f6a08b419baaf4f7fcfdd103ba3aee98f96827c Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Wed, 18 Oct 2023 23:57:47 +0900
Subject: [PATCH 05/29] chore: Migrate @/ui plugins

---
 .../components/ui/components/icons.ts         | 34 +++++++++++
 .../src/features/components/ui/index.ts       | 59 +++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 packages/app-frontend/src/features/components/ui/components/icons.ts
 create mode 100644 packages/app-frontend/src/features/components/ui/index.ts

diff --git a/packages/app-frontend/src/features/components/ui/components/icons.ts b/packages/app-frontend/src/features/components/ui/components/icons.ts
new file mode 100644
index 000000000..cef330919
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/components/icons.ts
@@ -0,0 +1,34 @@
+const icons = require.context(
+  '@akryum/md-icons-svg/svg/',
+  true,
+  /materialicons\/24px\.svg$/,
+)
+
+export default {
+  install () {
+    const sprites = ['']
+    let spriteIndex = 0
+    // Load all the SVG symbols
+    icons.keys().forEach((key, index) => {
+      let result = icons(key)
+      const [, iconName] = /(\w+)\/materialicons/.exec(key)
+      const [, content] = /<svg.+?>(.*)<\/svg>/.exec(result)
+      result = `<svg xmlns="http://www.w3.org/2000/svg" id="ic_${iconName}_standard" viewBox="0 0 24 24">${content}</svg>`
+      sprites[spriteIndex] += result
+      if ((index + 1) % 40 === 0) {
+        sprites.push('')
+        spriteIndex++
+      }
+    })
+    for (const html of sprites) {
+      const iconsWrapper = document.createElement('div')
+      iconsWrapper.style.display = 'none'
+      iconsWrapper.innerHTML = html
+      document.body.insertBefore(iconsWrapper, document.body.firstChild)
+    }
+  },
+}
+
+export function generateHtmlIcon (icon: string) {
+  return `<div class="vue-ui-icon"><svg><use href="#ic_${icon}_standard"></use></svg></div>`
+}
diff --git a/packages/app-frontend/src/features/components/ui/index.ts b/packages/app-frontend/src/features/components/ui/index.ts
new file mode 100644
index 000000000..fca5eea88
--- /dev/null
+++ b/packages/app-frontend/src/features/components/ui/index.ts
@@ -0,0 +1,59 @@
+import { Plugin } from 'vue'
+import VueIcons from './components/icons'
+import VueDisable from './components/VueDisable.vue'
+import VueButton from './components/VueButton.vue'
+import VueDropdown from './components/VueDropdown.vue'
+import VueDropdownButton from './components/VueDropdownButton.vue'
+import VueFormField from './components/VueFormField.vue'
+import VueLoadingIndicator from './components/VueLoadingIndicator.vue'
+import VueGroup from './components/VueGroup.vue'
+import VueGroupButton from './components/VueGroupButton.vue'
+import VueIcon from './components/VueIcon.vue'
+import VueInput from './components/VueInput.vue'
+import VueLoadingBar from './components/VueLoadingBar.vue'
+import VueSwitch from './components/VueSwitch.vue'
+import VueSelect from './components/VueSelect.vue'
+import VueSelectButton from './components/VueSelectButton.vue'
+import VueModal from './components/VueModal.vue'
+import FloatingVue from 'floating-vue'
+import 'floating-vue/dist/style.css'
+export { generateHtmlIcon } from './components/icons'
+
+const ui: Plugin = {
+  install (app) {
+    app.use(VueIcons)
+    app.component('VueButton', VueButton)
+    app.component('VueDisable', VueDisable)
+    app.component('VueDropdown', VueDropdown)
+    app.component('VueFormField', VueFormField)
+    app.component('VueDropdownButton', VueDropdownButton)
+    app.component('VueLoadingIndicator', VueLoadingIndicator)
+    app.component('VueGroup', VueGroup)
+    app.component('VueGroupButton', VueGroupButton)
+    app.component('VueIcon', VueIcon)
+    app.component('VueInput', VueInput)
+    app.component('VueLoadingBar', VueLoadingBar)
+    app.component('VueSwitch', VueSwitch)
+    app.component('VueSelect', VueSelect)
+    app.component('VueSelectButton', VueSelectButton)
+    app.component('VueModal', VueModal)
+
+    app.use(FloatingVue, {
+      container: 'body',
+      instantMove: true,
+      themes: {
+        tooltip: {
+          delay: {
+            show: 1000,
+            hide: 800,
+          },
+        },
+        dropdown: {
+          handleResize: false,
+        },
+      },
+    })
+  },
+}
+
+export default ui

From 243cd3df34bb4c0281621f440240e0bad5f814cf Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 00:12:55 +0900
Subject: [PATCH 06/29] chore: Use native vue-router/useRoute(r)

---
 .../src/features/header/AppHeader.vue         | 23 +++++++++----------
 .../app-frontend/src/features/header/tabs.ts  |  8 +++----
 .../plugin/PluginSourceDescription.vue        |  2 +-
 .../src/features/plugin/PluginSourceIcon.vue  |  2 +-
 4 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/packages/app-frontend/src/features/header/AppHeader.vue b/packages/app-frontend/src/features/header/AppHeader.vue
index e50f4d0f3..172621ff9 100644
--- a/packages/app-frontend/src/features/header/AppHeader.vue
+++ b/packages/app-frontend/src/features/header/AppHeader.vue
@@ -6,9 +6,9 @@ import PluginSourceIcon from '@front/features/plugin/PluginSourceIcon.vue'
 import PluginSourceDescription from '../plugin/PluginSourceDescription.vue'
 
 import { computed, ref, watch, defineComponent } from 'vue'
-import type { RawLocation, Route } from 'vue-router'
+import type { RouteLocationRaw, RouteLocation } from 'vue-router'
 import { BridgeEvents } from '@vue-devtools/shared-utils'
-import { useRoute } from '@front/util/router'
+import { useRoute } from 'vue-router'
 import { useBridge } from '@front/features/bridge'
 import { useInspectors } from '@front/features/inspector/custom/composable'
 import { useTabs } from './tabs'
@@ -18,8 +18,8 @@ import { useOrientation } from '../layout/orientation'
 interface HeaderRoute {
   icon: string
   label: string
-  targetRoute: RawLocation
-  matchRoute: (route: Route) => boolean
+  targetRoute: RouteLocationRaw
+  matchRoute: (route: RouteLocation) => boolean
   pluginId?: string
 }
 
@@ -60,7 +60,7 @@ export default defineComponent({
       matchRoute: route => route.params.inspectorId === i.id,
     }))))
 
-    const currentHeaderRoute = computed(() => headerRoutes.value.find(r => r.matchRoute(route.value)))
+    const currentHeaderRoute = computed(() => headerRoutes.value.find(r => r.matchRoute(route)))
 
     const lastHeaderRoute = ref(null)
     watch(currentHeaderRoute, value => {
@@ -104,7 +104,7 @@ export default defineComponent({
       <img src="~@front/assets/breadcrumb-separator.svg">
     </template>
 
-    <template v-if="orientation === 'portrait' || headerRoutes.length * 200 > $responsive.width - 250">
+    <template v-if="orientation === 'portrait' || headerRoutes.length * 200 > $responsive.width.value - 250">
       <AppHeaderSelect
         :items="headerRoutes"
         :selected-item="currentHeaderRoute"
@@ -125,10 +125,10 @@ export default defineComponent({
 
     <template v-else>
       <VueGroup
-        :value="currentHeaderRoute"
+        :model-value="currentHeaderRoute"
         class="primary"
         indicator
-        @update="route => $router.push(route.targetRoute)"
+        @update:modelValue="(route: HeaderRoute) => route && $router.push(route.targetRoute)"
       >
         <VTooltip
           v-for="(item, index) of headerRoutes"
@@ -156,10 +156,9 @@ export default defineComponent({
     <div class="flex-1" />
 
     <div class="flex items-center">
-      <portal-target
-        name="header-end"
-        class="flex items-center"
-      />
+      <div class="flex items-center">
+        <portal-target name="header-end" />
+      </div>
 
       <VueDropdown
         :offset="[0, 0]"
diff --git a/packages/app-frontend/src/features/header/tabs.ts b/packages/app-frontend/src/features/header/tabs.ts
index 48f3900f9..ede5b9eb8 100644
--- a/packages/app-frontend/src/features/header/tabs.ts
+++ b/packages/app-frontend/src/features/header/tabs.ts
@@ -1,14 +1,14 @@
 import { computed } from 'vue'
-import { useRoute } from '@front/util/router'
+import { useRoute } from 'vue-router'
 
 export function useTabs () {
   const route = useRoute()
   const currentTab = computed<string>(() => {
-    let fromMeta = route.value.meta.tab
+    let fromMeta = route.meta.tab
     if (typeof fromMeta === 'function') {
-      fromMeta = fromMeta(route.value)
+      fromMeta = fromMeta(route)
     }
-    return fromMeta || route.value.name
+    return (fromMeta || route.name) as string
   })
 
   return {
diff --git a/packages/app-frontend/src/features/plugin/PluginSourceDescription.vue b/packages/app-frontend/src/features/plugin/PluginSourceDescription.vue
index dcac854fd..06cbf20e7 100644
--- a/packages/app-frontend/src/features/plugin/PluginSourceDescription.vue
+++ b/packages/app-frontend/src/features/plugin/PluginSourceDescription.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import { useRouter } from '@front/util/router'
+import { useRouter } from 'vue-router'
 import { usePlugins } from '.'
 
 export default defineComponent({
diff --git a/packages/app-frontend/src/features/plugin/PluginSourceIcon.vue b/packages/app-frontend/src/features/plugin/PluginSourceIcon.vue
index d55fe31ab..4ea2913ec 100644
--- a/packages/app-frontend/src/features/plugin/PluginSourceIcon.vue
+++ b/packages/app-frontend/src/features/plugin/PluginSourceIcon.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { useRouter } from '@front/util/router'
+import { useRouter } from 'vue-router'
 import PluginSourceDescription from './PluginSourceDescription.vue'
 
 export default defineComponent({

From dd9f55e2c04eabfafd4596921286d923f70cc20c Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 00:27:35 +0900
Subject: [PATCH 07/29] chore: Replace off Vue.set

---
 .../app-frontend/src/features/inspector/StateFields.vue     | 6 +++---
 .../app-frontend/src/features/inspector/StateInspector.vue  | 6 ++----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/app-frontend/src/features/inspector/StateFields.vue b/packages/app-frontend/src/features/inspector/StateFields.vue
index 316c27fb1..fcf4c964a 100644
--- a/packages/app-frontend/src/features/inspector/StateFields.vue
+++ b/packages/app-frontend/src/features/inspector/StateFields.vue
@@ -59,7 +59,7 @@ export default {
   },
 
   errorCaptured (err, vm) {
-    this.$set(this.fieldErrors, vm.field.key, err.message)
+    this.fieldErrors[vm.field.key] = err.message
   },
 
   methods: {
@@ -95,7 +95,7 @@ export default {
 
         <DataField
           v-else
-          :key="field.key"
+          :key="`field-${field.key}`"
           :field="field"
           :depth="0"
           :path="field.key"
@@ -123,7 +123,7 @@ export default {
 
         <DataField
           v-else
-          :key="key"
+          :key="`raw-${key}`"
           :field="{ value, key }"
           :depth="0"
           :path="key.toString()"
diff --git a/packages/app-frontend/src/features/inspector/StateInspector.vue b/packages/app-frontend/src/features/inspector/StateInspector.vue
index a328211c0..3d694ac60 100644
--- a/packages/app-frontend/src/features/inspector/StateInspector.vue
+++ b/packages/app-frontend/src/features/inspector/StateInspector.vue
@@ -1,7 +1,5 @@
 <script>
 import StateType from './StateType.vue'
-
-import Vue from 'vue'
 import { useDefer } from '@front/util/defer'
 import { getStorage, setStorage } from '@vue-devtools/shared-utils'
 
@@ -99,13 +97,13 @@ export default {
         this.setExpandToAll(!currentExpanded)
         return
       }
-      Vue.set(this.expandedState, dataType, !currentExpanded)
+      this.expandedState[dataType] = !currentExpanded
     },
 
     setExpandToAll (value) {
       this.dataTypes.forEach(key => {
         this.forceCollapse = value ? 'expand' : 'collapse'
-        Vue.set(this.expandedState, key, value)
+        this.expandedState[key] = value
       })
       this.$emit(value ? 'expand-all' : 'collapse-all')
       setStorage(STORAGE_COLLAPSE_ALL, !value)

From d9618c637fdbc048e07b8d5aaf23f66724c75845 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 00:28:17 +0900
Subject: [PATCH 08/29] chore: Migrate plugins

---
 .../app-frontend/src/plugins/global-refs.ts   |  5 +-
 packages/app-frontend/src/plugins/i18n.ts     |  7 ++-
 packages/app-frontend/src/plugins/index.ts    | 36 +++++------
 .../app-frontend/src/plugins/responsive.ts    | 62 ++++++++++---------
 4 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/packages/app-frontend/src/plugins/global-refs.ts b/packages/app-frontend/src/plugins/global-refs.ts
index 559e6233a..340cae5da 100644
--- a/packages/app-frontend/src/plugins/global-refs.ts
+++ b/packages/app-frontend/src/plugins/global-refs.ts
@@ -1,9 +1,10 @@
+import { App } from 'vue'
 interface Options {
   refs: { [key: string]: any }
 }
 
 export default {
-  install (Vue, options: Options) {
+  install (app: App, options: Options) {
     const { refs } = options
     const wrapper = {}
     Object.keys(refs).forEach(key => {
@@ -12,6 +13,6 @@ export default {
         get,
       })
     })
-    Vue.prototype.$globalRefs = wrapper
+    app.config.globalProperties.$globalRefs = wrapper
   },
 }
diff --git a/packages/app-frontend/src/plugins/i18n.ts b/packages/app-frontend/src/plugins/i18n.ts
index f3206ec05..a843658fc 100644
--- a/packages/app-frontend/src/plugins/i18n.ts
+++ b/packages/app-frontend/src/plugins/i18n.ts
@@ -1,4 +1,5 @@
 import { simpleGet } from '@vue-devtools/shared-utils'
+import { Plugin } from 'vue'
 
 const reg = /\{\{\s*([\w_.-]+)\s*\}\}/g
 
@@ -28,10 +29,10 @@ interface Options {
 }
 
 export default {
-  install (Vue, options: Options) {
+  install (app, options: Options) {
     strings = options.strings || {}
     defaultValues = options.defaultValues || {}
     replacer = options.replacer
-    Vue.prototype.$t = translate
+    app.config.globalProperties.$t = translate
   },
-}
+} as Plugin
diff --git a/packages/app-frontend/src/plugins/index.ts b/packages/app-frontend/src/plugins/index.ts
index 380f69aba..6ca10aab0 100644
--- a/packages/app-frontend/src/plugins/index.ts
+++ b/packages/app-frontend/src/plugins/index.ts
@@ -1,18 +1,21 @@
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import 'vue-resize/dist/vue-resize.css'
 
-import Vue from 'vue'
-import PortalVue from 'portal-vue'
-import VueUi, { generateHtmlIcon } from '@vue/ui'
+import { App } from 'vue'
+import VueUi, { generateHtmlIcon } from '../features/components/ui'
 import VueVirtualScroller from 'vue-virtual-scroller'
 import { keys } from '@vue-devtools/shared-utils'
+import PortalVue from 'portal-vue'
 import VI18n from './i18n'
 import Responsive from './responsive'
 import GlobalRefs from './global-refs'
+import VueResize from 'vue-resize'
 
-export function setupPlugins () {
-  Vue.use(PortalVue)
-  Vue.use(VueUi)
-  Vue.use(VueVirtualScroller)
+export function setupPlugins (app: App) {
+  app.use(PortalVue)
+  app.use(VueUi)
+  app.use(VueResize)
+  app.use(VueVirtualScroller)
 
   const currentLocale = 'en'
   const locales = require.context('../locales')
@@ -21,15 +24,15 @@ export function setupPlugins () {
     { reg: /<mono>/g, replace: '<span class="mono">' },
     { reg: /<\/(input|mono)>/g, replace: '</span>' },
     { reg: /\[\[(\S+)\]\]/g, replace: '<span class="keyboard">$1</span>' },
-    { reg: /<<(\S+)>>/g, replace: (match, p1) => generateHtmlIcon(p1) },
+    { reg: /<<(\S+)>>/g, replace: (_, p1) => generateHtmlIcon(p1) as string },
   ]
 
-  Vue.use(VI18n, {
+  app.use(VI18n, {
     strings: locales(`./${currentLocale}`).default,
     defaultValues: {
       keys,
     },
-    replacer: text => {
+    replacer: (text: string) => {
       for (const replacer of replacers) {
         // @ts-ignore
         text = text.replace(replacer.reg, replacer.replace)
@@ -38,18 +41,9 @@ export function setupPlugins () {
     },
   })
 
-  Vue.use(Responsive, {
-    computed: {
-      wide () {
-        return this.width >= 1050
-      },
-      tall () {
-        return this.height >= 350
-      },
-    },
-  })
+  app.use(Responsive)
 
-  Vue.use(GlobalRefs, {
+  app.use(GlobalRefs, {
     refs: {
       leftScroll: () => document.querySelector('.left .scroll'),
       leftRecycleList: () => document.querySelector('.left .vue-recycle-scroller'),
diff --git a/packages/app-frontend/src/plugins/responsive.ts b/packages/app-frontend/src/plugins/responsive.ts
index b8bced06e..4e2755c94 100644
--- a/packages/app-frontend/src/plugins/responsive.ts
+++ b/packages/app-frontend/src/plugins/responsive.ts
@@ -1,39 +1,43 @@
-export let responsive
+import { Plugin, computed, ComputedRef, Ref, reactive, toRefs, inject } from 'vue'
 
-interface Base {
-  width: number
-  height: number
+export type Responsive = {
+  wide: ComputedRef<boolean>
+  tall: ComputedRef<boolean>
+  width: Ref<number>
+  height: Ref<number>
 }
 
-interface Options {
-  computed: {
-    [key: string]: (this: Base) => boolean
-  }
-}
+const responsiveKey = Symbol('responsive')
 
 export default {
-  install (Vue, options: Options) {
-    const finalOptions = Object.assign({}, {
-      computed: {},
-    }, options)
-
-    responsive = new Vue({
-      data () {
-        return {
-          width: window.innerWidth,
-          height: window.innerHeight,
-        }
-      },
-      computed: finalOptions.computed,
-    })
+  install (app) {
+    function buildResponsive () {
+      const data = reactive({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
 
-    Object.defineProperty(Vue.prototype, '$responsive', {
-      get: () => responsive,
-    })
+      const wide = computed(() => data.width >= 1050)
+      const tall = computed(() => data.height >= 350)
+
+      return {
+        ...toRefs(data),
+        wide,
+        tall,
+      }
+    }
+
+    const responsive = buildResponsive()
+
+    app.config.globalProperties.$responsive = responsive
+
+    app.provide(responsiveKey, responsive)
 
     window.addEventListener('resize', () => {
-      responsive.width = window.innerWidth
-      responsive.height = window.innerHeight
+      responsive.width.value = window.innerWidth
+      responsive.height.value = window.innerHeight
     })
   },
-}
+} as Plugin
+
+export const useResponsive = () => inject<Responsive>(responsiveKey)

From 3b09919e7c4387873e75d7764b2786a2da084195 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 00:34:23 +0900
Subject: [PATCH 09/29] chore: Replace off Vue.set

---
 .../src/features/inspector/custom/CustomInspectorNode.vue     | 4 ++--
 packages/app-frontend/src/features/plugin/index.ts            | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/app-frontend/src/features/inspector/custom/CustomInspectorNode.vue b/packages/app-frontend/src/features/inspector/custom/CustomInspectorNode.vue
index 85171cbec..1018e90f3 100644
--- a/packages/app-frontend/src/features/inspector/custom/CustomInspectorNode.vue
+++ b/packages/app-frontend/src/features/inspector/custom/CustomInspectorNode.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue, { ref, computed, watch, defineComponent } from 'vue'
+import { ref, computed, watch, defineComponent } from 'vue'
 import scrollIntoView from 'scroll-into-view-if-needed'
 import { onKeyDown } from '@front/util/keyboard'
 import { useCurrentInspector } from './composable'
@@ -30,7 +30,7 @@ export default defineComponent({
     const expanded = computed({
       get: () => !!inspector.value.expandedMap[props.node.id],
       set: value => {
-        Vue.set(inspector.value.expandedMap, props.node.id, value)
+        inspector.value.expandedMap[props.node.id] = value
       },
     })
 
diff --git a/packages/app-frontend/src/features/plugin/index.ts b/packages/app-frontend/src/features/plugin/index.ts
index d53640638..0f67289b5 100644
--- a/packages/app-frontend/src/features/plugin/index.ts
+++ b/packages/app-frontend/src/features/plugin/index.ts
@@ -1,4 +1,4 @@
-import { computed, ref, set } from 'vue'
+import { computed, ref } from 'vue'
 import { PluginDescriptor } from '@vue/devtools-api'
 import { Bridge, BridgeEvents } from '@vue-devtools/shared-utils'
 import { getBridge } from '@front/features/bridge'
@@ -25,7 +25,7 @@ function getPlugins (appId: string) {
   let plugins = pluginsPerApp.value[appId]
   if (!plugins) {
     plugins = []
-    set(pluginsPerApp.value, appId, plugins)
+    pluginsPerApp.value[appId] = plugins
     // Read the property again to make it reactive
     plugins = pluginsPerApp.value[appId]
   }

From ad66e87beec1982819cb53caf139eb4290ebe7d3 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 00:37:40 +0900
Subject: [PATCH 10/29] fix: Fix some type

---
 .../src/features/chrome/pane-visibility.ts             |  2 +-
 .../src/features/components/SelectedComponentPane.vue  |  4 ++--
 .../src/features/inspector/custom/CustomInspector.vue  |  6 +++---
 .../src/features/inspector/custom/composable.ts        | 10 +++++-----
 .../app-frontend/src/features/layout/SplitPane.vue     |  2 +-
 packages/app-frontend/src/mixins/keyboard.ts           |  4 ++--
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/app-frontend/src/features/chrome/pane-visibility.ts b/packages/app-frontend/src/features/chrome/pane-visibility.ts
index e162b2d07..e0c40578b 100644
--- a/packages/app-frontend/src/features/chrome/pane-visibility.ts
+++ b/packages/app-frontend/src/features/chrome/pane-visibility.ts
@@ -1,7 +1,7 @@
 import { isChrome } from '@vue-devtools/shared-utils'
 
 let panelShown = !isChrome
-let pendingAction = null
+let pendingAction: (() => void | Promise<void>) | null = null
 
 if (isChrome) {
   chrome.runtime.onMessage.addListener(request => {
diff --git a/packages/app-frontend/src/features/components/SelectedComponentPane.vue b/packages/app-frontend/src/features/components/SelectedComponentPane.vue
index f6902b5ef..39844e18f 100644
--- a/packages/app-frontend/src/features/components/SelectedComponentPane.vue
+++ b/packages/app-frontend/src/features/components/SelectedComponentPane.vue
@@ -23,7 +23,7 @@ export default defineComponent({
 
     // Auto scroll
     const { selectedComponentId } = selectedComponent
-    const inspector = ref()
+    const inspector = ref<typeof StateInspector>()
     watch(selectedComponentId, () => {
       if (inspector.value?.$el) {
         inspector.value.$el.scrollTop = 0
@@ -78,7 +78,7 @@ export default defineComponent({
         :triggers="[]"
         :delay="0"
         class="flex items-baseline cursor-pointer"
-        @click.native="copyName()"
+        @click="copyName()"
       >
         <span class="text-gray-500">&lt;</span>
         <span class="text-green-500">
diff --git a/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue b/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
index 790a3b5b6..e5fe0f7c8 100644
--- a/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
+++ b/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
@@ -44,13 +44,13 @@ export default defineComponent({
 
     // Keyboard
 
-    function selectNextChild (index) {
+    function selectNextChild (index: number) {
       if (index + 1 < inspector.value.rootNodes.length) {
         selectNode(inspector.value.rootNodes[index + 1])
       }
     }
 
-    function selectPreviousChild (index) {
+    function selectPreviousChild (index: number) {
       if (index - 1 >= 0) {
         selectNode(inspector.value.rootNodes[index - 1])
       }
@@ -122,7 +122,7 @@ export default defineComponent({
     </SplitPane>
 
     <portal to="header-end">
-      <template v-if="inspector.actions">
+      <template v-if="inspector?.actions">
         <VueButton
           v-for="(action, index) of inspector.actions"
           :key="index"
diff --git a/packages/app-frontend/src/features/inspector/custom/composable.ts b/packages/app-frontend/src/features/inspector/custom/composable.ts
index 0d86d8e41..511f2e01b 100644
--- a/packages/app-frontend/src/features/inspector/custom/composable.ts
+++ b/packages/app-frontend/src/features/inspector/custom/composable.ts
@@ -1,5 +1,5 @@
 import { ref, computed } from 'vue'
-import { useRoute } from '@front/util/router'
+import { useRoute } from 'vue-router'
 import { useApps } from '@front/features/apps'
 import { BridgeEvents, parse, searchDeepInObject, getStorage, setStorage, Bridge } from '@vue-devtools/shared-utils'
 import { getBridge, useBridge } from '@front/features/bridge'
@@ -65,23 +65,23 @@ export function useCurrentInspector () {
   const { inspectors } = useInspectors()
   const { bridge } = useBridge()
 
-  const currentInspector = computed(() => inspectors.value.find(i => i.id === route.value.params.inspectorId))
+  const currentInspector = computed(() => inspectors.value.find(i => i.id === route.params.inspectorId))
 
   const filteredState = computed(() => {
-    if (currentInspector.value.stateFilter) {
+    if (currentInspector.value?.stateFilter) {
       const result = {}
       for (const groupKey in currentInspector.value.state) {
         const group = currentInspector.value.state[groupKey]
         const groupFields = group.filter(el => searchDeepInObject({
           [el.key]: el.value,
-        }, currentInspector.value.stateFilter))
+        }, currentInspector.value?.stateFilter))
         if (groupFields.length) {
           result[groupKey] = groupFields
         }
       }
       return result
     } else {
-      return currentInspector.value.state
+      return currentInspector.value?.state
     }
   })
 
diff --git a/packages/app-frontend/src/features/layout/SplitPane.vue b/packages/app-frontend/src/features/layout/SplitPane.vue
index 749a0248f..9811ad992 100644
--- a/packages/app-frontend/src/features/layout/SplitPane.vue
+++ b/packages/app-frontend/src/features/layout/SplitPane.vue
@@ -23,7 +23,7 @@ export default defineComponent({
     draggerOffset: {
       type: String as PropType<'before' | 'center' | 'after'>,
       default: 'center',
-      validator: (value: any) => ['before', 'center', 'after'].includes(value),
+      validator: (value: string) => ['before', 'center', 'after'].includes(value),
     },
 
     saveId: {
diff --git a/packages/app-frontend/src/mixins/keyboard.ts b/packages/app-frontend/src/mixins/keyboard.ts
index 5a3068913..b766f23fe 100644
--- a/packages/app-frontend/src/mixins/keyboard.ts
+++ b/packages/app-frontend/src/mixins/keyboard.ts
@@ -17,7 +17,7 @@ function processEvent (event, type) {
   ) {
     return
   }
-  const modifiers = []
+  const modifiers: string[] = []
   if (event.ctrlKey || event.metaKey) modifiers.push('ctrl')
   if (event.shiftKey) modifiers.push('shift')
   if (event.altKey) modifiers.push('alt')
@@ -52,7 +52,7 @@ export default function (options) {
         ...options,
       })
     },
-    destroyed () {
+    unmounted () {
       const i = activeInstances.findIndex(
         o => o.vm === this,
       )

From e8ea3c86080555a85d8a1e924502aff8dda0e26e Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 00:38:04 +0900
Subject: [PATCH 11/29] feat: Add global variable definition

---
 packages/app-frontend/src/types/vue.d.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 packages/app-frontend/src/types/vue.d.ts

diff --git a/packages/app-frontend/src/types/vue.d.ts b/packages/app-frontend/src/types/vue.d.ts
new file mode 100644
index 000000000..721364e88
--- /dev/null
+++ b/packages/app-frontend/src/types/vue.d.ts
@@ -0,0 +1,22 @@
+import {
+  SharedData,
+  keys,
+} from '@vue-devtools/shared-utils'
+
+import type {
+  Responsive,
+} from '@front/plugins/responsive'
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $t: (string, values?: Record<string, any>) => string
+    $responsive: Responsive
+    $shared: typeof SharedData
+    $isChrome: boolean
+    $isFirefox: boolean
+    $isWindows: boolean
+    $isMac: boolean
+    $isLinux: boolean
+    $keys: typeof keys
+  }
+}

From cbe3e6348d763cce27a0d0e13a8981f96d1bb1b0 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 00:58:28 +0900
Subject: [PATCH 12/29] chore: Update dependencies and build config

---
 package.json                              |   7 +-
 packages/app-backend-vue2/package.json    |   2 +
 packages/app-frontend/package.json        |  13 +-
 packages/build-tools/package.json         |   4 +-
 packages/build-tools/src/createConfig.js  |  16 +-
 packages/shell-dev-vue2/package.json      |   3 +
 packages/shell-dev-vue2/webpack.config.js |  22 +-
 packages/shell-dev-vue3/package.json      |   7 +-
 packages/shell-dev-vue3/webpack.config.js |  16 -
 packages/shell-host/package.json          |   3 +-
 yarn.lock                                 | 362 ++++++++++++++++++----
 11 files changed, 356 insertions(+), 99 deletions(-)

diff --git a/package.json b/package.json
index 6ee2b0bc4..3a1437c71 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-vue": "^6.0.0",
+    "eslint-plugin-vue": "^9.17.0",
     "execa": "^4.0.3",
     "inquirer": "^6.2.0",
     "lerna": "^4.0.0",
@@ -70,8 +70,9 @@
     "semver": "^5.5.1",
     "start-server-and-test": "^1.7.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
-    "vue-loader": "^15.9.0",
-    "webpack-dev-server": "^4.0.0-beta.0"
+    "vue-loader": "^17.2.2",
+    "webpack-dev-server": "^4.0.0-beta.0",
+    "svg-inline-loader": "^0.8.2"
   },
   "resolutions": {
     "cypress": "=3.4.1",
diff --git a/packages/app-backend-vue2/package.json b/packages/app-backend-vue2/package.json
index cacbebf25..654595d71 100644
--- a/packages/app-backend-vue2/package.json
+++ b/packages/app-backend-vue2/package.json
@@ -17,6 +17,8 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
+    "vue": "^2.7.10",
+    "vue-loader": "^15.7.1",
     "@types/node": "^13.9.1",
     "@types/webpack-env": "^1.15.1",
     "core-js": "^3.20.2",
diff --git a/packages/app-frontend/package.json b/packages/app-frontend/package.json
index e39d7eec0..08b31b67a 100644
--- a/packages/app-frontend/package.json
+++ b/packages/app-frontend/package.json
@@ -10,18 +10,23 @@
     "@vue/ui": "^0.12.5",
     "circular-json-es6": "^2.0.2",
     "d3": "^5.16.0",
+    "floating-vue": "^2.0.0-beta.24",
     "lodash": "^4.17.15",
     "lru-cache": "^5.1.1",
     "monaco-editor": "^0.24.0",
     "pixi.js-legacy": "^6.2.0",
-    "portal-vue": "^2.1.7",
+    "portal-vue": "^3.0.0-beta.0",
     "scroll-into-view-if-needed": "^2.2.28",
     "semver": "^7.3.5",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "tinycolor2": "^1.4.2",
-    "vue": "^2.7.10",
-    "vue-router": "^3.6.5",
-    "vue-virtual-scroller": "^1.0.10"
+    "vue": "^3.3.4",
+    "vue-resize": "^2.0.0-alpha.1",
+    "vue-router": "^4.2.5",
+    "vue-virtual-scroller": "^2.0.0-alpha.1"
+  },
+  "devDependencies": {
+    "@akryum/md-icons-svg": "^1.0.1"
   }
 }
diff --git a/packages/build-tools/package.json b/packages/build-tools/package.json
index 8a2d2c6a9..bb3ccc3e3 100644
--- a/packages/build-tools/package.json
+++ b/packages/build-tools/package.json
@@ -20,8 +20,8 @@
     "stylus-loader": "^5.0.0",
     "style-resources-loader": "^1.2.1",
     "terser-webpack-plugin": "^5.1.1",
-    "vue-loader": "^15.7.1",
-    "vue-template-compiler": "^2.7.10",
+    "vue-loader": "^17.2.2",
+    "@vue/compiler-sfc": "^3.3.4",
     "webpack": "^5.35.1",
     "webpack-merge": "^5.7.3"
   }
diff --git a/packages/build-tools/src/createConfig.js b/packages/build-tools/src/createConfig.js
index f537dfa06..d65c86769 100644
--- a/packages/build-tools/src/createConfig.js
+++ b/packages/build-tools/src/createConfig.js
@@ -18,7 +18,7 @@ exports.createConfig = (config, target = { chrome: 52, firefox: 48 }) => {
       alias: {
         '@front': '@vue-devtools/app-frontend/src',
         '@back': '@vue-devtools/app-backend-core/lib',
-        vue$: require.resolve('vue/dist/vue.esm.js'),
+        vue: require.resolve('vue/dist/vue.esm-bundler.js'),
       },
       // symlinks: false,
       fallback: {
@@ -47,6 +47,7 @@ exports.createConfig = (config, target = { chrome: 52, firefox: 48 }) => {
             compilerOptions: {
               preserveWhitespace: false,
             },
+            isServerBuild: false,
             transpileOptions: {
               target,
               objectAssign: 'Object.assign',
@@ -82,8 +83,14 @@ exports.createConfig = (config, target = { chrome: 52, firefox: 48 }) => {
           ],
         },
         {
-          test: /\.(png|woff2|svg|ttf)$/,
+          test: /\.svg$/,
+          loader: 'svg-inline-loader',
+          exclude: /assets/,
+        },
+        {
+          test: /\.(png|woff2|ttf|svg)$/,
           type: 'asset/inline',
+          exclude: /@akryum\/md-icons-svg\/svg/,
         },
       ],
     },
@@ -102,7 +109,10 @@ exports.createConfig = (config, target = { chrome: 52, firefox: 48 }) => {
         typescript: {
           configFile: path.resolve(__dirname, '../../../tsconfig.json'),
           extensions: {
-            vue: true,
+            vue: {
+              enabled: true,
+              compiler: '@vue/compiler-sfc',
+            },
           },
         },
       }),
diff --git a/packages/shell-dev-vue2/package.json b/packages/shell-dev-vue2/package.json
index b75670054..061552f04 100644
--- a/packages/shell-dev-vue2/package.json
+++ b/packages/shell-dev-vue2/package.json
@@ -7,11 +7,14 @@
   },
   "dependencies": {
     "@vue-devtools/shell-host": "^0.0.0",
+    "vue": "^2.7.10",
+    "vue-router": "^3.6.5",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue-devtools/build-tools": "^0.0.0",
     "cross-env": "^5.2.0",
+    "vue-loader": "^15.7.1",
     "launch-editor-middleware": "^2.2.1",
     "webpack": "^5.35.1",
     "webpack-cli": "^4.6.0"
diff --git a/packages/shell-dev-vue2/webpack.config.js b/packages/shell-dev-vue2/webpack.config.js
index e18704fcd..1a30dcc33 100644
--- a/packages/shell-dev-vue2/webpack.config.js
+++ b/packages/shell-dev-vue2/webpack.config.js
@@ -1,8 +1,10 @@
 const path = require('path')
 const { createConfig } = require('@vue-devtools/build-tools')
+const { VueLoaderPlugin } = require('vue-loader')
+const vueLoaderPath = require.resolve('vue-loader')
 const openInEditor = require('launch-editor-middleware')
 
-module.exports = createConfig({
+const config = createConfig({
   entry: {
     // devtools: require.resolve('@vue-devtools/shell-host/src/devtools.js'),
     backend: require.resolve('@vue-devtools/shell-host/src/backend.js'),
@@ -10,6 +12,21 @@ module.exports = createConfig({
     target: './src/index.js',
     'iframe-app': './src/iframe-app.js',
   },
+  resolve: {
+    alias: {
+      vue: require.resolve('vue/dist/vue.esm.js'),
+    },
+    symlinks: false,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: vueLoaderPath,
+        options: {},
+      },
+    ],
+  },
   output: {
     path: path.join(__dirname, '/build'),
     publicPath: '/target/',
@@ -31,3 +48,6 @@ module.exports = createConfig({
     },
   },
 })
+
+config.plugins[0] = new VueLoaderPlugin()
+module.exports = config
diff --git a/packages/shell-dev-vue3/package.json b/packages/shell-dev-vue3/package.json
index 686ab0cec..eea1b2ac4 100644
--- a/packages/shell-dev-vue3/package.json
+++ b/packages/shell-dev-vue3/package.json
@@ -9,17 +9,16 @@
     "@vue-devtools/shell-host": "^0.0.0",
     "@vue/devtools-api": "^6.0.0-beta.1",
     "core-js": "^3.6.4",
-    "vue": "^3.1.0-beta.5",
-    "vue-router": "^4",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.5",
     "vuex": "^4.0.1"
   },
   "devDependencies": {
     "@vue-devtools/build-tools": "^0.0.0",
-    "@vue/compiler-sfc": "^3.1.0-beta.5",
+    "@vue/compiler-sfc": "^3.3.4",
     "cross-env": "^5.2.0",
     "launch-editor-middleware": "^2.2.1",
     "mini-css-extract-plugin": "^1.5.0",
-    "vue-loader": "^16.0.0-beta.4",
     "webpack": "^5.35.1",
     "webpack-cli": "^4.6.0"
   }
diff --git a/packages/shell-dev-vue3/webpack.config.js b/packages/shell-dev-vue3/webpack.config.js
index 361ece8a5..be14de16e 100644
--- a/packages/shell-dev-vue3/webpack.config.js
+++ b/packages/shell-dev-vue3/webpack.config.js
@@ -1,6 +1,4 @@
 const path = require('path')
-const { VueLoaderPlugin } = require('vue-loader')
-const vueLoaderPath = require.resolve('vue-loader')
 const openInEditor = require('launch-editor-middleware')
 const { createConfig } = require('@vue-devtools/build-tools')
 
@@ -18,20 +16,8 @@ module.exports = createConfig({
     filename: '[name].js',
   },
   resolve: {
-    alias: {
-      vue$: require.resolve('vue/dist/vue.esm-bundler.js'),
-    },
     symlinks: false,
   },
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: vueLoaderPath,
-        options: {},
-      },
-    ],
-  },
   devServer: {
     port: 8090,
     onBeforeSetupMiddleware ({ app }) {
@@ -49,5 +35,3 @@ module.exports = createConfig({
     },
   },
 })
-
-module.exports.plugins[0] = new VueLoaderPlugin()
diff --git a/packages/shell-host/package.json b/packages/shell-host/package.json
index 8e3bc75a4..58d16bcdd 100644
--- a/packages/shell-host/package.json
+++ b/packages/shell-host/package.json
@@ -6,11 +6,10 @@
     "dev": "cross-env TAILWIND_MODE=watch webpack serve"
   },
   "dependencies": {
-    "@vue/ui": "^0.12.5",
     "@vue-devtools/app-backend-core": "^0.0.0",
     "@vue-devtools/app-frontend": "^0.0.0",
     "@vue-devtools/shared-utils": "^0.0.0",
-    "vue": "^2.7.10"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "cross-env": "^5.2.0",
diff --git a/yarn.lock b/yarn.lock
index b57da61c5..d82765eb4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@akryum/md-icons-svg@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@akryum/md-icons-svg/-/md-icons-svg-1.0.1.tgz#bd4b88a70549e3e43acef342e1414c786544f72e"
+  integrity sha512-77uYSiIEKLlB4/lmVlOfcbypkD098rFC1jLaoIG8kQZARZD2HG7WhJNzwgGFFFuSO6WFSmAg/YtBJytHaMLRlQ==
+
 "@algolia/autocomplete-core@1.7.1":
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.7.1.tgz#025538b8a9564a9f3dd5bcf8a236d6951c76c7d1"
@@ -397,6 +402,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.1.tgz#6f6d6c2e621aad19a92544cc217ed13f1aac5b4c"
   integrity sha512-h7RCSorm1DdTVGJf3P2Mhj3kdnkmF/EiysUkzS2TdgAYqyjFdMQJbVuXOBej2SBJaXan/lIVtT6KkGbyyq753A==
 
+"@babel/parser@^7.20.15", "@babel/parser@^7.21.3":
+  version "7.22.14"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.14.tgz#c7de58e8de106e88efca42ce17f0033209dfd245"
+  integrity sha512-1KucTHgOvaw/LzCVrEOAyXkr9rQlp0A1HiHRYnSUE9dmb8PvPW7o5sscg+5169r54n3vGlbx6GevTE/Iw/P3AQ==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
@@ -1110,6 +1120,13 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.9.tgz#b658a97babf1f40783354af7039b84c3fdfc3fc3"
   integrity sha512-O+NfmkfRrb3uSsTa4jE3WApidSe3N5++fyOVGP1SmMZi4A3BZELkhUUvj5hwmMuNdlpzAZ8iAPz2vmcR7DCFQA==
 
+"@eslint-community/eslint-utils@^4.4.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -1125,6 +1142,25 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@floating-ui/core@^1.1.0":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.4.2.tgz#2b52a12b843bdc1719375c8e20ed63206aac5ecf"
+  integrity sha512-olUakR5nr9v2ueVr1yomoJnBTkHGqHzL/iK4AhforiJS/wKJgFphAYpZHZzADLv/zNUFuQwqLH3bcoUhFh2E1Q==
+  dependencies:
+    "@floating-ui/utils" "^0.1.3"
+
+"@floating-ui/dom@~1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.1.1.tgz#66aa747e15894910869bf9144fc54fc7d6e9f975"
+  integrity sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==
+  dependencies:
+    "@floating-ui/core" "^1.1.0"
+
+"@floating-ui/utils@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.3.tgz#6ee493102b45d796d69f1f472d4bf64e5244500a"
+  integrity sha512-uvnFKtPgzLnpzzTRfhDlvXX0kLYi9lDRQbcDmT8iXl71Rx+uwSuaUIQl3DNC7w5OweAQ7XQMDObML+KaYDQfng==
+
 "@gar/promisify@^1.0.1":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -1201,6 +1237,11 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
+"@jridgewell/sourcemap-codec@^1.4.15":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
 "@jridgewell/trace-mapping@^0.3.14", "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.15"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz#aba35c48a38d3fd84b37e66c9c0423f9744f9774"
@@ -2645,6 +2686,16 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
+"@vue/compiler-core@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.3.4.tgz#7fbf591c1c19e1acd28ffd284526e98b4f581128"
+  integrity sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==
+  dependencies:
+    "@babel/parser" "^7.21.3"
+    "@vue/shared" "3.3.4"
+    estree-walker "^2.0.2"
+    source-map-js "^1.0.2"
+
 "@vue/compiler-dom@3.2.39":
   version "3.2.39"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.39.tgz#bd69d35c1a48fe2cea4ab9e96d2a3a735d146fdf"
@@ -2653,6 +2704,14 @@
     "@vue/compiler-core" "3.2.39"
     "@vue/shared" "3.2.39"
 
+"@vue/compiler-dom@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz#f56e09b5f4d7dc350f981784de9713d823341151"
+  integrity sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==
+  dependencies:
+    "@vue/compiler-core" "3.3.4"
+    "@vue/shared" "3.3.4"
+
 "@vue/compiler-sfc@2.7.10":
   version "2.7.10"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.10.tgz#3fe08e780053a3bbf41328c65ae5dfdee0385206"
@@ -2662,7 +2721,7 @@
     postcss "^8.4.14"
     source-map "^0.6.1"
 
-"@vue/compiler-sfc@3.2.39", "@vue/compiler-sfc@^3.1.0-beta.5":
+"@vue/compiler-sfc@3.2.39":
   version "3.2.39"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.39.tgz#8fe29990f672805b7c5a2ecfa5b05e681c862ea2"
   integrity sha512-fqAQgFs1/BxTUZkd0Vakn3teKUt//J3c420BgnYgEOoVdTwYpBTSXCMJ88GOBCylmUBbtquGPli9tVs7LzsWIA==
@@ -2678,6 +2737,22 @@
     postcss "^8.1.10"
     source-map "^0.6.1"
 
+"@vue/compiler-sfc@3.3.4", "@vue/compiler-sfc@^3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz#b19d942c71938893535b46226d602720593001df"
+  integrity sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==
+  dependencies:
+    "@babel/parser" "^7.20.15"
+    "@vue/compiler-core" "3.3.4"
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/compiler-ssr" "3.3.4"
+    "@vue/reactivity-transform" "3.3.4"
+    "@vue/shared" "3.3.4"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.0"
+    postcss "^8.1.10"
+    source-map-js "^1.0.2"
+
 "@vue/compiler-ssr@3.2.39":
   version "3.2.39"
   resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.39.tgz#4f3bfb535cb98b764bee45e078700e03ccc60633"
@@ -2686,6 +2761,14 @@
     "@vue/compiler-dom" "3.2.39"
     "@vue/shared" "3.2.39"
 
+"@vue/compiler-ssr@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz#9d1379abffa4f2b0cd844174ceec4a9721138777"
+  integrity sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==
+  dependencies:
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/shared" "3.3.4"
+
 "@vue/component-compiler-utils@^3.1.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
@@ -2729,6 +2812,17 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
+"@vue/reactivity-transform@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz#52908476e34d6a65c6c21cd2722d41ed8ae51929"
+  integrity sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==
+  dependencies:
+    "@babel/parser" "^7.20.15"
+    "@vue/compiler-core" "3.3.4"
+    "@vue/shared" "3.3.4"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.0"
+
 "@vue/reactivity@3.2.39":
   version "3.2.39"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.39.tgz#e6e3615fe2288d4232b104640ddabd0729a78c80"
@@ -2736,6 +2830,13 @@
   dependencies:
     "@vue/shared" "3.2.39"
 
+"@vue/reactivity@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.3.4.tgz#a27a29c6cd17faba5a0e99fbb86ee951653e2253"
+  integrity sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==
+  dependencies:
+    "@vue/shared" "3.3.4"
+
 "@vue/runtime-core@3.2.39":
   version "3.2.39"
   resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.39.tgz#dc1faccab11b3e81197aba33fb30c9447c1d2c84"
@@ -2744,6 +2845,14 @@
     "@vue/reactivity" "3.2.39"
     "@vue/shared" "3.2.39"
 
+"@vue/runtime-core@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.3.4.tgz#4bb33872bbb583721b340f3088888394195967d1"
+  integrity sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==
+  dependencies:
+    "@vue/reactivity" "3.3.4"
+    "@vue/shared" "3.3.4"
+
 "@vue/runtime-dom@3.2.39":
   version "3.2.39"
   resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.39.tgz#4a8cb132bcef316e8151c5ed07fc7272eb064614"
@@ -2753,6 +2862,15 @@
     "@vue/shared" "3.2.39"
     csstype "^2.6.8"
 
+"@vue/runtime-dom@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz#992f2579d0ed6ce961f47bbe9bfe4b6791251566"
+  integrity sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==
+  dependencies:
+    "@vue/runtime-core" "3.3.4"
+    "@vue/shared" "3.3.4"
+    csstype "^3.1.1"
+
 "@vue/server-renderer@3.2.39":
   version "3.2.39"
   resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.39.tgz#4358292d925233b0d8b54cf0513eaece8b2351c5"
@@ -2761,11 +2879,24 @@
     "@vue/compiler-ssr" "3.2.39"
     "@vue/shared" "3.2.39"
 
+"@vue/server-renderer@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.3.4.tgz#ea46594b795d1536f29bc592dd0f6655f7ea4c4c"
+  integrity sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==
+  dependencies:
+    "@vue/compiler-ssr" "3.3.4"
+    "@vue/shared" "3.3.4"
+
 "@vue/shared@3.2.39":
   version "3.2.39"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.39.tgz#302df167559a1a5156da162d8cc6760cef67f8e3"
   integrity sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw==
 
+"@vue/shared@3.3.4":
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.4.tgz#06e83c5027f464eef861c329be81454bc8b70780"
+  integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
+
 "@vue/ui@^0.12.5":
   version "0.12.5"
   resolved "https://registry.yarnpkg.com/@vue/ui/-/ui-0.12.5.tgz#3c3456c8e4dcb3360a9228de0270921906bb7097"
@@ -2949,7 +3080,7 @@ acorn-import-assertions@^1.7.6:
   resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz#ba2b5939ce62c238db6d93d81c9b111b29b855e9"
   integrity sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==
 
-acorn-jsx@^5.2.0, acorn-jsx@^5.3.1:
+acorn-jsx@^5.2.0, acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
@@ -2978,6 +3109,11 @@ acorn@^8.5.0, acorn@^8.7.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
 
+acorn@^8.9.0:
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
+  integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
+
 add-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
@@ -3499,6 +3635,11 @@ bonjour@^3.5.0:
     multicast-dns "^6.0.1"
     multicast-dns-service-types "^1.1.0"
 
+boolbase@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
+
 boolean@^3.0.1:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/boolean/-/boolean-3.2.0.tgz#9e5294af4e98314494cbb17979fa54ca159f116b"
@@ -4317,6 +4458,11 @@ csstype@^3.1.0:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+csstype@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
 cypress@=3.4.1, cypress@^3.1.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-3.4.1.tgz#ca2e4e9864679da686c6a6189603efd409664c30"
@@ -4628,11 +4774,6 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
-de-indent@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
-
 debug@2.6.9, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -4647,7 +4788,7 @@ debug@3.2.6:
   dependencies:
     ms "^2.1.1"
 
-debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.3, debug@~4.3.1, debug@~4.3.2:
+debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.3, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -5522,14 +5663,18 @@ eslint-plugin-standard@^5.0.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-5.0.0.tgz#c43f6925d669f177db46f095ea30be95476b1ee4"
   integrity sha512-eSIXPc9wBM4BrniMzJRBm2uoVuXz2EPa+NXPk2+itrVt+r5SbKFERx/IgrK/HmfjddyKVz2f+j+7gBRvu19xLg==
 
-eslint-plugin-vue@^6.0.0:
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-6.2.2.tgz#27fecd9a3a24789b0f111ecdd540a9e56198e0fe"
-  integrity sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ==
+eslint-plugin-vue@^9.17.0:
+  version "9.17.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.17.0.tgz#4501547373f246547083482838b4c8f4b28e5932"
+  integrity sha512-r7Bp79pxQk9I5XDP0k2dpUC7Ots3OSWgvGZNu3BxmKK6Zg7NgVtcOB6OCna5Kb9oQwJPl5hq183WD0SY5tZtIQ==
   dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
     natural-compare "^1.4.0"
-    semver "^5.6.0"
-    vue-eslint-parser "^7.0.0"
+    nth-check "^2.1.1"
+    postcss-selector-parser "^6.0.13"
+    semver "^7.5.4"
+    vue-eslint-parser "^9.3.1"
+    xml-name-validator "^4.0.0"
 
 eslint-scope@5.1.1, eslint-scope@^5.1.1:
   version "5.1.1"
@@ -5539,6 +5684,14 @@ eslint-scope@5.1.1, eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
+eslint-scope@^7.1.1:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
 eslint-utils@^2.0.0, eslint-utils@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
@@ -5563,6 +5716,11 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
 eslint-webpack-plugin@^2.5.4:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/eslint-webpack-plugin/-/eslint-webpack-plugin-2.7.0.tgz#0525793a4f8c652c1c6d863995ce1e0f2dcbd143"
@@ -5639,6 +5797,15 @@ espree@^7.3.0, espree@^7.3.1:
     acorn-jsx "^5.3.1"
     eslint-visitor-keys "^1.3.0"
 
+espree@^9.3.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
+  dependencies:
+    acorn "^8.9.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.4.1"
+
 esprima@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
@@ -6010,6 +6177,14 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
+floating-vue@^2.0.0-beta.24:
+  version "2.0.0-beta.24"
+  resolved "https://registry.yarnpkg.com/floating-vue/-/floating-vue-2.0.0-beta.24.tgz#ad4775c55581f8a3c219cf614d8e24a6ae4846e0"
+  integrity sha512-URSzP6YXaF4u1oZ9XGL8Sn8puuM7ivp5jkOUrpy5Q1mfo9BfGppJOn+ierTmsSUfJEeHBae8KT7r5DeI3vQIEw==
+  dependencies:
+    "@floating-ui/dom" "~1.1.1"
+    vue-resize "^2.0.0-alpha.1"
+
 focus-visible@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-5.2.0.tgz#3a9e41fccf587bd25dcc2ef045508284f0a4d6b3"
@@ -6527,11 +6702,6 @@ hash-sum@^2.0.0:
   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
   integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
 
-he@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
-  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
-
 hex-color-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
@@ -7718,6 +7888,13 @@ magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
+magic-string@^0.30.0:
+  version "0.30.3"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.3.tgz#403755dfd9d6b398dfa40635d52e96c5ac095b85"
+  integrity sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+
 make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -8033,6 +8210,11 @@ minizlib@^2.0.0, minizlib@^2.1.1:
     minipass "^3.0.0"
     yallist "^4.0.0"
 
+mitt@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-2.1.0.tgz#f740577c23176c6205b121b2973514eade1b2230"
+  integrity sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==
+
 mkdirp-infer-owner@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/mkdirp-infer-owner/-/mkdirp-infer-owner-2.0.0.tgz#55d3b368e7d89065c38f32fd38e638f0ab61d316"
@@ -8399,6 +8581,13 @@ npmlog@^4.1.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
+nth-check@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
 num2fraction@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
@@ -8932,10 +9121,10 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-portal-vue@^2.1.7:
-  version "2.1.7"
-  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.7.tgz#ea08069b25b640ca08a5b86f67c612f15f4e4ad4"
-  integrity sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==
+portal-vue@^3.0.0-beta.0:
+  version "3.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-3.0.0-beta.0.tgz#ada907776fdabad3f9ec609f7f00e5648480b533"
+  integrity sha512-ktV+Q0fwlsjeF+2xGebMxrN6xH8yMdmbLzYbd2OfcgU4OmzSmkj6iP3kBQRGa+7A5WZlqCHWaFfecNs9Igsv9w==
 
 portfinder@^1.0.28:
   version "1.0.32"
@@ -9017,6 +9206,14 @@ postcss-nested@^4, postcss-nested@^4.2.1:
     postcss "^7.0.32"
     postcss-selector-parser "^6.0.2"
 
+postcss-selector-parser@^6.0.13:
+  version "6.0.13"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
+  integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.6:
   version "6.0.10"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
@@ -9832,11 +10029,6 @@ scroll-into-view-if-needed@^2.2.28:
   dependencies:
     compute-scroll-into-view "^1.0.17"
 
-scrollparent@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.0.1.tgz#715d5b9cc57760fb22bdccc3befb5bfe06b1a317"
-  integrity sha512-HSdN78VMvFCSGCkh0oYX/tY4R3P1DW61f8+TeZZ4j2VLgfwvw0bpRSOv4PCVKisktIwbzHCfZsx+rLbbDBqIBA==
-
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -9871,6 +10063,13 @@ semver@^7.1.1, semver@^7.1.3, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semve
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.3.6, semver@^7.5.4:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
@@ -9992,6 +10191,11 @@ signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
+simple-html-tokenizer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz#05c2eec579ffffe145a030ac26cfea61b980fabe"
+  integrity sha512-Mc/gH3RvlKvB/gkp9XwgDKEWrSYyefIJPGG8Jk1suZms/rISdUuVEMx5O1WBnTWaScvxXDvGJrZQWblUmQHjkQ==
+
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
@@ -10553,6 +10757,15 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svg-inline-loader@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/svg-inline-loader/-/svg-inline-loader-0.8.2.tgz#9872414f9e4141601e04eb80cda748c9a50dae71"
+  integrity sha512-kbrcEh5n5JkypaSC152eGfGcnT4lkR0eSfvefaUJkLqgGjRQJyKDvvEE/CCv5aTSdfXuc+N98w16iAojhShI3g==
+  dependencies:
+    loader-utils "^1.1.0"
+    object-assign "^4.0.1"
+    simple-html-tokenizer "^0.1.1"
+
 symbol-observable@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
@@ -11129,12 +11342,25 @@ vue-eslint-parser@^7.0.0:
     lodash "^4.17.21"
     semver "^6.3.0"
 
+vue-eslint-parser@^9.3.1:
+  version "9.3.1"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.3.1.tgz#429955e041ae5371df5f9e37ebc29ba046496182"
+  integrity sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==
+  dependencies:
+    debug "^4.3.4"
+    eslint-scope "^7.1.1"
+    eslint-visitor-keys "^3.3.0"
+    espree "^9.3.1"
+    esquery "^1.4.0"
+    lodash "^4.17.21"
+    semver "^7.3.6"
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
-vue-loader@^15.7.1, vue-loader@^15.9.0:
+vue-loader@^15.7.1:
   version "15.10.0"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.10.0.tgz#2a12695c421a2a2cc2138f05a949d04ed086e38b"
   integrity sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==
@@ -11145,24 +11371,19 @@ vue-loader@^15.7.1, vue-loader@^15.9.0:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-loader@^16.0.0-beta.4:
-  version "16.8.3"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.8.3.tgz#d43e675def5ba9345d6c7f05914c13d861997087"
-  integrity sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==
+vue-loader@^17.2.2:
+  version "17.2.2"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-17.2.2.tgz#96148eb70c1365cc8c5bab4274923596811c79df"
+  integrity sha512-aqNvKJvnz2A/6VWeJZodAo8XLoAlVwBv+2Z6dama+LHsAF+P/xijQ+OfWrxIs0wcGSJduvdzvTuATzXbNKkpiw==
   dependencies:
     chalk "^4.1.0"
     hash-sum "^2.0.0"
-    loader-utils "^2.0.0"
-
-vue-observe-visibility@^0.4.4:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz#878cb8ebcf3078e40807af29774e97105ebd519e"
-  integrity sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q==
+    watchpack "^2.4.0"
 
-vue-resize@^0.4.5:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
-  integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==
+vue-observe-visibility@^2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz#1e4eda7b12562161d58984b7e0dea676d83bdb13"
+  integrity sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==
 
 vue-resize@^1.0.0:
   version "1.0.1"
@@ -11171,17 +11392,22 @@ vue-resize@^1.0.0:
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+vue-resize@^2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz#43eeb79e74febe932b9b20c5c57e0ebc14e2df3a"
+  integrity sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==
+
 vue-router@^3.6.5:
   version "3.6.5"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"
   integrity sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==
 
-vue-router@^4:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.5.tgz#256f597e3f5a281a23352a6193aa6e342c8d9f9a"
-  integrity sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==
+vue-router@^4.2.5:
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.5.tgz#b9e3e08f1bd9ea363fdd173032620bc50cf0e98a"
+  integrity sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==
   dependencies:
-    "@vue/devtools-api" "^6.1.4"
+    "@vue/devtools-api" "^6.5.0"
 
 vue-style-loader@^4.1.0:
   version "4.1.3"
@@ -11191,27 +11417,19 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.7.10:
-  version "2.7.10"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.10.tgz#9e20f35b2fdccacacf732dd7dedb49bf65f4556b"
-  integrity sha512-QO+8R9YRq1Gudm8ZMdo/lImZLJVUIAM8c07Vp84ojdDAf8HmPJc7XB556PcXV218k2AkKznsRz6xB5uOjAC4EQ==
-  dependencies:
-    de-indent "^1.0.2"
-    he "^1.2.0"
-
 vue-template-es2015-compiler@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue-virtual-scroller@^1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-1.0.10.tgz#fdf243240001f05bd79aa77f2e2e60403760e2fb"
-  integrity sha512-Hn4qSBDhRY4XdngPioYy/ykDjrLX/NMm1fQXm/4UQQ/Xv1x8JbHGFZNftQowTcfICgN7yc31AKnUk1UGLJ2ndA==
+vue-virtual-scroller@^2.0.0-alpha.1:
+  version "2.0.0-beta.8"
+  resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.8.tgz#eeceda57e4faa5ba1763994c873923e2a956898b"
+  integrity sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==
   dependencies:
-    scrollparent "^2.0.1"
-    vue-observe-visibility "^0.4.4"
-    vue-resize "^0.4.5"
+    mitt "^2.1.0"
+    vue-observe-visibility "^2.0.0-alpha.1"
+    vue-resize "^2.0.0-alpha.1"
 
 vue@^2.7.10:
   version "2.7.10"
@@ -11221,7 +11439,7 @@ vue@^2.7.10:
     "@vue/compiler-sfc" "2.7.10"
     csstype "^3.1.0"
 
-vue@^3.1.0-beta.5, vue@^3.2.0, vue@^3.2.33:
+vue@^3.2.0, vue@^3.2.33:
   version "3.2.39"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.39.tgz#de071c56c4c32c41cbd54e55f11404295c0dd62d"
   integrity sha512-tRkguhRTw9NmIPXhzk21YFBqXHT2t+6C6wPOgQ50fcFVWnPdetmRqbmySRHznrYjX2E47u0cGlKGcxKZJ38R/g==
@@ -11232,6 +11450,17 @@ vue@^3.1.0-beta.5, vue@^3.2.0, vue@^3.2.33:
     "@vue/server-renderer" "3.2.39"
     "@vue/shared" "3.2.39"
 
+vue@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"
+  integrity sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==
+  dependencies:
+    "@vue/compiler-dom" "3.3.4"
+    "@vue/compiler-sfc" "3.3.4"
+    "@vue/runtime-dom" "3.3.4"
+    "@vue/server-renderer" "3.3.4"
+    "@vue/shared" "3.3.4"
+
 vuex@^3.6.2:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
@@ -11580,6 +11809,11 @@ ws@~8.2.3:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
   integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==
 
+xml-name-validator@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"
+  integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
+
 xmlhttprequest-ssl@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"

From 82178f7792dc83cd7432600fa7cb030b32f8884b Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 00:58:44 +0900
Subject: [PATCH 13/29] chore: Migrate router config

---
 packages/app-frontend/src/router.ts | 28 +++++++++++-----------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/packages/app-frontend/src/router.ts b/packages/app-frontend/src/router.ts
index f5d908828..eac72f85d 100644
--- a/packages/app-frontend/src/router.ts
+++ b/packages/app-frontend/src/router.ts
@@ -1,5 +1,4 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import { RouteLocationNormalized, RouteRecordRaw, createRouter, createWebHashHistory } from 'vue-router'
 import ComponentsInspector from './features/components/ComponentsInspector.vue'
 import CustomInspector from './features/inspector/custom/CustomInspector.vue'
 import Timeline from './features/timeline/Timeline.vue'
@@ -9,27 +8,21 @@ import PluginDetails from './features/plugin/PluginDetails.vue'
 import GlobalSettings from './features/settings/GlobalSettings.vue'
 import { BuiltinTabs, getStorage, setStorage } from '@vue-devtools/shared-utils'
 
-Vue.use(VueRouter)
-
-const RouterView = {
-  render: h => h('router-view'),
-}
-
-const routes = [
+const routes: RouteRecordRaw[] = [
   {
     path: '/',
     redirect: {
-      name: 'inspector-components',
+      // An error will be thrown if param id is not provided, provide a default value to avoid this.
+      // Ref: https://github.com/vuejs/router/issues/845
+      path: '/app/init/inspector/components',
     },
   },
   {
     path: '/app/:appId',
-    component: RouterView,
     children: [
       {
         path: 'inspector',
         name: 'inspector',
-        component: RouterView,
         children: [
           {
             path: 'components/:componentId?',
@@ -44,7 +37,7 @@ const routes = [
             name: 'custom-inspector',
             component: CustomInspector,
             meta: {
-              tab: route => `custom-inspector:${route.params.inspectorId}`,
+              tab: (route: RouteLocationNormalized) => `custom-inspector:${route.params.inspectorId}`,
             },
           },
         ],
@@ -89,15 +82,16 @@ const routes = [
     ],
   },
   {
-    path: '*',
+    path: '/:pathMatch(.*)*',
     redirect: '/',
   },
 ]
 
 const STORAGE_ROUTE = 'route'
 
-export function createRouter () {
-  const router = new VueRouter({
+export function createRouterInstance () {
+  const router = createRouter({
+    history: createWebHashHistory('/'),
     routes,
   })
 
@@ -106,7 +100,7 @@ export function createRouter () {
     router.push(previousRoute)
   }
 
-  router.afterEach(to => {
+  router.afterEach((to) => {
     setStorage(STORAGE_ROUTE, to.fullPath)
   })
 

From b909bbe13b9f766cc1a88dff6c4ae7e1ef23974e Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 01:03:34 +0900
Subject: [PATCH 14/29] chore: Migrate env/shared data

---
 packages/shared-utils/src/env.ts         |  8 +++++---
 packages/shared-utils/src/shared-data.ts | 10 ++--------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/shared-utils/src/env.ts b/packages/shared-utils/src/env.ts
index 8b33dd061..00ca20734 100644
--- a/packages/shared-utils/src/env.ts
+++ b/packages/shared-utils/src/env.ts
@@ -1,3 +1,5 @@
+import { App } from 'vue'
+
 export const isBrowser = typeof navigator !== 'undefined'
 export const target: any = isBrowser
   ? window
@@ -18,10 +20,10 @@ export const keys = {
   esc: 'Esc',
 }
 
-export function initEnv (Vue) {
-  if (Vue.prototype.hasOwnProperty('$isChrome')) return
+export function initEnv (app: App) {
+  if (app.config.globalProperties.hasOwnProperty('$isChrome')) return
 
-  Object.defineProperties(Vue.prototype, {
+  Object.defineProperties(app.config.globalProperties, {
     $isChrome: { get: () => isChrome },
     $isFirefox: { get: () => isFirefox },
     $isWindows: { get: () => isWindows },
diff --git a/packages/shared-utils/src/shared-data.ts b/packages/shared-utils/src/shared-data.ts
index 4c0011453..17345b170 100644
--- a/packages/shared-utils/src/shared-data.ts
+++ b/packages/shared-utils/src/shared-data.ts
@@ -1,3 +1,4 @@
+import { reactive } from 'vue'
 import { setStorage, getStorage } from './storage'
 import { Bridge } from './bridge'
 import { isBrowser, isMac } from './env'
@@ -76,7 +77,6 @@ let initRetryCount = 0
 export interface SharedDataParams {
   bridge: Bridge
   persist: boolean
-  Vue?: any
 }
 
 const initCbs = []
@@ -159,13 +159,7 @@ export function initSharedData (params: SharedDataParams): Promise<void> {
       bridge.send('shared-data:minion-init-waiting')
     }
 
-    data = {
-      ...internalSharedData,
-    }
-
-    if (params.Vue) {
-      data = params.Vue.observable(data)
-    }
+    data = reactive({ ...internalSharedData })
 
     // Update value from other shared data clients
     bridge.on('shared-data:set', ({ key, value }) => {

From c4f7c42f17545f0888ff7c633708b37b9d61f201 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 01:13:13 +0900
Subject: [PATCH 15/29] chore: Migrate main entry files

---
 packages/app-frontend/src/app.ts   | 56 +++++++++++-------------------
 packages/app-frontend/src/index.ts |  2 +-
 2 files changed, 22 insertions(+), 36 deletions(-)

diff --git a/packages/app-frontend/src/app.ts b/packages/app-frontend/src/app.ts
index 621b182ab..20fe47514 100644
--- a/packages/app-frontend/src/app.ts
+++ b/packages/app-frontend/src/app.ts
@@ -1,8 +1,7 @@
 import App from './features/App.vue'
-
-import Vue from 'vue'
+import { App as VueApp, createApp as createVueApp } from 'vue'
 import { isChrome, initEnv, SharedData, initSharedData, destroySharedData, BridgeEvents } from '@vue-devtools/shared-utils'
-import { createRouter } from './router'
+import { createRouterInstance } from './router'
 import { getBridge, setBridge } from './features/bridge'
 import { setAppConnected, setAppInitializing } from './features/connection'
 import { setupAppsBridgeEvents } from './features/apps'
@@ -12,37 +11,25 @@ import { setupCustomInspectorBridgeEvents } from './features/inspector/custom/co
 import { setupPluginsBridgeEvents } from './features/plugin'
 import { setupPlugins } from './plugins'
 
-setupPlugins()
-
 // Capture and log devtool errors when running as actual extension
 // so that we can debug it by inspecting the background page.
 // We do want the errors to be thrown in the dev shell though.
-if (isChrome) {
-  Vue.config.errorHandler = (e, vm) => {
-    getBridge()?.send('ERROR', {
-      message: e.message,
-      stack: e.stack,
-      component: vm.$options.name || (vm.$options as any)._componentTag || 'anonymous',
-    })
-  }
-}
-
-// @ts-ignore
-Vue.options.renderError = (h, e) => {
-  return h('pre', {
-    class: 'text-white bg-red-500 p-2 rounded text-xs overflow-auto',
-  }, e.stack)
-}
-
 export function createApp () {
-  const router = createRouter()
-
-  const app = new Vue({
-    router,
-    render: h => h(App as any),
-  })
-
-  // @TODO [Vue 3] Setup plugins
+  const router = createRouterInstance()
+
+  const app = createVueApp(App)
+  app.use(router)
+  setupPlugins(app)
+
+  if (isChrome) {
+    app.config.errorHandler = (e, vm) => {
+      getBridge()?.send('ERROR', {
+        message: (e as Error).message,
+        stack: (e as Error).stack,
+        component: vm?.$options.name || (vm?.$options as any)._componentTag || 'anonymous',
+      })
+    }
+  }
 
   return app
 }
@@ -51,22 +38,22 @@ export function createApp () {
  * Connect then init the app. We need to reconnect on every reload, because a
  * new backend will be injected.
  */
-export function connectApp (app, shell) {
+export function connectApp (app: VueApp, shell) {
   shell.connect(async bridge => {
     setBridge(bridge)
     // @TODO remove
     // @ts-ignore
     window.bridge = bridge
 
-    if (Object.prototype.hasOwnProperty.call(Vue.prototype, '$shared')) {
+    if (app.config.globalProperties.$shared) {
       destroySharedData()
     } else {
-      Object.defineProperty(Vue.prototype, '$shared', {
+      Object.defineProperty(app.config.globalProperties, '$shared', {
         get: () => SharedData,
       })
     }
 
-    initEnv(Vue)
+    initEnv(app)
 
     bridge.on(BridgeEvents.TO_FRONT_TITLE, ({ title }: { title: string }) => {
       document.title = `${title} - Vue devtools`
@@ -75,7 +62,6 @@ export function connectApp (app, shell) {
     await initSharedData({
       bridge,
       persist: true,
-      Vue,
     })
 
     if (SharedData.logDetected) {
diff --git a/packages/app-frontend/src/index.ts b/packages/app-frontend/src/index.ts
index 3959c8d8b..571747b71 100644
--- a/packages/app-frontend/src/index.ts
+++ b/packages/app-frontend/src/index.ts
@@ -15,7 +15,7 @@ export { setAppConnected } from './features/connection'
 export async function initDevTools (shell: Shell) {
   await initStorage()
   const app = createApp()
-  app.$mount('#app')
+  app.mount('#app')
   connectApp(app, shell)
   shell.onReload(() => {
     setAppConnected(false)

From 03d6227418b7560652d280532504fa167cfd09d7 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 01:15:59 +0900
Subject: [PATCH 16/29] chore: Migrate event/slots/defineComonent syntax

---
 .../src/features/components/RenderCode.vue    |  6 ++--
 .../src/features/inspector/DataField.vue      | 23 ++++++-------
 .../timeline/AskScreenshotPermission.vue      | 33 ++++++++++---------
 .../src/features/timeline/Timeline.vue        | 31 +++++++++--------
 .../src/features/timeline/TimelineView.vue    |  8 ++---
 5 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/packages/app-frontend/src/features/components/RenderCode.vue b/packages/app-frontend/src/features/components/RenderCode.vue
index 5e3bb9e19..96aeec5d4 100644
--- a/packages/app-frontend/src/features/components/RenderCode.vue
+++ b/packages/app-frontend/src/features/components/RenderCode.vue
@@ -1,13 +1,13 @@
 <script>
-import { reactive, watch } from 'vue'
+import { defineAsyncComponent, reactive, watch } from 'vue'
 import { BridgeEvents } from '@vue-devtools/shared-utils'
 import { useBridge } from '@front/features/bridge'
 import { darkMode } from '@front/util/theme'
 
-const CodeEditor = () => import(
+const CodeEditor = defineAsyncComponent(() => import(
   /* webpackChunkName: "CodeEditor" */
   '@front/features/code/CodeEditor.vue'
-)
+))
 
 export default {
   components: {
diff --git a/packages/app-frontend/src/features/inspector/DataField.vue b/packages/app-frontend/src/features/inspector/DataField.vue
index 01321e7d4..ffc0d97b6 100644
--- a/packages/app-frontend/src/features/inspector/DataField.vue
+++ b/packages/app-frontend/src/features/inspector/DataField.vue
@@ -324,10 +324,11 @@ export default defineComponent({
       }"
       class="self"
       placement="left"
-      :offset="[0, 24]"
-      @click.native="onClick"
-      @mouseenter.native="onContextMenuMouseEnter"
-      @mouseleave.native="onContextMenuMouseLeave"
+      :distance="0"
+      :skidding="24"
+      @click="onClick"
+      @mouseenter="onContextMenuMouseEnter"
+      @mouseleave="onContextMenuMouseLeave"
     >
       <span
         v-show="isExpandableType"
@@ -492,14 +493,14 @@ export default defineComponent({
 
           <!-- Context menu -->
           <VueDropdown
-            :open.sync="contextMenuOpen"
+            v-model="contextMenuOpen"
           >
-            <VueButton
-              slot="trigger"
-              icon-left="more_vert"
-              class="icon-button flat"
-            />
-
+            <template #trigger>
+              <VueButton
+                icon-left="more_vert"
+                class="icon-button flat"
+              />
+            </template>
             <div
               class="context-menu-dropdown"
               @mouseenter="onContextMenuMouseEnter"
diff --git a/packages/app-frontend/src/features/timeline/AskScreenshotPermission.vue b/packages/app-frontend/src/features/timeline/AskScreenshotPermission.vue
index 0814eaf4c..badf57233 100644
--- a/packages/app-frontend/src/features/timeline/AskScreenshotPermission.vue
+++ b/packages/app-frontend/src/features/timeline/AskScreenshotPermission.vue
@@ -47,22 +47,23 @@ export default defineComponent({
       <p>Please note that we will only use this permission to take screenshots of the current tab.</p>
     </div>
 
-    <div
-      slot="footer"
-      class="actions"
-    >
-      <VueButton
-        class="big"
-        @click="cancel()"
+    <template #footer>
+      <div
+        class="actions"
       >
-        Cancel
-      </VueButton>
-      <VueButton
-        class="primary big"
-        @click="requestPermission()"
-      >
-        Request permission
-      </VueButton>
-    </div>
+        <VueButton
+          class="big"
+          @click="cancel()"
+        >
+          Cancel
+        </VueButton>
+        <VueButton
+          class="primary big"
+          @click="requestPermission()"
+        >
+          Request permission
+        </VueButton>
+      </div>
+    </template>
   </VueModal>
 </template>
diff --git a/packages/app-frontend/src/features/timeline/Timeline.vue b/packages/app-frontend/src/features/timeline/Timeline.vue
index 461c2df5b..6fe9f3ce3 100644
--- a/packages/app-frontend/src/features/timeline/Timeline.vue
+++ b/packages/app-frontend/src/features/timeline/Timeline.vue
@@ -64,7 +64,7 @@ export default defineComponent({
       applyScroll()
     })
 
-    function onLayersScroll (event: WheelEvent) {
+    function onLayersScroll (event: UIEvent) {
       const target = event.currentTarget as HTMLElement
       if (target.scrollTop !== vScroll.value) {
         vScroll.value = target.scrollTop
@@ -171,8 +171,8 @@ export default defineComponent({
 
     // Zoom
 
-    let zoomTimer
-    let zoomDelayTimer
+    let zoomTimer: ReturnType<typeof setTimeout>
+    let zoomDelayTimer: ReturnType<typeof setTimeout>
 
     function zoom (delta: number) {
       const wrapper: HTMLDivElement = document.querySelector('[data-id="timeline-view-wrapper"]')
@@ -229,8 +229,8 @@ export default defineComponent({
 
     // Move buttons
 
-    let moveTimer
-    let moveDelayTimer
+    let moveTimer: ReturnType<typeof setTimeout>
+    let moveDelayTimer: ReturnType<typeof setTimeout>
 
     function move (delta: number) {
       const wrapper: HTMLDivElement = document.querySelector('[data-id="timeline-view-wrapper"]')
@@ -352,8 +352,7 @@ export default defineComponent({
               :hover="hoverLayerId === layer.id"
               :selected="selectedLayer === layer"
               class="flex-none"
-              @mouseenter.native="hoverLayerId = layer.id"
-              @mouseleave.native="hoverLayerId = null"
+              @mouseenter="hoverLayerId = layer.id"
               @select="selectLayer(layer)"
               @hide="setLayerHidden(layer, true)"
             />
@@ -376,35 +375,35 @@ export default defineComponent({
                 <VueButton
                   icon-left="arrow_left"
                   class="flex-none w-4 h-4 p-0 flat zoom-btn"
-                  @mousedown.native="moveLeft()"
+                  @mousedown="moveLeft()"
                 />
 
                 <TimelineScrollbar
-                  :min.sync="minTime"
-                  :max.sync="maxTime"
-                  :start.sync="startTime"
-                  :end.sync="endTime"
+                  v-model:start="startTime"
+                  v-model:end="endTime"
+                  :min="minTime"
+                  :max="maxTime"
                   class="flex-1"
                 />
 
                 <VueButton
                   icon-left="arrow_right"
                   class="flex-none w-4 h-4 p-0 flat zoom-btn"
-                  @mousedown.native="moveRight()"
+                  @mousedown="moveRight()"
                 />
 
                 <VueButton
                   v-tooltip="'Zoom in'"
                   icon-left="add"
                   class="flex-none w-4 h-4 p-0 flat zoom-btn"
-                  @mousedown.native="zoomIn()"
+                  @mousedown="zoomIn()"
                 />
 
                 <VueButton
                   v-tooltip="'Zoom out'"
                   icon-left="remove"
                   class="flex-none w-4 h-4 p-0 flat zoom-btn"
-                  @mousedown.native="zoomOut()"
+                  @mousedown="zoomOut()"
                 />
               </div>
               <TimelineView
@@ -447,7 +446,7 @@ export default defineComponent({
               </template>
             </SplitPane>
           </template>
-        </splitpane>
+        </SplitPane>
       </template>
     </SplitPane>
 
diff --git a/packages/app-frontend/src/features/timeline/TimelineView.vue b/packages/app-frontend/src/features/timeline/TimelineView.vue
index b983b9f79..e6686dbcd 100644
--- a/packages/app-frontend/src/features/timeline/TimelineView.vue
+++ b/packages/app-frontend/src/features/timeline/TimelineView.vue
@@ -3,13 +3,14 @@ import * as PIXI from 'pixi.js-legacy'
 import { install as installUnsafeEval } from '@pixi/unsafe-eval'
 import { EventSystem, FederatedPointerEvent, FederatedWheelEvent } from '@pixi/events'
 import { Renderer } from '@pixi/core'
-import Vue, {
+import {
   ref,
   onMounted,
   onUnmounted,
   watch,
   watchEffect,
   defineComponent,
+  nextTick as nextTickVue,
 } from 'vue'
 import { SharedData, isMac } from '@vue-devtools/shared-utils'
 import {
@@ -221,7 +222,7 @@ export default defineComponent({
      * This prevents flashing when the user is scrolling at the same time
      */
     async function interactionDraw () {
-      await Vue.nextTick()
+      await nextTickVue()
       if (!interactionDrawBlocked) {
         interactionDrawScheduled = false
         draw()
@@ -439,6 +440,7 @@ export default defineComponent({
     }
 
     function drawLayerBackground (layerId: Layer['id'], alpha = 1) {
+      if (!layersMap[layerId]) return
       const { layer } = layersMap[layerId]
       layerHoverEffect.beginFill(layer.color, alpha)
       layerHoverEffect.drawRect(0, getLayerY(layer), getAppWidth(), (layer.height + 1) * LAYER_SIZE)
@@ -1203,8 +1205,6 @@ export default defineComponent({
     watch(startTime, () => queueCameraUpdate())
     watch(endTime, () => queueCameraUpdate())
 
-    let isShifPressed: boolean
-
     onMounted(() => {
       queueCameraUpdate()
       // @ts-ignore

From 9f5d5d42c951da58003d6d86548f1a4f0f8017e3 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 01:17:20 +0900
Subject: [PATCH 17/29] chore: Migrate shell-host-syntax

---
 packages/shell-host/src/devtools.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/shell-host/src/devtools.js b/packages/shell-host/src/devtools.js
index be5220457..0752a372c 100644
--- a/packages/shell-host/src/devtools.js
+++ b/packages/shell-host/src/devtools.js
@@ -1,5 +1,7 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import DevIframe from './DevIframe.vue'
+import { setupPlugins } from '@front/plugins'
 
-const app = new Vue(DevIframe)
-app.$mount('#iframe-target')
+const app = createApp(DevIframe)
+setupPlugins(app)
+app.mount('#iframe-target')

From b05ea0cc7493cb2895ae61e6978a6ae3c6721c08 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 01:18:08 +0900
Subject: [PATCH 18/29] fix: Fix style of app root element

---
 packages/app-frontend/src/assets/style/index.styl | 4 ++++
 packages/shell-host/public/index.html             | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/app-frontend/src/assets/style/index.styl b/packages/app-frontend/src/assets/style/index.styl
index 1a3dafe53..f3a677c7b 100644
--- a/packages/app-frontend/src/assets/style/index.styl
+++ b/packages/app-frontend/src/assets/style/index.styl
@@ -30,6 +30,10 @@ html, body
 body
   overflow hidden
 
+#app
+  width: 100%
+  height: 100%
+
 button:focus
   outline none
 
diff --git a/packages/shell-host/public/index.html b/packages/shell-host/public/index.html
index d03398cb7..be7d7c2a1 100644
--- a/packages/shell-host/public/index.html
+++ b/packages/shell-host/public/index.html
@@ -29,7 +29,7 @@
     </style>
   </head>
   <body>
-    <div id="iframe-target"></div>
+    <div id="iframe-target" class="dev-iframe flex-1 flex flex-col"></div>
     <div class="not-vue">Not Vue</div>
     <div id="container">
       <div id="app"></div>

From b8af3fc452571f69b1801cb9cccd035a5ad17489 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 01:18:29 +0900
Subject: [PATCH 19/29] fix: Fix lint config

---
 .eslintrc.js                         | 12 ++++++++++++
 packages/shell-dev-vue2/src/index.js |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index b78fc6d2e..e3f3e76a6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -39,6 +39,9 @@ module.exports = {
         },
       },
     ],
+    'func-call-spacing': 'off',
+    'vue/component-definition-name-casing': 'off',
+    'vue/multi-word-component-names': 'off',
     '@typescript-eslint/ban-ts-comment': 'warn',
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
@@ -76,6 +79,14 @@ module.exports = {
       files: ['packages/shell-dev-vue3/**'],
       rules: {
         'vue/valid-template-root': 'off',
+        'vue/one-component-per-file': 'off',
+        'vue/no-v-model-argument': 'off',
+      },
+    },
+    {
+      files: ['packages/app-frontend/**'],
+      rules: {
+        'vue/no-v-model-argument': 'off',
       },
     },
     {
@@ -99,6 +110,7 @@ module.exports = {
       },
       rules: {
         'no-console': 'off',
+        'vue/no-multiple-template-root': 'off',
       },
     },
     {
diff --git a/packages/shell-dev-vue2/src/index.js b/packages/shell-dev-vue2/src/index.js
index 9e66f474b..b1acdf11b 100644
--- a/packages/shell-dev-vue2/src/index.js
+++ b/packages/shell-dev-vue2/src/index.js
@@ -83,7 +83,7 @@ if (ce.attachShadow) {
   const shadowRoot = ce.attachShadow({ mode: 'open' })
 
   const ceVM = new Vue({
-    name: 'Shadow',
+    name: 'ShadowDom',
     render (h) {
       return h('h2', 'Inside Shadow DOM!')
     },

From 15fbac90beef9994a2580b077574742578fbb288 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 01:18:58 +0900
Subject: [PATCH 20/29] chore: Use modern syntax on orientation

---
 packages/app-frontend/src/features/layout/orientation.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app-frontend/src/features/layout/orientation.ts b/packages/app-frontend/src/features/layout/orientation.ts
index 35773b9e0..00975c69c 100644
--- a/packages/app-frontend/src/features/layout/orientation.ts
+++ b/packages/app-frontend/src/features/layout/orientation.ts
@@ -10,8 +10,8 @@ export function useOrientation () {
 
 const mediaQuery = window.matchMedia('(min-width: 685px)')
 switchOrientation(mediaQuery)
-mediaQuery.addListener(switchOrientation)
+mediaQuery.addEventListener('change', switchOrientation)
 
-function switchOrientation (mediaQueryEvent) {
+function switchOrientation (mediaQueryEvent: MediaQueryListEvent | MediaQueryList) {
   orientation.value = mediaQueryEvent.matches ? 'landscape' : 'portrait'
 }

From 0996e99777097aff9b59adc810a62b436e312381 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 01:19:23 +0900
Subject: [PATCH 21/29] chore: Apply type-safe on DevIframe component

---
 packages/shell-host/src/DevIframe.vue | 201 ++++++++++++++------------
 1 file changed, 109 insertions(+), 92 deletions(-)

diff --git a/packages/shell-host/src/DevIframe.vue b/packages/shell-host/src/DevIframe.vue
index 0ff25ef47..08d320b9b 100644
--- a/packages/shell-host/src/DevIframe.vue
+++ b/packages/shell-host/src/DevIframe.vue
@@ -10,7 +10,7 @@ export default defineComponent({
   setup () {
     const src = ref(localStorage.getItem(STORAGE_URL) ?? 'target.html')
     const url = ref(src.value)
-    const iframe = ref(null)
+    const iframe = ref<HTMLIFrameElement | null>(null)
     const loading = ref(true)
     const error = ref(false)
 
@@ -22,6 +22,10 @@ export default defineComponent({
       if (!src || src === 'false') {
         return done()
       }
+      if (!iframe.value?.contentDocument) {
+        throw new Error('Cant find iframe contentDocument')
+      }
+
       const script = iframe.value.contentDocument.createElement('script')
       script.src = src.replace(/\$ORIGIN/g, location.origin)
       script.onload = done
@@ -30,6 +34,10 @@ export default defineComponent({
 
     function onLoad () {
       loading.value = false
+
+      if (!iframe.value?.contentWindow) {
+        throw new Error('Cant find iframe contentWindow')
+      }
       try {
         console.log('%cInstalling hook...', 'color:#42B983;')
         installHook(iframe.value.contentWindow)
@@ -45,17 +53,28 @@ export default defineComponent({
             inject('$ORIGIN/target/backend.js', () => {
               // 4. send back bridge
               console.log('%cInit bridge...', 'color:#42B983;')
-              cb(new Bridge({
-                listen (fn) {
-                  iframe.value.contentWindow.parent.addEventListener('message', evt => fn(evt.data))
-                },
-                send (data) {
-                  if (process.env.NODE_ENV !== 'production') {
-                    console.log('%cdevtools -> backend', 'color:#888;', data)
-                  }
-                  iframe.value.contentWindow.postMessage(data, '*')
-                },
-              }))
+              cb(
+                new Bridge({
+                  listen (fn) {
+                    if (!iframe.value) {
+                      throw new Error('Cant find iframe.')
+                    }
+                    (iframe.value.contentWindow as Window).parent.addEventListener(
+                      'message',
+                      (evt) => fn(evt.data),
+                    )
+                  },
+                  send (data) {
+                    if (process.env.NODE_ENV !== 'production') {
+                      console.log('%cdevtools -> backend', 'color:#888;', data)
+                    }
+                    if (!iframe.value) {
+                      throw new Error('Cant find iframe.')
+                    }
+                    (iframe.value.contentWindow as Window).postMessage(data, '*')
+                  },
+                }),
+              )
             })
           },
           onReload (reloadFn) {
@@ -63,7 +82,7 @@ export default defineComponent({
           },
         })
 
-        iframe.value.contentWindow.addEventListener('unload', () => {
+        iframe.value?.contentWindow?.addEventListener('unload', () => {
           if (loadListener) loadListener()
           loading.value = true
         })
@@ -87,7 +106,7 @@ export default defineComponent({
     }
 
     function reload () {
-      iframe.value.contentWindow.location.reload()
+      iframe.value?.contentWindow?.location.reload()
     }
 
     function reset () {
@@ -112,88 +131,86 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="dev-iframe flex-1 flex flex-col">
-    <iframe
-      id="target"
-      ref="iframe"
-      name="target"
-      class="flex-1 border-none"
-      data-vue-devtools-ignore
-      :src="src"
-      @load="onLoad"
+  <iframe
+    id="target"
+    ref="iframe"
+    name="target"
+    class="flex-1 border-none"
+    data-vue-devtools-ignore
+    :src="src"
+    @load="onLoad"
+  />
+  <div class="border-t border-gray-300 flex relative">
+    <VueLoadingBar
+      v-if="loading"
+      class="primary ghost absolute left-0 top-0 w-full"
+      unknown
+    />
+
+    <VueInput
+      v-model="url"
+      name="url"
+      placeholder="Enter target URL..."
+      class="min-w-0 flex-1 flat"
+      @keyup.enter="openUrl()"
     />
-    <div class="border-t border-gray-300 flex relative">
-      <VueLoadingBar
-        v-if="loading"
-        class="primary ghost absolute left-0 top-0 w-full"
-        unknown
-      />
-
-      <VueInput
-        v-model="url"
-        name="url"
-        placeholder="Enter target URL..."
-        class="min-w-0 flex-1 flat"
-        @keyup.enter="openUrl()"
-      />
-
-      <VueButton
-        v-tooltip="'Refresh page'"
-        icon-left="refresh"
-        class="icon-button flat"
-        @click="openUrl()"
-      />
-
-      <VueButton
-        v-tooltip="'Reset URL'"
-        icon-left="backspace"
-        :disabled="src === 'target.html'"
-        class="icon-button flat"
-        @click="reset()"
-      />
-
-      <VueDropdown
-        :offset="[0, 0]"
-      >
-        <template #trigger>
-          <VueButton
-            v-tooltip="'Help'"
-            icon-left="help"
-            class="icon-button flat"
-          />
-        </template>
-
-        <div class="p-8">
-          <p>
-            You need to <a
-              href="https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome"
-              target="_blank"
-              class="text-green-500"
-            >disable Chrome web security</a> to allow manipulating an iframe on a different origin.
-          </p>
-          <pre class="my-2 p-2 rounded bg-gray-100 dark:bg-gray-900 text-sm">google-chrome --disable-web-security --disable-site-isolation-trials --user-data-dir="temp-chrome-data"</pre>
-          <p>If the devtools have trouble connecting to the webpage, please put this snippet in the target app HTML before the main scripts:</p>
-          <pre
-            class="my-2 p-2 rounded bg-gray-100 dark:bg-gray-900 text-sm"
-            v-html="includeCode"
-          />
-        </div>
-      </VueDropdown>
-    </div>
 
-    <VueModal
-      v-if="error"
-      title="Error"
-      @close="error = false"
+    <VueButton
+      v-tooltip="'Refresh page'"
+      icon-left="refresh"
+      class="icon-button flat"
+      @click="openUrl()"
+    />
+
+    <VueButton
+      v-tooltip="'Reset URL'"
+      icon-left="backspace"
+      :disabled="src === 'target.html'"
+      class="icon-button flat"
+      @click="reset()"
+    />
+
+    <VueDropdown
+      :offset="[0, 0]"
     >
-      <div class="p-6">
-        Please <a
-          href="https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome"
-          target="_blank"
-          class="text-green-500"
-        >disable Chrome web security</a> to allow manipulating an iframe on a different origin.
+      <template #trigger>
+        <VueButton
+          v-tooltip="'Help'"
+          icon-left="help"
+          class="icon-button flat"
+        />
+      </template>
+
+      <div class="p-8">
+        <p>
+          You need to <a
+            href="https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome"
+            target="_blank"
+            class="text-green-500"
+          >disable Chrome web security</a> to allow manipulating an iframe on a different origin.
+        </p>
         <pre class="my-2 p-2 rounded bg-gray-100 dark:bg-gray-900 text-sm">google-chrome --disable-web-security --disable-site-isolation-trials --user-data-dir="temp-chrome-data"</pre>
+        <p>If the devtools have trouble connecting to the webpage, please put this snippet in the target app HTML before the main scripts:</p>
+        <pre
+          class="my-2 p-2 rounded bg-gray-100 dark:bg-gray-900 text-sm"
+          v-html="includeCode"
+        />
       </div>
-    </VueModal>
+    </VueDropdown>
   </div>
+
+  <VueModal
+    v-if="error"
+    title="Error"
+    @close="error = false"
+  >
+    <div class="p-6">
+      Please <a
+        href="https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome"
+        target="_blank"
+        class="text-green-500"
+      >disable Chrome web security</a> to allow manipulating an iframe on a different origin.
+      <pre class="my-2 p-2 rounded bg-gray-100 dark:bg-gray-900 text-sm">google-chrome --disable-web-security --disable-site-isolation-trials --user-data-dir="temp-chrome-data"</pre>
+    </div>
+  </VueModal>
 </template>

From 823b8b38e6991a85e7e9f22176c15a6826775fbc Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 01:20:58 +0900
Subject: [PATCH 22/29] chore: Format ui/components

---
 .../components/ui/components/VueButton.vue    | 17 ++++++++++---
 .../components/ui/components/VueDisable.vue   | 20 ++++++++--------
 .../components/ui/components/VueDropdown.vue  | 11 ++++++---
 .../ui/components/VueDropdownButton.vue       |  5 +++-
 .../components/ui/components/VueInput.vue     | 24 +++++++++++++++----
 .../ui/components/VueLoadingBar.vue           |  5 +++-
 .../components/ui/components/VueSelect.vue    | 16 +++++++------
 .../ui/components/VueSelectButton.vue         |  4 ++--
 .../components/ui/components/VueSwitch.vue    |  5 +++-
 9 files changed, 74 insertions(+), 33 deletions(-)

diff --git a/packages/app-frontend/src/features/components/ui/components/VueButton.vue b/packages/app-frontend/src/features/components/ui/components/VueButton.vue
index 71018c81e..8e6675215 100644
--- a/packages/app-frontend/src/features/components/ui/components/VueButton.vue
+++ b/packages/app-frontend/src/features/components/ui/components/VueButton.vue
@@ -22,7 +22,11 @@
         v-if="loadingSecondary"
         class="inline small loading-secondary"
       />
-      <VueIcon v-else-if="iconLeft" :icon="iconLeft" class="button-icon left" />
+      <VueIcon
+        v-else-if="iconLeft"
+        :icon="iconLeft"
+        class="button-icon left"
+      />
 
       <span class="default-slot">
         <slot>
@@ -30,11 +34,18 @@
         </slot>
       </span>
 
-      <div v-if="tag != null" class="tag-wrapper">
+      <div
+        v-if="tag != null"
+        class="tag-wrapper"
+      >
         <div class="tag">{{ tag }}</div>
       </div>
 
-      <VueIcon v-if="iconRight" :icon="iconRight" class="button-icon right" />
+      <VueIcon
+        v-if="iconRight"
+        :icon="iconRight"
+        class="button-icon right"
+      />
     </span>
   </component>
 </template>
diff --git a/packages/app-frontend/src/features/components/ui/components/VueDisable.vue b/packages/app-frontend/src/features/components/ui/components/VueDisable.vue
index 5d27b56a7..1e7cdbacf 100644
--- a/packages/app-frontend/src/features/components/ui/components/VueDisable.vue
+++ b/packages/app-frontend/src/features/components/ui/components/VueDisable.vue
@@ -10,16 +10,6 @@ import { useDisabledChild, useDisabledParent } from '../composables/useDisabled'
 
 export default defineComponent({
   name: 'VueDisable',
-  props: {
-    stopPropagation: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
   components: {
     PropagateDisable: {
       props: {
@@ -34,6 +24,16 @@ export default defineComponent({
       },
     },
   },
+  props: {
+    stopPropagation: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
   setup (props) {
     const { finalDisabled } = useDisabledChild(props)
     const propagateDisabled = computed(() => {
diff --git a/packages/app-frontend/src/features/components/ui/components/VueDropdown.vue b/packages/app-frontend/src/features/components/ui/components/VueDropdown.vue
index 41a553da8..e721d9455 100644
--- a/packages/app-frontend/src/features/components/ui/components/VueDropdown.vue
+++ b/packages/app-frontend/src/features/components/ui/components/VueDropdown.vue
@@ -17,7 +17,9 @@
           :icon-left="iconLeft"
           :icon-right="iconRight"
           :disabled="finalDisabled"
-          >{{ label }}</VueButton>
+        >
+          {{ label }}
+        </VueButton>
       </slot>
     </div>
 
@@ -36,7 +38,10 @@
       </VueDisable>
     </template>
 
-    <resize-observer v-if="forceMinSize" @notify="onResize" />
+    <resize-observer
+      v-if="forceMinSize"
+      @notify="onResize"
+    />
   </VDropdown>
 </template>
 
@@ -54,7 +59,6 @@ import { useDisabledChild } from '../composables/useDisabled'
 
 export default defineComponent({
   name: 'VueDropdown',
-  emits: ['update:modelValue', 'popover-mousedown', 'popover-mouseup'],
   props: {
     autoHide: {
       type: Boolean,
@@ -111,6 +115,7 @@ export default defineComponent({
       default: false,
     },
   },
+  emits: ['update:modelValue', 'popover-mousedown', 'popover-mouseup'],
   setup (props, { emit }) {
     const width = ref(0)
     const popoverContent = ref<HTMLElement | null>(null)
diff --git a/packages/app-frontend/src/features/components/ui/components/VueDropdownButton.vue b/packages/app-frontend/src/features/components/ui/components/VueDropdownButton.vue
index ecbd0fbb1..3b3520f10 100644
--- a/packages/app-frontend/src/features/components/ui/components/VueDropdownButton.vue
+++ b/packages/app-frontend/src/features/components/ui/components/VueDropdownButton.vue
@@ -1,5 +1,8 @@
 <template>
-  <VueButton v-close-popper="true" class="vue-ui-dropdown-button">
+  <VueButton
+    v-close-popper="true"
+    class="vue-ui-dropdown-button"
+  >
     <slot />
   </VueButton>
 </template>
diff --git a/packages/app-frontend/src/features/components/ui/components/VueInput.vue b/packages/app-frontend/src/features/components/ui/components/VueInput.vue
index d3df00326..dfcc39e07 100644
--- a/packages/app-frontend/src/features/components/ui/components/VueInput.vue
+++ b/packages/app-frontend/src/features/components/ui/components/VueInput.vue
@@ -13,9 +13,16 @@
     @click="focus()"
   >
     <div class="content">
-      <VueLoadingIndicator v-if="loadingLeft" class="small left" />
+      <VueLoadingIndicator
+        v-if="loadingLeft"
+        class="small left"
+      />
 
-      <VueIcon v-else-if="iconLeft" :icon="iconLeft" class="input-icon left" />
+      <VueIcon
+        v-else-if="iconLeft"
+        :icon="iconLeft"
+        class="input-icon left"
+      />
 
       <slot name="left" />
 
@@ -39,14 +46,21 @@
           class="input suggestion"
           :value="suggestion"
           disabled
-        />
+        >
       </div>
 
       <slot name="right" />
 
-      <VueIcon v-if="iconRight" :icon="iconRight" class="input-icon right" />
+      <VueIcon
+        v-if="iconRight"
+        :icon="iconRight"
+        class="input-icon right"
+      />
 
-      <VueLoadingIndicator v-if="loadingRight" class="small right" />
+      <VueLoadingIndicator
+        v-if="loadingRight"
+        class="small right"
+      />
 
       <!-- Focus animation -->
       <div class="border" />
diff --git a/packages/app-frontend/src/features/components/ui/components/VueLoadingBar.vue b/packages/app-frontend/src/features/components/ui/components/VueLoadingBar.vue
index f92413475..20c92f3a6 100644
--- a/packages/app-frontend/src/features/components/ui/components/VueLoadingBar.vue
+++ b/packages/app-frontend/src/features/components/ui/components/VueLoadingBar.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="vue-ui-loading-bar" :class="unknown && 'unknown'">
+  <div
+    class="vue-ui-loading-bar"
+    :class="unknown && 'unknown'"
+  >
     <div
       class="bar"
       :style="!unknown ? { width: `${value * 100}%` } : undefined"
diff --git a/packages/app-frontend/src/features/components/ui/components/VueSelect.vue b/packages/app-frontend/src/features/components/ui/components/VueSelect.vue
index 710aaac66..3dd6de5c0 100644
--- a/packages/app-frontend/src/features/components/ui/components/VueSelect.vue
+++ b/packages/app-frontend/src/features/components/ui/components/VueSelect.vue
@@ -10,19 +10,21 @@
     eager-mount
   >
     <template #trigger>
-      <slot name="trigger" :label="displayedLabel"/>
+      <slot
+        name="trigger"
+        :label="displayedLabel"
+      />
     </template>
 
     <VueGroup
       v-model="model"
       class="vertical"
     >
-      <slot/>
+      <slot />
     </VueGroup>
   </VueDropdown>
 </template>
 
-
 <script lang="ts">
 import { computed, defineComponent, provide, ref, ComponentInternalInstance } from 'vue'
 
@@ -43,7 +45,7 @@ export default defineComponent({
     },
   },
   emits: ['update:modelValue'],
-  setup(props, { emit }) {
+  setup (props, { emit }) {
     const currentChild = ref<ComponentInternalInstance | null>(null)
 
     function setCurrentChild (vm) {
@@ -74,8 +76,8 @@ export default defineComponent({
       model,
       currentChild,
       setCurrentChild,
-      displayedLabel
+      displayedLabel,
     }
-  }
+  },
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/packages/app-frontend/src/features/components/ui/components/VueSelectButton.vue b/packages/app-frontend/src/features/components/ui/components/VueSelectButton.vue
index 36cfcfe0c..4ab71f864 100644
--- a/packages/app-frontend/src/features/components/ui/components/VueSelectButton.vue
+++ b/packages/app-frontend/src/features/components/ui/components/VueSelectButton.vue
@@ -1,13 +1,13 @@
 <template>
   <VueGroupButton
     ref="groupButton"
-    class="vue-ui-select-button"
     v-close-popper="true"
+    class="vue-ui-select-button"
     :label="label"
     flat
     @selected="onSelect"
   >
-    <slot/>
+    <slot />
   </VueGroupButton>
 </template>
 
diff --git a/packages/app-frontend/src/features/components/ui/components/VueSwitch.vue b/packages/app-frontend/src/features/components/ui/components/VueSwitch.vue
index 30b1691a0..d7bc45194 100644
--- a/packages/app-frontend/src/features/components/ui/components/VueSwitch.vue
+++ b/packages/app-frontend/src/features/components/ui/components/VueSwitch.vue
@@ -16,7 +16,10 @@
     @blur="focused = false"
   >
     <div class="content">
-      <VueIcon v-if="icon" :icon="icon" />
+      <VueIcon
+        v-if="icon"
+        :icon="icon"
+      />
       <span class="slot">
         <slot />
       </span>

From 254ec3afd8db9e22ab7bb6da281e7426b77ea14a Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 11:07:04 +0900
Subject: [PATCH 23/29] chore: Replace some PortalVue components with native
 Teleport

---
 packages/app-frontend/src/features/App.vue                | 2 +-
 .../src/features/components/ComponentsInspector.vue       | 8 ++++----
 packages/app-frontend/src/features/header/AppHeader.vue   | 8 ++++----
 .../src/features/inspector/custom/CustomInspector.vue     | 4 ++--
 packages/app-frontend/src/features/plugin/Plugins.vue     | 4 ++--
 .../app-frontend/src/features/settings/GlobalSettings.vue | 4 ++--
 packages/app-frontend/src/features/timeline/Timeline.vue  | 4 ++--
 7 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/app-frontend/src/features/App.vue b/packages/app-frontend/src/features/App.vue
index 1b3c2a9a1..d386c29bc 100644
--- a/packages/app-frontend/src/features/App.vue
+++ b/packages/app-frontend/src/features/App.vue
@@ -122,7 +122,7 @@ export default defineComponent({
       </SplitPane>
     </template>
 
-    <portal-target name="root" />
+    <div id="root" />
 
     <ErrorOverlay />
   </div>
diff --git a/packages/app-frontend/src/features/components/ComponentsInspector.vue b/packages/app-frontend/src/features/components/ComponentsInspector.vue
index af45ccfdf..12ee9e184 100644
--- a/packages/app-frontend/src/features/components/ComponentsInspector.vue
+++ b/packages/app-frontend/src/features/components/ComponentsInspector.vue
@@ -186,7 +186,7 @@ export default defineComponent({
       <div class="border-t border-gray-200 dark:border-gray-800 my-1" />
     </portal>
 
-    <portal to="header-end">
+    <Teleport to="#header-end">
       <VueButton
         v-tooltip="{
           content: $t('ComponentTree.select.tooltip'),
@@ -209,9 +209,9 @@ export default defineComponent({
         icon-left="refresh"
         @click="refresh()"
       />
-    </portal>
+    </Teleport>
 
-    <portal to="root">
+    <Teleport to="#root">
       <div
         v-if="pickingComponent"
         class="absolute inset-0 bg-white bg-opacity-75 dark:bg-black dark:bg-opacity-75 z-100 flex items-center justify-center"
@@ -233,7 +233,7 @@ export default defineComponent({
           </div>
         </div>
       </div>
-    </portal>
+    </Teleport>
   </div>
 </template>
 
diff --git a/packages/app-frontend/src/features/header/AppHeader.vue b/packages/app-frontend/src/features/header/AppHeader.vue
index 172621ff9..5bfed98ae 100644
--- a/packages/app-frontend/src/features/header/AppHeader.vue
+++ b/packages/app-frontend/src/features/header/AppHeader.vue
@@ -156,10 +156,10 @@ export default defineComponent({
     <div class="flex-1" />
 
     <div class="flex items-center">
-      <div class="flex items-center">
-        <portal-target name="header-end" />
-      </div>
-
+      <div
+        id="header-end"
+        class="flex items-center"
+      />
       <VueDropdown
         :offset="[0, 0]"
       >
diff --git a/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue b/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
index e5fe0f7c8..6800fa505 100644
--- a/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
+++ b/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
@@ -121,7 +121,7 @@ export default defineComponent({
       </template>
     </SplitPane>
 
-    <portal to="header-end">
+    <Teleport to="#header-end">
       <template v-if="inspector?.actions">
         <VueButton
           v-for="(action, index) of inspector.actions"
@@ -138,7 +138,7 @@ export default defineComponent({
         icon-left="refresh"
         @click="refreshInspector()"
       />
-    </portal>
+    </Teleport>
   </div>
   <EmptyPane
     v-else
diff --git a/packages/app-frontend/src/features/plugin/Plugins.vue b/packages/app-frontend/src/features/plugin/Plugins.vue
index f43d4f96f..e987a19fc 100644
--- a/packages/app-frontend/src/features/plugin/Plugins.vue
+++ b/packages/app-frontend/src/features/plugin/Plugins.vue
@@ -73,7 +73,7 @@ export default defineComponent({
       </template>
     </SplitPane>
 
-    <portal to="header-end">
+    <Teleport to="#header-end">
       <VueButton
         :to="{
           name: 'global-settings'
@@ -83,7 +83,7 @@ export default defineComponent({
       >
         Global settings
       </VueButton>
-    </portal>
+    </Teleport>
   </div>
 </template>
 
diff --git a/packages/app-frontend/src/features/settings/GlobalSettings.vue b/packages/app-frontend/src/features/settings/GlobalSettings.vue
index 9b172a274..97a47f1cf 100644
--- a/packages/app-frontend/src/features/settings/GlobalSettings.vue
+++ b/packages/app-frontend/src/features/settings/GlobalSettings.vue
@@ -81,7 +81,7 @@ export default defineComponent({})
       </VueFormField>
     </div>
 
-    <portal to="header-end">
+    <Teleport to="#header-end">
       <VueButton
         :to="{
           name: 'plugins'
@@ -91,6 +91,6 @@ export default defineComponent({})
       >
         Plugin settings
       </VueButton>
-    </portal>
+    </Teleport>
   </div>
 </template>
diff --git a/packages/app-frontend/src/features/timeline/Timeline.vue b/packages/app-frontend/src/features/timeline/Timeline.vue
index 6fe9f3ce3..739f90937 100644
--- a/packages/app-frontend/src/features/timeline/Timeline.vue
+++ b/packages/app-frontend/src/features/timeline/Timeline.vue
@@ -450,7 +450,7 @@ export default defineComponent({
       </template>
     </SplitPane>
 
-    <portal to="header-end">
+    <Teleport to="#header-end">
       <VueDropdown>
         <template #trigger>
           <VueButton
@@ -501,7 +501,7 @@ export default defineComponent({
         icon-left="delete_sweep"
         @click="resetTimeline()"
       />
-    </portal>
+    </Teleport>
 
     <portal to="more-menu">
       <VueSwitch

From efeb23b3d1b2e4dd132a25cbbe4e47a99ea268b6 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Thu, 19 Oct 2023 22:26:24 +0900
Subject: [PATCH 24/29] fix: Fix props of VueSwitch in timeline

---
 packages/app-frontend/src/features/timeline/Timeline.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app-frontend/src/features/timeline/Timeline.vue b/packages/app-frontend/src/features/timeline/Timeline.vue
index 739f90937..79c8af2bc 100644
--- a/packages/app-frontend/src/features/timeline/Timeline.vue
+++ b/packages/app-frontend/src/features/timeline/Timeline.vue
@@ -468,9 +468,9 @@ export default defineComponent({
             <VueSwitch
               v-for="layer of allLayers"
               :key="layer.id"
-              :value="!isLayerHidden(layer)"
+              :model-value="!isLayerHidden(layer)"
               class="extend-left px-2 py-1 hover:bg-green-100 dark:hover:bg-green-900"
-              @update="value => setLayerHidden(layer, !value)"
+              @update:modelValue="value => setLayerHidden(layer, !value)"
             >
               <div class="flex items-center space-x-2 max-w-xs">
                 <div

From 7c0e35c7e681729aa25d1c31d5ed3355684d23a5 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Fri, 20 Oct 2023 01:06:53 +0900
Subject: [PATCH 25/29] fix: Fix payload sent to custom event

---
 packages/app-frontend/src/features/inspector/DataField.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/app-frontend/src/features/inspector/DataField.vue b/packages/app-frontend/src/features/inspector/DataField.vue
index ffc0d97b6..79f4a1b5c 100644
--- a/packages/app-frontend/src/features/inspector/DataField.vue
+++ b/packages/app-frontend/src/features/inspector/DataField.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, toRaw } from 'vue'
 import {
   BridgeEvents,
   isPlainObject,
@@ -297,14 +297,14 @@ export default defineComponent({
     logToConsole (level = 'log') {
       getBridge().send(BridgeEvents.TO_BACK_LOG, {
         level,
-        value: this.field.value,
+        value: toRaw(this.field.value),
         revive: true,
       })
     },
 
     executeCustomAction (index: number) {
       getBridge().send(BridgeEvents.TO_BACK_CUSTOM_STATE_ACTION, {
-        value: this.field.value,
+        value: toRaw(this.field.value),
         actionIndex: index,
       })
     },

From f416d77fd644fe81868bbab61e12b1eef07edc6c Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Sun, 4 Feb 2024 11:52:58 +0100
Subject: [PATCH 26/29] refactor: use vue-safe-teleport

---
 packages/app-frontend/package.json             |  4 ++--
 packages/app-frontend/src/features/App.vue     |  2 +-
 .../components/ComponentsInspector.vue         | 12 ++++++------
 .../src/features/header/AppHeader.vue          |  4 ++--
 .../inspector/custom/CustomInspector.vue       |  4 ++--
 .../src/features/plugin/Plugins.vue            |  4 ++--
 .../src/features/settings/GlobalSettings.vue   |  4 ++--
 .../src/features/timeline/Timeline.vue         |  8 ++++----
 packages/app-frontend/src/plugins/index.ts     |  4 ++--
 yarn.lock                                      | 18 +++++++++---------
 10 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/packages/app-frontend/package.json b/packages/app-frontend/package.json
index 08b31b67a..fa7445054 100644
--- a/packages/app-frontend/package.json
+++ b/packages/app-frontend/package.json
@@ -10,12 +10,11 @@
     "@vue/ui": "^0.12.5",
     "circular-json-es6": "^2.0.2",
     "d3": "^5.16.0",
-    "floating-vue": "^2.0.0-beta.24",
+    "floating-vue": "^5.2.2",
     "lodash": "^4.17.15",
     "lru-cache": "^5.1.1",
     "monaco-editor": "^0.24.0",
     "pixi.js-legacy": "^6.2.0",
-    "portal-vue": "^3.0.0-beta.0",
     "scroll-into-view-if-needed": "^2.2.28",
     "semver": "^7.3.5",
     "stylus": "^0.54.7",
@@ -24,6 +23,7 @@
     "vue": "^3.3.4",
     "vue-resize": "^2.0.0-alpha.1",
     "vue-router": "^4.2.5",
+    "vue-safe-teleport": "^0.1.2",
     "vue-virtual-scroller": "^2.0.0-alpha.1"
   },
   "devDependencies": {
diff --git a/packages/app-frontend/src/features/App.vue b/packages/app-frontend/src/features/App.vue
index d386c29bc..cc42dd156 100644
--- a/packages/app-frontend/src/features/App.vue
+++ b/packages/app-frontend/src/features/App.vue
@@ -122,7 +122,7 @@ export default defineComponent({
       </SplitPane>
     </template>
 
-    <div id="root" />
+    <TeleportTarget id="root" />
 
     <ErrorOverlay />
   </div>
diff --git a/packages/app-frontend/src/features/components/ComponentsInspector.vue b/packages/app-frontend/src/features/components/ComponentsInspector.vue
index 12ee9e184..00fd3943b 100644
--- a/packages/app-frontend/src/features/components/ComponentsInspector.vue
+++ b/packages/app-frontend/src/features/components/ComponentsInspector.vue
@@ -135,7 +135,7 @@ export default defineComponent({
       </template>
     </SplitPane>
 
-    <portal to="more-menu">
+    <SafeTeleport to="#more-menu">
       <div class="space-y-1 px-3 py-2 text-sm">
         <div>Component names:</div>
 
@@ -184,9 +184,9 @@ export default defineComponent({
       </div>
 
       <div class="border-t border-gray-200 dark:border-gray-800 my-1" />
-    </portal>
+    </SafeTeleport>
 
-    <Teleport to="#header-end">
+    <SafeTeleport to="#header-end">
       <VueButton
         v-tooltip="{
           content: $t('ComponentTree.select.tooltip'),
@@ -209,9 +209,9 @@ export default defineComponent({
         icon-left="refresh"
         @click="refresh()"
       />
-    </Teleport>
+    </SafeTeleport>
 
-    <Teleport to="#root">
+    <SafeTeleport to="#root">
       <div
         v-if="pickingComponent"
         class="absolute inset-0 bg-white bg-opacity-75 dark:bg-black dark:bg-opacity-75 z-100 flex items-center justify-center"
@@ -233,7 +233,7 @@ export default defineComponent({
           </div>
         </div>
       </div>
-    </Teleport>
+    </SafeTeleport>
   </div>
 </template>
 
diff --git a/packages/app-frontend/src/features/header/AppHeader.vue b/packages/app-frontend/src/features/header/AppHeader.vue
index 5bfed98ae..3a00a882c 100644
--- a/packages/app-frontend/src/features/header/AppHeader.vue
+++ b/packages/app-frontend/src/features/header/AppHeader.vue
@@ -156,7 +156,7 @@ export default defineComponent({
     <div class="flex-1" />
 
     <div class="flex items-center">
-      <div
+      <TeleportTarget
         id="header-end"
         class="flex items-center"
       />
@@ -170,7 +170,7 @@ export default defineComponent({
           />
         </template>
 
-        <portal-target name="more-menu" />
+        <TeleportTarget id="more-menu" />
 
         <VueDropdownButton
           :to="{
diff --git a/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue b/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
index 6800fa505..6414e664f 100644
--- a/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
+++ b/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
@@ -121,7 +121,7 @@ export default defineComponent({
       </template>
     </SplitPane>
 
-    <Teleport to="#header-end">
+    <SafeTeleport to="#header-end">
       <template v-if="inspector?.actions">
         <VueButton
           v-for="(action, index) of inspector.actions"
@@ -138,7 +138,7 @@ export default defineComponent({
         icon-left="refresh"
         @click="refreshInspector()"
       />
-    </Teleport>
+    </SafeTeleport>
   </div>
   <EmptyPane
     v-else
diff --git a/packages/app-frontend/src/features/plugin/Plugins.vue b/packages/app-frontend/src/features/plugin/Plugins.vue
index e987a19fc..aaf037147 100644
--- a/packages/app-frontend/src/features/plugin/Plugins.vue
+++ b/packages/app-frontend/src/features/plugin/Plugins.vue
@@ -73,7 +73,7 @@ export default defineComponent({
       </template>
     </SplitPane>
 
-    <Teleport to="#header-end">
+    <SafeTeleport to="#header-end">
       <VueButton
         :to="{
           name: 'global-settings'
@@ -83,7 +83,7 @@ export default defineComponent({
       >
         Global settings
       </VueButton>
-    </Teleport>
+    </SafeTeleport>
   </div>
 </template>
 
diff --git a/packages/app-frontend/src/features/settings/GlobalSettings.vue b/packages/app-frontend/src/features/settings/GlobalSettings.vue
index 97a47f1cf..b1af8447f 100644
--- a/packages/app-frontend/src/features/settings/GlobalSettings.vue
+++ b/packages/app-frontend/src/features/settings/GlobalSettings.vue
@@ -81,7 +81,7 @@ export default defineComponent({})
       </VueFormField>
     </div>
 
-    <Teleport to="#header-end">
+    <SafeTeleport to="#header-end">
       <VueButton
         :to="{
           name: 'plugins'
@@ -91,6 +91,6 @@ export default defineComponent({})
       >
         Plugin settings
       </VueButton>
-    </Teleport>
+    </SafeTeleport>
   </div>
 </template>
diff --git a/packages/app-frontend/src/features/timeline/Timeline.vue b/packages/app-frontend/src/features/timeline/Timeline.vue
index 79c8af2bc..dd4fb6f64 100644
--- a/packages/app-frontend/src/features/timeline/Timeline.vue
+++ b/packages/app-frontend/src/features/timeline/Timeline.vue
@@ -450,7 +450,7 @@ export default defineComponent({
       </template>
     </SplitPane>
 
-    <Teleport to="#header-end">
+    <SafeTeleport to="#header-end">
       <VueDropdown>
         <template #trigger>
           <VueButton
@@ -501,9 +501,9 @@ export default defineComponent({
         icon-left="delete_sweep"
         @click="resetTimeline()"
       />
-    </Teleport>
+    </SafeTeleport>
 
-    <portal to="more-menu">
+    <SafeTeleport to="#more-menu">
       <VueSwitch
         v-model="$shared.timelineTimeGrid"
         class="w-full px-3 py-1 extend-left"
@@ -520,7 +520,7 @@ export default defineComponent({
       </VueSwitch>
 
       <div class="border-t border-gray-200 dark:border-gray-800 my-1" />
-    </portal>
+    </SafeTeleport>
 
     <AskScreenshotPermission
       v-if="askScreenshotPermission"
diff --git a/packages/app-frontend/src/plugins/index.ts b/packages/app-frontend/src/plugins/index.ts
index 6ca10aab0..e4ca3cbdf 100644
--- a/packages/app-frontend/src/plugins/index.ts
+++ b/packages/app-frontend/src/plugins/index.ts
@@ -5,14 +5,14 @@ import { App } from 'vue'
 import VueUi, { generateHtmlIcon } from '../features/components/ui'
 import VueVirtualScroller from 'vue-virtual-scroller'
 import { keys } from '@vue-devtools/shared-utils'
-import PortalVue from 'portal-vue'
+import VueSafeTeleport from 'vue-safe-teleport'
 import VI18n from './i18n'
 import Responsive from './responsive'
 import GlobalRefs from './global-refs'
 import VueResize from 'vue-resize'
 
 export function setupPlugins (app: App) {
-  app.use(PortalVue)
+  app.use(VueSafeTeleport)
   app.use(VueUi)
   app.use(VueResize)
   app.use(VueVirtualScroller)
diff --git a/yarn.lock b/yarn.lock
index d82765eb4..e2aa70fec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6177,10 +6177,10 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
-floating-vue@^2.0.0-beta.24:
-  version "2.0.0-beta.24"
-  resolved "https://registry.yarnpkg.com/floating-vue/-/floating-vue-2.0.0-beta.24.tgz#ad4775c55581f8a3c219cf614d8e24a6ae4846e0"
-  integrity sha512-URSzP6YXaF4u1oZ9XGL8Sn8puuM7ivp5jkOUrpy5Q1mfo9BfGppJOn+ierTmsSUfJEeHBae8KT7r5DeI3vQIEw==
+floating-vue@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/floating-vue/-/floating-vue-5.2.2.tgz#e263932042753f59f3e36e7c1188f3f3e272a539"
+  integrity sha512-afW+h2CFafo+7Y9Lvw/xsqjaQlKLdJV7h1fCHfcYQ1C4SVMlu7OAekqWgu5d4SgvkBVU0pVpLlVsrSTBURFRkg==
   dependencies:
     "@floating-ui/dom" "~1.1.1"
     vue-resize "^2.0.0-alpha.1"
@@ -9121,11 +9121,6 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-portal-vue@^3.0.0-beta.0:
-  version "3.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-3.0.0-beta.0.tgz#ada907776fdabad3f9ec609f7f00e5648480b533"
-  integrity sha512-ktV+Q0fwlsjeF+2xGebMxrN6xH8yMdmbLzYbd2OfcgU4OmzSmkj6iP3kBQRGa+7A5WZlqCHWaFfecNs9Igsv9w==
-
 portfinder@^1.0.28:
   version "1.0.32"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.32.tgz#2fe1b9e58389712429dc2bea5beb2146146c7f81"
@@ -11409,6 +11404,11 @@ vue-router@^4.2.5:
   dependencies:
     "@vue/devtools-api" "^6.5.0"
 
+vue-safe-teleport@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/vue-safe-teleport/-/vue-safe-teleport-0.1.2.tgz#0d6f464acef0687a098a1ffcb2ef497edd39188e"
+  integrity sha512-L6S/ALd5I7hXWi2T5HETHKCW9bku0hNx4ocIWRsk46h1IfNvjXxtLE9ECV4SDJFkcTAn3pMf9yxftBYLoZ3USQ==
+
 vue-style-loader@^4.1.0:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"

From 86911b59180bef793ac498e0e722130ceeba0728 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Sun, 4 Feb 2024 12:13:47 +0100
Subject: [PATCH 27/29] chore: update lockfile

---
 yarn.lock | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index e2aa70fec..737298272 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1002,7 +1002,14 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/runtime@^7.13.10", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.13.10":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
+  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@babel/runtime@^7.8.4":
   version "7.19.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
   integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
@@ -2364,9 +2371,9 @@
     url "^0.11.0"
 
 "@popperjs/core@^2.11.0":
-  version "2.11.6"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
-  integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
 "@sideway/address@^4.1.3":
   version "4.1.4"
@@ -9662,6 +9669,11 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 regenerator-transform@^0.15.0:
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"

From 40ad025ec0b3843f04b77829822296e258c4f6f4 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Sun, 4 Feb 2024 12:20:18 +0100
Subject: [PATCH 28/29] refactor: migrate to :deep()

---
 .../src/features/apps/AppSelectPaneItem.vue      |  2 +-
 .../features/components/ComponentsInspector.vue  | 14 ++++++--------
 .../src/features/header/AppHeaderSelect.vue      |  6 +++---
 .../src/features/inspector/DataField.vue         | 16 ++++++++--------
 .../src/features/inspector/StateFields.vue       |  2 +-
 .../inspector/custom/CustomInspector.vue         | 12 +++++-------
 .../src/features/plugin/PluginListItem.vue       |  2 +-
 .../app-frontend/src/features/plugin/Plugins.vue |  2 +-
 .../src/features/timeline/Timeline.vue           |  2 +-
 9 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/packages/app-frontend/src/features/apps/AppSelectPaneItem.vue b/packages/app-frontend/src/features/apps/AppSelectPaneItem.vue
index 7346140d7..170f8d88c 100644
--- a/packages/app-frontend/src/features/apps/AppSelectPaneItem.vue
+++ b/packages/app-frontend/src/features/apps/AppSelectPaneItem.vue
@@ -90,7 +90,7 @@ export default defineComponent({
 .app-button {
   @apply rounded-none text-left h-auto py-1.5;
 
-  > >>> .content {
+  > :deep(.content) {
     @apply min-w-full justify-start;
 
     > .default-slot {
diff --git a/packages/app-frontend/src/features/components/ComponentsInspector.vue b/packages/app-frontend/src/features/components/ComponentsInspector.vue
index 00fd3943b..f9b2d5178 100644
--- a/packages/app-frontend/src/features/components/ComponentsInspector.vue
+++ b/packages/app-frontend/src/features/components/ComponentsInspector.vue
@@ -239,19 +239,17 @@ export default defineComponent({
 
 <style lang="postcss" scoped>
 .search {
-  >>> {
-    .input {
-      height: 32px !important;
-    }
+  :deep(.input) {
+    height: 32px !important;
+  }
 
-    .content {
-      border: none !important;
-    }
+  :deep(.content) {
+    border: none !important;
   }
 }
 
 .animate-icon {
-  >>> .vue-ui-icon {
+  :deep(.vue-ui-icon) {
     animation: refresh 1s ease-out;
   }
 }
diff --git a/packages/app-frontend/src/features/header/AppHeaderSelect.vue b/packages/app-frontend/src/features/header/AppHeaderSelect.vue
index cda81e494..bd8f3b894 100644
--- a/packages/app-frontend/src/features/header/AppHeaderSelect.vue
+++ b/packages/app-frontend/src/features/header/AppHeaderSelect.vue
@@ -240,18 +240,18 @@ export default defineComponent({
     @apply bg-gray-700 text-gray-100 !important;
   }
 
-  >>> svg {
+  :deep(svg) {
     fill: currentColor !important;
   }
 }
 
-.vue-ui-dropdown-button /deep/ {
+.vue-ui-dropdown-button {
   min-height: 32px;
   height: auto;
   padding-top: 6px;
   padding-bottom: 6px;
 
-  .default-slot {
+  :deep(.default-slot) {
     flex: 1;
   }
 }
diff --git a/packages/app-frontend/src/features/inspector/DataField.vue b/packages/app-frontend/src/features/inspector/DataField.vue
index 79f4a1b5c..7f61f0c1e 100644
--- a/packages/app-frontend/src/features/inspector/DataField.vue
+++ b/packages/app-frontend/src/features/inspector/DataField.vue
@@ -627,11 +627,11 @@ export default defineComponent({
       user-select none
       width 20px
       height @width
-    .icon-button >>> .vue-ui-icon,
+    .icon-button :deep(.vue-ui-icon),
     .small-icon
       width 16px
       height @width
-    .warning >>> svg
+    .warning :deep(svg)
       fill $orange
   &:hover,
   &.force-toolbar
@@ -679,7 +679,7 @@ export default defineComponent({
   &.string, &.native
     color $red
   &.string
-    >>> span
+    :deep(span)
       color $black
       .vue-ui-dark-mode &
         color $red
@@ -687,7 +687,7 @@ export default defineComponent({
     color #999
   &.literal
     color $vividBlue
-  &.raw-boolean >>> .value-formatted-ouput
+  &.raw-boolean :deep(.value-formatted-ouput)
     width 36px
     display inline-block
   &.native.Error
@@ -710,7 +710,7 @@ export default defineComponent({
         content '>'
     &.type-function
       font-style italic
-      >>> span
+      :deep(span)
         color $vividBlue
         font-family dejavu sans mono, monospace
         .platform-mac &
@@ -721,11 +721,11 @@ export default defineComponent({
           color $purple
     &.type-component-definition
       color $green
-      >>> span
+      :deep(span)
         color $darkerGrey
     &.type-reference
         opacity 0.5
-      >>> .attr-title
+      :deep(.attr-title)
         color #800080
         .vue-ui-dark-mode &
           color #e36eec
@@ -782,7 +782,7 @@ export default defineComponent({
 .more
   width 20px
   height @width
-  >>> .vue-ui-icon
+  :deep(.vue-ui-icon)
     width 16px
     height @width
 </style>
diff --git a/packages/app-frontend/src/features/inspector/StateFields.vue b/packages/app-frontend/src/features/inspector/StateFields.vue
index fcf4c964a..79406a81d 100644
--- a/packages/app-frontend/src/features/inspector/StateFields.vue
+++ b/packages/app-frontend/src/features/inspector/StateFields.vue
@@ -146,7 +146,7 @@ export default {
 .more
   width 20px
   height @width
-  >>> .vue-ui-icon
+  :deep(.vue-ui-icon)
     width 16px
     height @width
 </style>
diff --git a/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue b/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
index 6414e664f..a80bd218a 100644
--- a/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
+++ b/packages/app-frontend/src/features/inspector/custom/CustomInspector.vue
@@ -157,14 +157,12 @@ export default defineComponent({
 
 <style lang="postcss" scoped>
 .search {
-  >>> {
-    .input {
-      height: 39px !important;
-    }
+  :deep(.input) {
+    height: 39px !important;
+  }
 
-    .content {
-      border: none !important;
-    }
+  :deep(.content) {
+    border: none !important;
   }
 }
 
diff --git a/packages/app-frontend/src/features/plugin/PluginListItem.vue b/packages/app-frontend/src/features/plugin/PluginListItem.vue
index 5093b3d66..324830ce3 100644
--- a/packages/app-frontend/src/features/plugin/PluginListItem.vue
+++ b/packages/app-frontend/src/features/plugin/PluginListItem.vue
@@ -49,7 +49,7 @@ export default defineComponent({
 </template>
 
 <style lang="postcss" scoped>
-.vue-ui-icon /deep/ svg {
+.vue-ui-icon :deep(svg) {
   fill: currentColor;
 }
 </style>
diff --git a/packages/app-frontend/src/features/plugin/Plugins.vue b/packages/app-frontend/src/features/plugin/Plugins.vue
index aaf037147..fd9ac0be1 100644
--- a/packages/app-frontend/src/features/plugin/Plugins.vue
+++ b/packages/app-frontend/src/features/plugin/Plugins.vue
@@ -88,7 +88,7 @@ export default defineComponent({
 </template>
 
 <style scoped>
-.vue-ui-icon /deep/ svg {
+.vue-ui-icon :deep(svg) {
   fill: currentColor;
 }
 </style>
diff --git a/packages/app-frontend/src/features/timeline/Timeline.vue b/packages/app-frontend/src/features/timeline/Timeline.vue
index dd4fb6f64..16dd13d5d 100644
--- a/packages/app-frontend/src/features/timeline/Timeline.vue
+++ b/packages/app-frontend/src/features/timeline/Timeline.vue
@@ -537,7 +537,7 @@ export default defineComponent({
 
 .zoom-btn {
   @apply rounded-none;
-  /deep/ .vue-ui-icon {
+  :deep(.vue-ui-icon) {
     @apply w-3.5 h-3.5 mr-0 left-0 right-0 !important;
   }
 }

From 14f369b1c8c34f9313ad21084dbac3abee144002 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Sun, 4 Feb 2024 12:20:49 +0100
Subject: [PATCH 29/29] fix: remove defineProps import

---
 packages/shell-dev-vue3/src/SetupTSScriptProps.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/shell-dev-vue3/src/SetupTSScriptProps.vue b/packages/shell-dev-vue3/src/SetupTSScriptProps.vue
index bcb1a3724..b190264be 100644
--- a/packages/shell-dev-vue3/src/SetupTSScriptProps.vue
+++ b/packages/shell-dev-vue3/src/SetupTSScriptProps.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { defineProps } from 'vue'
-
 const props = defineProps<{
   myProp: string
 }>()