diff --git a/hwe/ts/PageNPCControl.vue b/hwe/ts/PageNPCControl.vue
index 53c6ff0d..a432c9ee 100644
--- a/hwe/ts/PageNPCControl.vue
+++ b/hwe/ts/PageNPCControl.vue
@@ -227,9 +227,8 @@
                     <i class="bi bi-list" />
                     &nbsp;&nbsp;{{ element.id }}
                     <button
-                      v-b-tooltip.hover
+                      v-b-tooltip.hover="actionHelpText[element.id]"
                       class="btn btn-sm float-right btn-secondary py-0 px-1"
-                      :title="actionHelpText[element.id]"
                     >
                       <i class="bi bi-question-lg" />
                     </button>
@@ -250,9 +249,8 @@
                     <i class="bi bi-list" />
                     &nbsp;&nbsp;{{ element.id }}
                     <button
-                      v-b-tooltip.hover
+                      v-b-tooltip.hover="actionHelpText[element.id]"
                       class="btn btn-sm float-right btn-secondary py-0 px-1"
-                      :title="actionHelpText[element.id]"
                     >
                       <i class="bi bi-question-lg" />
                     </button>
@@ -305,9 +303,8 @@
                     <i class="bi bi-list" />
                     &nbsp;&nbsp;{{ element.id }}
                     <button
-                      v-b-tooltip.hover
+                      v-b-tooltip.hover="actionHelpText[element.id]"
                       class="btn btn-sm float-right btn-secondary py-0 px-1"
-                      :title="actionHelpText[element.id]"
                     >
                       <i class="bi bi-question-lg" />
                     </button>
@@ -328,9 +325,8 @@
                     <i class="bi bi-list" />
                     &nbsp;&nbsp;{{ element.id }}
                     <button
-                      v-b-tooltip.hover
+                      v-b-tooltip.hover="actionHelpText[element.id]"
                       class="btn btn-sm float-right btn-secondary py-0 px-1"
-                      :title="actionHelpText[element.id]"
                     >
                       <i class="bi bi-question-lg" />
                     </button>
diff --git a/hwe/ts/PartialReservedCommand.vue b/hwe/ts/PartialReservedCommand.vue
index a8d72b02..f8aa30b4 100644
--- a/hwe/ts/PartialReservedCommand.vue
+++ b/hwe/ts/PartialReservedCommand.vue
@@ -218,7 +218,7 @@
           :key="turnIdx"
           class="turn_pad center"
         >
-          <span v-b-tooltip.hover class="turn_text" :style="turnObj.style" :title="turnObj.tooltip">
+          <span v-b-tooltip.hover="turnObj.tooltip" class="turn_text" :style="turnObj.style">
             <!-- eslint-disable-next-line vue/no-v-html -->
             <span v-html="turnObj.brief" />
           </span>
diff --git a/hwe/ts/components/AuctionUniqueItem.vue b/hwe/ts/components/AuctionUniqueItem.vue
index 9a4fb9b6..9db862aa 100644
--- a/hwe/ts/components/AuctionUniqueItem.vue
+++ b/hwe/ts/components/AuctionUniqueItem.vue
@@ -7,7 +7,7 @@
       <div class="bg2">경매 {{ currentAuction.auction.id }}번 상세</div>
       <div class="row gx-0 text-center">
         <div class="col-2 col-md-1 bg1">경매명</div>
-        <div v-b-tooltip.hover class="col-4 col-md-2" :title="getItemTooltipText(currentAuction.auction.target)">
+        <div v-b-tooltip.hover="getItemTooltipText(currentAuction.auction.target)" class="col-4 col-md-2">
           {{ currentAuction.auction.title }}
         </div>
 
@@ -83,7 +83,7 @@
       @click="currentAuctionID = auctionID"
     >
       <div class="col-1">{{ auction.id }}</div>
-      <div v-b-tooltip.hover class="col-4" :title="getItemTooltipText(auction.target)">{{ auction.title }}</div>
+      <div v-b-tooltip.hover="getItemTooltipText(auction.target)" class="col-4">{{ auction.title }}</div>
       <div :class="['col-1', auction.isCallerHost ? 'isMe' : '']">{{ auction.hostName }}</div>
       <div class="col-2 f_tnum">{{ cutDateTime(auction.closeDate) }}</div>
       <div class="col-1">{{ auction.remainCloseDateExtensionCnt > 0 ? "남음" : "소진" }}</div>
diff --git a/hwe/ts/components/AutorunInfo.vue b/hwe/ts/components/AutorunInfo.vue
index 6e3803cb..25add8bd 100644
--- a/hwe/ts/components/AutorunInfo.vue
+++ b/hwe/ts/components/AutorunInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <span v-if="autorunMode.limit_minutes > 0" v-b-tooltip.hover :title="tooltipText" style="text-decoration: underline;">자율행동</span>
+  <span v-if="autorunMode.limit_minutes > 0" v-b-tooltip.hover="tooltipText" style="text-decoration: underline;">자율행동</span>
 </template>
 <script setup lang="ts">
 import type { AutorunUserMode } from '@/defs/API/Global';
diff --git a/hwe/ts/components/ChiefReservedCommand.vue b/hwe/ts/components/ChiefReservedCommand.vue
index 1311f932..e0caf64c 100644
--- a/hwe/ts/components/ChiefReservedCommand.vue
+++ b/hwe/ts/components/ChiefReservedCommand.vue
@@ -188,7 +188,7 @@
             </DragSelect>
             <div :style="rowGridStyle">
               <div v-for="(turnObj, turnIdx) in reservedCommandList.map(postFilterTurnBrief)" :key="turnIdx" class="turn_pad center">
-                <span v-b-tooltip.hover class="turn_text" :style="turnObj.style" :title="turnObj.tooltip">
+                <span v-b-tooltip.hover="turnObj.tooltip" class="turn_text" :style="turnObj.style">
                   <!-- eslint-disable-next-line vue/no-v-html -->
                   <span v-html="turnObj.brief" />
                 </span>
diff --git a/hwe/ts/components/GeneralBasicCard.vue b/hwe/ts/components/GeneralBasicCard.vue
index d38a3778..0314516d 100644
--- a/hwe/ts/components/GeneralBasicCard.vue
+++ b/hwe/ts/components/GeneralBasicCard.vue
@@ -61,15 +61,15 @@
 
     <div class="bg1">명마</div>
     <div v-if="!horse.info">{{ horse.name }}</div>
-    <div v-else v-b-tooltip.hover :title="horse.info">{{ horse.name }}</div>
+    <div v-else v-b-tooltip.hover="horse.info">{{ horse.name }}</div>
 
     <div class="bg1">무기</div>
     <div v-if="!weapon.info">{{ weapon.name }}</div>
-    <div v-else v-b-tooltip.hover :title="weapon.info">{{ weapon.name }}</div>
+    <div v-else v-b-tooltip.hover="weapon.info">{{ weapon.name }}</div>
 
     <div class="bg1">서적</div>
     <div v-if="!book.info">{{ book.name }}</div>
-    <div v-else v-b-tooltip.hover :title="book.info">{{ book.name }}</div>
+    <div v-else v-b-tooltip.hover="book.info">{{ book.name }}</div>
 
     <div class="bg1">자금</div>
     <div>{{ general.gold.toLocaleString() }}</div>
@@ -77,7 +77,7 @@
     <div>{{ general.rice.toLocaleString() }}</div>
     <div class="bg1">도구</div>
     <div v-if="!item.info">{{ item.name }}</div>
-    <div v-else v-b-tooltip.hover :title="item.info">{{ item.name }}</div>
+    <div v-else v-b-tooltip.hover="item.info">{{ item.name }}</div>
 
     <!-- TODO: show_img_level을 고려 -->
     <div
@@ -89,12 +89,12 @@
 
     <div class="bg1">병종</div>
     <div v-if="!crewtype.info">{{ crewtype.name }}</div>
-    <div v-else v-b-tooltip.hover :title="crewtype.info">{{ crewtype.name }}</div>
+    <div v-else v-b-tooltip.hover="crewtype.info">{{ crewtype.name }}</div>
     <div class="bg1">병사</div>
     <div>{{ general.crew.toLocaleString() }}</div>
     <div class="bg1">성격</div>
     <div v-if="!personal.info">{{ personal.name }}</div>
-    <div v-else v-b-tooltip.hover :title="personal.info">{{ personal.name }}</div>
+    <div v-else v-b-tooltip.hover="personal.info">{{ personal.name }}</div>
 
     <!-- TODO: bonusTrain 같은 개념이 필요 -->
     <div class="bg1">훈련</div>
@@ -104,10 +104,10 @@
     <div class="bg1">특기</div>
     <div>
       <span v-if="!specialDomestic.info"> {{ specialDomestic.name }}</span
-      ><span v-else v-b-tooltip.hover :title="specialDomestic.info"> {{ specialDomestic.name }}</span>
+      ><span v-else v-b-tooltip.hover="specialDomestic.info"> {{ specialDomestic.name }}</span>
       /
       <span v-if="!specialWar.info"> {{ specialWar.name }}</span
-      ><span v-else v-b-tooltip.hover :title="specialWar.info"> {{ specialWar.name }}</span>
+      ><span v-else v-b-tooltip.hover="specialWar.info"> {{ specialWar.name }}</span>
     </div>
 
     <div class="bg1">Lv</div>
@@ -177,7 +177,6 @@ import { isValidObjKey } from "@/utilGame/isValidObjKey";
 import { calcInjury } from "@/utilGame/calcInjury";
 import { addMinutes } from "date-fns/esm";
 import type { GameIActionInfo } from "@/defs/GameObj";
-
 const imagePath = window.pathConfig.gameImage;
 const gameConstStore = unwrap(inject<Ref<GameConstStore>>("gameConstStore"));
 const props = defineProps<{
@@ -185,7 +184,7 @@ const props = defineProps<{
   troopInfo?: {
     leader: {
       city: number;
-      reservedCommand?: GeneralListItemP1['reservedCommand'];
+      reservedCommand?: GeneralListItemP1["reservedCommand"];
     };
     name: string;
   };
diff --git a/hwe/ts/components/NationBasicCard.vue b/hwe/ts/components/NationBasicCard.vue
index 50698522..094aa585 100644
--- a/hwe/ts/components/NationBasicCard.vue
+++ b/hwe/ts/components/NationBasicCard.vue
@@ -67,9 +67,8 @@
     <div v-if="!nation.id" class="strategicCmd-body tb-body">해당 없음</div>
     <div
       v-else-if="impossibleStrategicCommandText"
-      v-b-tooltip.hover
+      v-b-tooltip.hover="impossibleStrategicCommandText"
       class="strategicCmd-body tb-body"
-      :title="impossibleStrategicCommandText"
       style="text-decoration: underline dashed red"
     >
       <span v-if="nation.strategicCmdLimit" style="color: red">{{ nation.strategicCmdLimit.toLocaleString() }}턴</span>
diff --git a/hwe/ts/components/SammoBar.vue b/hwe/ts/components/SammoBar.vue
index 33ee494d..ec49f75a 100644
--- a/hwe/ts/components/SammoBar.vue
+++ b/hwe/ts/components/SammoBar.vue
@@ -1,7 +1,6 @@
 <template>
   <div
-    v-b-tooltip.hover.top
-    :title="tooltipText"
+    v-b-tooltip.hover.top="tooltipText"
     class="sammo-bar"
     :style="{
       height: `${props.height + 2}px`,
diff --git a/hwe/ts/components/SimpleNationList.vue b/hwe/ts/components/SimpleNationList.vue
index e5599653..cd924e50 100644
--- a/hwe/ts/components/SimpleNationList.vue
+++ b/hwe/ts/components/SimpleNationList.vue
@@ -21,7 +21,7 @@
         </td>
         <td style="text-align: right">{{ nation.power.toLocaleString() }}</td>
         <td style="text-align: right">{{ nation.gennum.toLocaleString() }}</td>
-        <td v-b-tooltip.hover style="text-align: right" :title="(nation.cities ?? []).join(', ')">
+        <td v-b-tooltip.hover="(nation.cities ?? []).join(', ')" style="text-align: right">
           {{ (nation.cities ?? []).length }}
         </td>
       </tr>
diff --git a/hwe/ts/components/TipTap.vue b/hwe/ts/components/TipTap.vue
index c81708ea..8164b215 100644
--- a/hwe/ts/components/TipTap.vue
+++ b/hwe/ts/components/TipTap.vue
@@ -1,34 +1,31 @@
 <template>
   <BButtonToolbar v-if="editable && editor" key-nav class="bg-dark">
     <BButtonGroup class="mx-1">
-      <BButton v-b-tooltip.hover title="되돌리기" @click="editor?.commands.undo()">
+      <BButton v-b-tooltip.hover="'되돌리기'" @click="editor?.commands.undo()">
         <i class="bi bi-arrow-90deg-left" />
       </BButton>
-      <BButton v-b-tooltip.hover title="재실행" @click="editor?.commands.redo()">
+      <BButton v-b-tooltip.hover="'재실행'" @click="editor?.commands.redo()">
         <i class="bi bi-arrow-90deg-right" />
       </BButton>
     </BButtonGroup>
     <BButtonGroup class="mx-1">
       <BButton
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'진하게'"
         :class="{ 'is-active': editor.isActive('bold') }"
-        title="진하게"
         @click="editor?.chain().focus().toggleBold().run()"
       >
         <i class="bi bi-type-bold" />
       </BButton>
       <BButton
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'기울이기'"
         :class="{ 'is-active': editor.isActive('italic') }"
-        title="기울이기"
         @click="editor?.chain().focus().toggleItalic().run()"
       >
         <i class="bi bi-type-italic" />
       </BButton>
       <BButton
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'밑줄'"
         :class="{ 'is-active': editor.isActive('underline') }"
-        title="밑줄"
         @click="editor?.chain().focus().toggleUnderline().run()"
       >
         <i class="bi bi-type-underline" />
@@ -66,9 +63,8 @@
 
     <BButtonGroup class="mx-1">
       <BButton
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'가로선'"
         :class="{ 'is-active': editor.isActive('strike') }"
-        title="가로선"
         @click="editor?.chain().focus().toggleStrike().run()"
       >
         <i class="bi bi-type-strikethrough" />
@@ -78,26 +74,24 @@
 
     <BButtonGroup class="mx-1">
       <BButton
-        v-b-tooltip.hover
-        title="색상 취소"
+        v-b-tooltip.hover="'색상 취소'"
+
         @click="editor?.chain().focus().unsetColor().unsetBackgroundColor().run()"
       >
         <i class="bi bi-droplet" />
       </BButton>
       <input
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'글자색'"
         type="color"
         class="form-control form-control-color"
         :value="colorConvert(editor.getAttributes('textStyle').color, '#ffffff')"
-        title="글자색"
         @input="editor?.chain().focus().setColor(($event.target as HTMLInputElement).value).run()"
       />
       <input
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'배경색'"
         type="color"
         class="form-control form-control-color"
         :value="colorConvert(editor.getAttributes('textStyle').backgroundColor, '#000000')"
-        title="배경색"
         @input="
           editor?.chain().focus().setBackgroundColor(($event.target as HTMLInputElement).value).run()
         "
@@ -105,7 +99,7 @@
     </BButtonGroup>
 
     <BButtonGroup class="mx-1">
-      <BButton v-b-tooltip.hover title="이미지 추가" @click="showImageModal = true">
+      <BButton v-b-tooltip.hover="'이미지 추가'" @click="showImageModal = true">
         <i class="bi bi-image" />
       </BButton>
       <!-- 이미지추가 -->
@@ -113,7 +107,7 @@
       <!-- 영상링크 -->
       <!-- 표 -->
       <!-- 구분선 삽입 -->
-      <BButton v-b-tooltip.hover title="구분선" @click="editor?.chain().focus().setHorizontalRule().run()">
+      <BButton v-b-tooltip.hover="'구분선'" @click="editor?.chain().focus().setHorizontalRule().run()">
         <i class="bi bi-hr" />
       </BButton>
     </BButtonGroup>
@@ -122,25 +116,22 @@
       <!-- 글머리 기호 -->
       <!-- 번호 매기기 -->
       <BButton
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'왼쪽 정렬'"
         :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }"
-        title="왼쪽 정렬"
         @click="editor?.chain().focus().setTextAlign('left').run()"
       >
         <i class="bi bi-text-left" />
       </BButton>
       <BButton
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'가운데 정렬'"
         :class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }"
-        title="가운데 정렬"
         @click="editor?.chain().focus().setTextAlign('center').run()"
       >
         <i class="bi bi-text-center" />
       </BButton>
       <BButton
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'오른쪽 정렬'"
         :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }"
-        title="오른쪽 정렬"
         @click="editor?.chain().focus().setTextAlign('right').run()"
       >
         <i class="bi bi-text-right" />
@@ -167,40 +158,37 @@
     <BButtonToolbar>
       <BButtonGroup class="mx-1">
         <BButton
-          v-b-tooltip.hover
+          v-b-tooltip.hover="'1/4 너비로 채우기'"
           :class="{
             'is-active': editor.isActive('custom-image', {
               size: 'small',
             }),
             f_frac: true,
           }"
-          title="1/4 너비로 채우기"
           @click="editor?.chain().focus().setImageEx({ size: 'small' }).run()"
         >
           1/4
         </BButton>
         <BButton
-          v-b-tooltip.hover
+          v-b-tooltip.hover="'1/2 너비로 채우기'"
           :class="{
             'is-active': editor.isActive('custom-image', {
               size: 'medium',
             }),
             f_frac: true,
           }"
-          title="1/2 너비로 채우기"
           @click="editor?.chain().focus().setImageEx({ size: 'medium' }).run()"
         >
           1/2
         </BButton>
         <BButton
-          v-b-tooltip.hover
+          v-b-tooltip.hover="'가득 채우기'"
           :class="{
             'is-active': editor.isActive('custom-image', {
               size: 'large',
             }),
             f_frac: true,
           }"
-          title="가득 채우기"
           @click="editor?.chain().focus().setImageEx({ size: 'large' }).run()"
         >
           1
@@ -218,61 +206,56 @@
       </BButtonGroup>
       <BButtonGroup class="mx-1">
         <BButton
-          v-b-tooltip.hover
+          v-b-tooltip.hover="'왼쪽으로 붙이기'"
           :class="{
             'is-active': editor.isActive('custom-image', {
               float: 'float-left',
             }),
           }"
-          title="왼쪽으로 붙이기"
           @click="editor?.chain().focus().setImageEx({ align: 'float-left' }).run()"
         >
           <i class="bi bi-chevron-bar-left" />
         </BButton>
         <BButton
-          v-b-tooltip.hover
+          v-b-tooltip.hover="'왼쪽으로'"
           :class="{
             'is-active': editor.isActive('custom-image', {
               float: 'left',
             }),
           }"
-          title="왼쪽으로"
           @click="editor?.chain().focus().setImageEx({ align: 'left' }).run()"
         >
           <i class="bi bi-align-start" />
         </BButton>
         <BButton
-          v-b-tooltip.hover
+          v-b-tooltip.hover="'가운데로'"
           :class="{
             'is-active': editor.isActive('custom-image', {
               float: 'center',
             }),
           }"
-          title="가운데로"
           @click="editor?.chain().focus().setImageEx({ align: 'center' }).run()"
         >
           <i class="bi bi-align-center" />
         </BButton>
         <BButton
-          v-b-tooltip.hover
+          v-b-tooltip.hover="'오른쪽으로 붙이기'"
           :class="{
             'is-active': editor.isActive('custom-image', {
               float: 'right',
             }),
           }"
-          title="오른쪽으로 붙이기"
           @click="editor?.chain().focus().setImageEx({ align: 'right' }).run()"
         >
           <i class="bi bi-align-end" />
         </BButton>
         <BButton
-          v-b-tooltip.hover
+          v-b-tooltip.hover="'오른쪽으로 붙이기'"
           :class="{
             'is-active': editor.isActive('custom-image', {
               float: 'float-right',
             }),
           }"
-          title="오른쪽으로 붙이기"
           @click="editor?.chain().focus().setImageEx({ align: 'float-right' }).run()"
         >
           <i class="bi bi-chevron-bar-right" />
diff --git a/hwe/ts/gridCellRenderer/GridTooltipCell.vue b/hwe/ts/gridCellRenderer/GridTooltipCell.vue
index b31ea920..7178186d 100644
--- a/hwe/ts/gridCellRenderer/GridTooltipCell.vue
+++ b/hwe/ts/gridCellRenderer/GridTooltipCell.vue
@@ -5,21 +5,19 @@
         <div v-if="params.data[colValue.target] == null">?</div>
         <div
           v-else-if="colValue.iActionMap"
-          v-b-tooltip.hover
+          v-b-tooltip.hover="colValue.iActionMap[params.data[colValue.target] as string ].info??''"
           class="col"
-          :title="colValue.iActionMap[params.data[colValue.target] as string ].info??''"
         >
           {{ colValue.iActionMap[params.data[colValue.target] as string ].name }}
         </div>
         <div
           v-else-if="colValue.converter"
-          v-b-tooltip.hover
+          v-b-tooltip.hover="colValue.converter(params.data)[1] ?? ''"
           class="col"
-          :title="colValue.converter(params.data)[1] ?? ''"
         >
           {{ colValue.converter(params.data)[0] }}
         </div>
-        <div v-else v-b-tooltip.hover class="col" :title="colValue.info ?? ''">
+        <div v-else v-b-tooltip.hover="colValue.info ?? ''" class="col" >
           {{params.data[colValue.target] as string}}
         </div>
       </template>
diff --git a/hwe/ts/gridCellRenderer/SimpleTooltipCell.vue b/hwe/ts/gridCellRenderer/SimpleTooltipCell.vue
index be2c1189..f4050f94 100644
--- a/hwe/ts/gridCellRenderer/SimpleTooltipCell.vue
+++ b/hwe/ts/gridCellRenderer/SimpleTooltipCell.vue
@@ -1,9 +1,9 @@
 <template>
   <span v-if="props.params.value == null">?</span>
-  <span v-else-if="params.iActionMap" v-b-tooltip.hover :title="params.iActionMap[props.params.value].info ?? ''">{{
+  <span v-else-if="params.iActionMap" v-b-tooltip.hover="params.iActionMap[props.params.value].info ?? ''">{{
     params.iActionMap[props.params.value].name
   }}</span>
-  <span v-else-if="params.info" v-b-tooltip.hover :title="params.info">{{ displayValue }}</span>
+  <span v-else-if="params.info" v-b-tooltip.hover="params.info">{{ displayValue }}</span>
   <span v-else>{{ displayValue }}</span>
 </template>
 
diff --git a/hwe/ts/util/installVue3Components.ts b/hwe/ts/util/installVue3Components.ts
new file mode 100644
index 00000000..5b7a4d18
--- /dev/null
+++ b/hwe/ts/util/installVue3Components.ts
@@ -0,0 +1,17 @@
+import { BootstrapVueNext, BToastPlugin } from "bootstrap-vue-next";
+import { Directives } from "bootstrap-vue-next";
+import type { App } from "vue";
+import Multiselect from "vue-multiselect";
+
+export function installVue3Components<T>(app: App<T>): App<T> {
+
+  app.use(BootstrapVueNext).use(BToastPlugin).component('v-multiselect', Multiselect);
+  for (const [name, directive] of Object.entries(Directives)) {
+    //BVN 0.7.3 directive 이름 hack
+    if (!name.startsWith('v')) {
+      continue;
+    }
+    app.directive(name.substring(1), directive);
+  }
+  return app;
+}
\ No newline at end of file
diff --git a/hwe/ts/v_NPCControl.ts b/hwe/ts/v_NPCControl.ts
index fff46765..f4096825 100644
--- a/hwe/ts/v_NPCControl.ts
+++ b/hwe/ts/v_NPCControl.ts
@@ -1,10 +1,10 @@
 import { createApp } from 'vue'
 import NPCControl from '@/PageNPCControl.vue';
-import { BootstrapVueNext, BToastPlugin } from 'bootstrap-vue-next'
 import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 import { auto500px } from "./util/auto500px";
 import { htmlReady } from "./util/htmlReady";
 import { insertCustomCSS } from "./util/customCSS";
+import { installVue3Components } from './util/installVue3Components';
 
 setAxiosXMLHttpRequest();
 auto500px();
@@ -12,4 +12,4 @@ auto500px();
 htmlReady(() => {
   insertCustomCSS();
 });
-createApp(NPCControl).use(BootstrapVueNext).use(BToastPlugin).mount('#app')
\ No newline at end of file
+installVue3Components(createApp(NPCControl)).mount('#app')
\ No newline at end of file
diff --git a/hwe/ts/v_auction.ts b/hwe/ts/v_auction.ts
index 611e3166..2287a07c 100644
--- a/hwe/ts/v_auction.ts
+++ b/hwe/ts/v_auction.ts
@@ -1,10 +1,10 @@
 import "@scss/auction.scss";
 import { createApp } from 'vue'
 import PageAuction from '@/PageAuction.vue';
-import BootstrapVueNext, { BToastPlugin } from 'bootstrap-vue-next'
 import { auto500px } from "./util/auto500px";
 import { insertCustomCSS } from "./util/customCSS";
 import { htmlReady } from "./util/htmlReady";
+import { installVue3Components } from "./util/installVue3Components";
 
 declare const staticValues: {
   serverID: string,
@@ -16,8 +16,8 @@ declare const staticValues: {
 auto500px();
 
 htmlReady(() => {
-    insertCustomCSS();
-  });
-createApp(PageAuction, {
+  insertCustomCSS();
+});
+installVue3Components(createApp(PageAuction, {
   isResAuction: staticValues.isResAuction,
-}).use(BootstrapVueNext).use(BToastPlugin).mount('#app')
\ No newline at end of file
+})).mount('#app')
\ No newline at end of file
diff --git a/hwe/ts/v_battleCenter.ts b/hwe/ts/v_battleCenter.ts
index 442737d0..b3269ba6 100644
--- a/hwe/ts/v_battleCenter.ts
+++ b/hwe/ts/v_battleCenter.ts
@@ -4,10 +4,10 @@ import "ag-grid-community/dist/styles/ag-theme-balham-dark.css";
 import "@scss/battleLog.scss";
 import { createApp } from 'vue'
 import PageBattleCenter from '@/PageBattleCenter.vue';
-import { BootstrapVueNext, BToastPlugin } from 'bootstrap-vue-next';
 import { auto500px } from './util/auto500px';
 import { htmlReady } from "./util/htmlReady";
 import { insertCustomCSS } from "./util/customCSS";
+import { installVue3Components } from "./util/installVue3Components";
 
 
 
@@ -17,4 +17,4 @@ auto500px();
 htmlReady(() => {
   insertCustomCSS();
 });
-createApp(PageBattleCenter).use(BootstrapVueNext).use(BToastPlugin).mount('#app');
\ No newline at end of file
+installVue3Components(createApp(PageBattleCenter)).mount('#app');
\ No newline at end of file
diff --git a/hwe/ts/v_board.ts b/hwe/ts/v_board.ts
index 43d8d1a0..03f8d051 100644
--- a/hwe/ts/v_board.ts
+++ b/hwe/ts/v_board.ts
@@ -6,6 +6,7 @@ import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 import { auto500px } from "./util/auto500px";
 import { insertCustomCSS } from "./util/customCSS";
 import { htmlReady } from "./util/htmlReady";
+import { installVue3Components } from "./util/installVue3Components";
 
 declare const isSecretBoard: boolean;
 
@@ -17,6 +18,6 @@ auto500px();
 htmlReady(() => {
     insertCustomCSS();
   });
-createApp(PageBoard, {
+installVue3Components(createApp(PageBoard, {
     isSecretBoard
-}).use(BootstrapVueNext).mount('#app')
\ No newline at end of file
+})).mount('#app')
\ No newline at end of file
diff --git a/hwe/ts/v_cachedMap.ts b/hwe/ts/v_cachedMap.ts
index 8c52f8e6..e6ebbc61 100644
--- a/hwe/ts/v_cachedMap.ts
+++ b/hwe/ts/v_cachedMap.ts
@@ -1,8 +1,8 @@
 import { createApp } from 'vue'
 import PageCachedMap from '@/PageCachedMap.vue';
-import { BootstrapVueNext, BToastPlugin } from 'bootstrap-vue-next'
 import { auto500px } from "./util/auto500px";
+import { installVue3Components } from './util/installVue3Components';
 
 auto500px();
 
-createApp(PageCachedMap).use(BootstrapVueNext).use(BToastPlugin).mount('#app');
\ No newline at end of file
+installVue3Components(createApp(PageCachedMap)).mount('#app');
\ No newline at end of file
diff --git a/hwe/ts/v_chiefCenter.ts b/hwe/ts/v_chiefCenter.ts
index d4806ebd..ac25eddb 100644
--- a/hwe/ts/v_chiefCenter.ts
+++ b/hwe/ts/v_chiefCenter.ts
@@ -1,23 +1,21 @@
 import { createApp } from 'vue'
 import PageChiefCenter from '@/PageChiefCenter.vue';
-import BootstrapVueNext, { BToastPlugin } from 'bootstrap-vue-next'
 import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
 import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
-import Multiselect from 'vue-multiselect';
 import { auto500px } from './util/auto500px';
 import { htmlReady } from './util/htmlReady';
 import { insertCustomCSS } from './util/customCSS';
+import { installVue3Components } from './util/installVue3Components';
 
 declare const maxChiefTurn: number;
 
-
 setAxiosXMLHttpRequest();
 auto500px();
 
 htmlReady(() => {
-    insertCustomCSS();
-  });
-createApp(PageChiefCenter, {
-    maxChiefTurn,
+  insertCustomCSS();
+});
+installVue3Components(createApp(PageChiefCenter, {
+  maxChiefTurn,
 
-}).use(BootstrapVueNext).use(BToastPlugin).component('v-multiselect', Multiselect).mount('#app')
\ No newline at end of file
+})).mount('#app')
\ No newline at end of file
diff --git a/hwe/ts/v_front.ts b/hwe/ts/v_front.ts
index ff556b96..e2f1ab93 100644
--- a/hwe/ts/v_front.ts
+++ b/hwe/ts/v_front.ts
@@ -1,13 +1,12 @@
 import { createApp } from 'vue'
-import { BootstrapVueNext, BToastPlugin } from 'bootstrap-vue-next'
 import { auto500px } from './util/auto500px';
 import { htmlReady } from './util/htmlReady';
 import { insertCustomCSS } from './util/customCSS';
 import PageFront from './PageFront.vue';
-import Multiselect from 'vue-multiselect';
+import { installVue3Components } from './util/installVue3Components';
 auto500px();
 
 htmlReady(() => {
   insertCustomCSS();
 });
-createApp(PageFront).use(BootstrapVueNext).use(BToastPlugin).component('v-multiselect', Multiselect).mount('#app');
+installVue3Components(createApp(PageFront)).mount('#app');
diff --git a/hwe/ts/v_globalDiplomacy.ts b/hwe/ts/v_globalDiplomacy.ts
index 3b5b1023..caf21452 100644
--- a/hwe/ts/v_globalDiplomacy.ts
+++ b/hwe/ts/v_globalDiplomacy.ts
@@ -1,11 +1,11 @@
 import "@scss/history.scss";
 import { createApp } from 'vue'
 import PageGlobalDiplomacy from '@/PageGlobalDiplomacy.vue';
-import { BootstrapVueNext, BToastPlugin } from 'bootstrap-vue-next'
 import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 import { auto500px } from "./util/auto500px";
 import { htmlReady } from "./util/htmlReady";
 import { insertCustomCSS } from "./util/customCSS";
+import { installVue3Components } from "./util/installVue3Components";
 
 setAxiosXMLHttpRequest();
 auto500px();
@@ -13,4 +13,4 @@ auto500px();
 htmlReady(() => {
   insertCustomCSS();
 });
-createApp(PageGlobalDiplomacy).use(BootstrapVueNext).use(BToastPlugin).mount('#app');
\ No newline at end of file
+installVue3Components(createApp(PageGlobalDiplomacy)).mount('#app');
\ No newline at end of file
diff --git a/hwe/ts/v_history.ts b/hwe/ts/v_history.ts
index 02496767..55a96a15 100644
--- a/hwe/ts/v_history.ts
+++ b/hwe/ts/v_history.ts
@@ -1,11 +1,11 @@
 import "@scss/history.scss";
 import { createApp } from 'vue'
 import PageHistory from '@/PageHistory.vue';
-import { BootstrapVueNext, BToastPlugin } from 'bootstrap-vue-next'
 import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
 import { auto500px } from "./util/auto500px";
 import { htmlReady } from "./util/htmlReady";
 import { insertCustomCSS } from "./util/customCSS";
+import { installVue3Components } from "./util/installVue3Components";
 
 setAxiosXMLHttpRequest();
 auto500px();
@@ -13,4 +13,4 @@ auto500px();
 htmlReady(() => {
   insertCustomCSS();
 });
-createApp(PageHistory).use(BootstrapVueNext).use(BToastPlugin).mount('#app');
\ No newline at end of file
+installVue3Components(createApp(PageHistory)).mount('#app');
\ No newline at end of file
diff --git a/hwe/ts/v_inheritPoint.ts b/hwe/ts/v_inheritPoint.ts
index 562a996b..457ea322 100644
--- a/hwe/ts/v_inheritPoint.ts
+++ b/hwe/ts/v_inheritPoint.ts
@@ -1,13 +1,13 @@
 import { createApp } from 'vue'
 import PageInheritPoint from '@/PageInheritPoint.vue';
-import BootstrapVueNext from 'bootstrap-vue-next'
 import { auto500px } from "./util/auto500px";
 import { htmlReady } from "./util/htmlReady";
 import { insertCustomCSS } from "./util/customCSS";
+import { installVue3Components } from './util/installVue3Components';
 
 auto500px();
 
 htmlReady(() => {
   insertCustomCSS();
 });
-createApp(PageInheritPoint).use(BootstrapVueNext).mount('#app');
\ No newline at end of file
+installVue3Components(createApp(PageInheritPoint)).mount('#app');
\ No newline at end of file
diff --git a/hwe/ts/v_join.ts b/hwe/ts/v_join.ts
index b603858b..dfd4b931 100644
--- a/hwe/ts/v_join.ts
+++ b/hwe/ts/v_join.ts
@@ -1,8 +1,8 @@
 import { createApp } from 'vue'
 import PageJoin from '@/PageJoin.vue';
-import BootstrapVueNext from 'bootstrap-vue-next'
 import { auto500px } from './util/auto500px';
+import { installVue3Components } from './util/installVue3Components';
 
 auto500px();
 
-createApp(PageJoin).use(BootstrapVueNext).mount('#app')
\ No newline at end of file
+installVue3Components(createApp(PageJoin)).mount('#app')
\ No newline at end of file
diff --git a/hwe/ts/v_main.ts b/hwe/ts/v_main.ts
index daa4085b..f33a1f72 100644
--- a/hwe/ts/v_main.ts
+++ b/hwe/ts/v_main.ts
@@ -7,13 +7,12 @@ import { exportWindow } from '@util/exportWindow';
 import { scrollHardTo } from '@util/scrollHardTo';
 import { createApp } from 'vue'
 import PartialReservedCommand from '@/PartialReservedCommand.vue';
-import BootstrapVueNext from 'bootstrap-vue-next'
 import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
-import Multiselect from 'vue-multiselect';
 import "@/legacy/main";
 import { auto500px } from './util/auto500px';
 import { htmlReady } from './util/htmlReady';
 import { insertCustomCSS } from './util/customCSS';
+import { installVue3Components } from './util/installVue3Components';
 
 setAxiosXMLHttpRequest();
 auto500px();
@@ -21,4 +20,4 @@ auto500px();
 htmlReady(() => {
   insertCustomCSS();
 });
-createApp(PartialReservedCommand).use(BootstrapVueNext).component('v-multiselect', Multiselect).mount('#reservedCommandList');
+installVue3Components(createApp(PartialReservedCommand)).mount('#reservedCommandList');
diff --git a/hwe/ts/v_nationBetting.ts b/hwe/ts/v_nationBetting.ts
index 1234f774..79480f24 100644
--- a/hwe/ts/v_nationBetting.ts
+++ b/hwe/ts/v_nationBetting.ts
@@ -2,10 +2,10 @@ import "@scss/nationBetting.scss";
 
 import { createApp } from 'vue'
 import PageNationBetting from '@/PageNationBetting.vue';
-import { BootstrapVueNext, BToastPlugin } from 'bootstrap-vue-next';
 import { auto500px } from './util/auto500px';
 import { htmlReady } from "./util/htmlReady";
 import { insertCustomCSS } from "./util/customCSS";
+import { installVue3Components } from "./util/installVue3Components";
 
 
 
@@ -14,4 +14,4 @@ auto500px();
 htmlReady(() => {
   insertCustomCSS();
 });
-createApp(PageNationBetting).use(BootstrapVueNext).use(BToastPlugin).mount('#app');
\ No newline at end of file
+installVue3Components(createApp(PageNationBetting)).mount('#app');
\ No newline at end of file
diff --git a/hwe/ts/v_nationGeneral.ts b/hwe/ts/v_nationGeneral.ts
index 832828d8..5ff48bcb 100644
--- a/hwe/ts/v_nationGeneral.ts
+++ b/hwe/ts/v_nationGeneral.ts
@@ -4,10 +4,10 @@ import "ag-grid-community/dist/styles/ag-theme-balham-dark.css";
 
 import { createApp } from 'vue'
 import PageNationGeneral from '@/PageNationGeneral.vue';
-import { BootstrapVueNext, BToastPlugin } from 'bootstrap-vue-next';
 import { auto500px } from './util/auto500px';
 import { htmlReady } from "./util/htmlReady";
 import { insertCustomCSS } from "./util/customCSS";
+import { installVue3Components } from "./util/installVue3Components";
 
 
 
@@ -17,4 +17,4 @@ auto500px();
 htmlReady(() => {
   insertCustomCSS();
 });
-createApp(PageNationGeneral).use(BootstrapVueNext).use(BToastPlugin).mount('#app');
\ No newline at end of file
+installVue3Components(createApp(PageNationGeneral)).mount('#app');
\ No newline at end of file
diff --git a/hwe/ts/v_nationStratFinan.ts b/hwe/ts/v_nationStratFinan.ts
index 15db9b67..17c06b01 100644
--- a/hwe/ts/v_nationStratFinan.ts
+++ b/hwe/ts/v_nationStratFinan.ts
@@ -2,10 +2,10 @@ import "@scss/nationStratFinan.scss";
 
 import { createApp } from 'vue'
 import PageNationStratFinan from '@/PageNationStratFinan.vue';
-import { BootstrapVueNext, BToastPlugin } from 'bootstrap-vue-next';
 import { auto500px } from './util/auto500px';
 import { htmlReady } from "./util/htmlReady";
 import { insertCustomCSS } from "./util/customCSS";
+import { installVue3Components } from "./util/installVue3Components";
 
 
 
@@ -15,4 +15,4 @@ auto500px();
 htmlReady(() => {
   insertCustomCSS();
 });
-createApp(PageNationStratFinan).use(BootstrapVueNext).use(BToastPlugin).mount('#app');
\ No newline at end of file
+installVue3Components(createApp(PageNationStratFinan)).mount('#app');
\ No newline at end of file
diff --git a/hwe/ts/v_troop.ts b/hwe/ts/v_troop.ts
index a39500f0..b7e0718e 100644
--- a/hwe/ts/v_troop.ts
+++ b/hwe/ts/v_troop.ts
@@ -2,14 +2,14 @@ import "@scss/troop.scss";
 
 import { createApp } from 'vue'
 import PageTroop from '@/PageTroop.vue';
-import { BootstrapVueNext, BToastPlugin } from 'bootstrap-vue-next'
 import { auto500px } from "./util/auto500px";
 import { htmlReady } from "./util/htmlReady";
 import { insertCustomCSS } from "./util/customCSS";
+import { installVue3Components } from "./util/installVue3Components";
 
 auto500px();
 
 htmlReady(() => {
   insertCustomCSS();
 });
-createApp(PageTroop).use(BootstrapVueNext).use(BToastPlugin).mount('#app')
\ No newline at end of file
+installVue3Components(createApp(PageTroop)).mount('#app')
\ No newline at end of file
diff --git a/hwe/ts/v_vote.ts b/hwe/ts/v_vote.ts
index c35cdf87..0ebf07ca 100644
--- a/hwe/ts/v_vote.ts
+++ b/hwe/ts/v_vote.ts
@@ -2,14 +2,14 @@ import "@scss/vote.scss";
 
 import { createApp } from 'vue'
 import PageVote from '@/PageVote.vue';
-import { BootstrapVueNext, BToastPlugin } from 'bootstrap-vue-next'
 import { auto500px } from "./util/auto500px";
 import { htmlReady } from "./util/htmlReady";
 import { insertCustomCSS } from "./util/customCSS";
+import { installVue3Components } from "./util/installVue3Components";
 
 auto500px();
 
 htmlReady(() => {
   insertCustomCSS();
 });
-createApp(PageVote).use(BootstrapVueNext).use(BToastPlugin).mount('#app')
\ No newline at end of file
+installVue3Components(createApp(PageVote)).mount('#app')
\ No newline at end of file