diff --git a/packages/survey-vue3-ui/example/package.json b/packages/survey-vue3-ui/example/package.json
index 2cca8d44ef..4c8ecd5ce1 100644
--- a/packages/survey-vue3-ui/example/package.json
+++ b/packages/survey-vue3-ui/example/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --force",
     "build": "run-p type-check build-only",
     "preview": "vite preview --host 0.0.0.0 --port 8080",
     "build-only": "vite build",
diff --git a/packages/survey-vue3-ui/example/src/components/example/Example.vue b/packages/survey-vue3-ui/example/src/components/example/Example.vue
index db646a0e13..6929937a5a 100644
--- a/packages/survey-vue3-ui/example/src/components/example/Example.vue
+++ b/packages/survey-vue3-ui/example/src/components/example/Example.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
   import { Model } from "survey-core";
   import("survey-core/defaultV2.css");
+  import { SurveyComponent } from "survey-vue3-ui";
   let survey = new Model({
-    elements: [
-      {
-        type: "text",
-        name: "q1"
-      }
-    ]
-  })
+      elements: [
+        {
+          name: "name",
+          type: "file",
+          title: "Question title",
+          titleLocation: "hidden"
+        }
+      ]
+    })
 </script>
 
 <template>
diff --git a/packages/survey-vue3-ui/example/src/components/test/TestCommon.vue b/packages/survey-vue3-ui/example/src/components/test/TestCommon.vue
index 9125b10fcf..1e57e61fd0 100644
--- a/packages/survey-vue3-ui/example/src/components/test/TestCommon.vue
+++ b/packages/survey-vue3-ui/example/src/components/test/TestCommon.vue
@@ -2,6 +2,7 @@
 import { SurveyModel } from "survey-core";
 import * as Survey from "survey-core"
 import "survey-core/survey.i18n";
+import { SurveyComponent, PopupSurveyComponent } from "survey-vue3-ui";
 import { shallowRef } from "vue";
 const survey = shallowRef();
 const isPopup = shallowRef();
diff --git a/packages/survey-vue3-ui/example/src/components/test/test-custom-components/Item.vue b/packages/survey-vue3-ui/example/src/components/test/test-custom-components/Item.vue
index 84428a3ff2..8922464536 100644
--- a/packages/survey-vue3-ui/example/src/components/test/test-custom-components/Item.vue
+++ b/packages/survey-vue3-ui/example/src/components/test/test-custom-components/Item.vue
@@ -1,11 +1,12 @@
 <template>
     <div class="my-list-item" style="display:flex;" :title="item.hint">
         <span>
-            <sv-svg-icon :iconName="item.iconName" :size="item.iconSize"></sv-svg-icon>
+            <SvComponent :is="'sv-svg-icon'" :iconName="item.iconName" :size="item.iconSize"></SvComponent>
         </span>
         <span :class="item.getActionBarItemTitleCss()">{{ item.title }}</span>
     </div>
 </template>
 <script lang="ts" setup>
+import { SvComponent } from 'survey-vue3-ui';
 defineProps<{ item: any }>()
 </script>
\ No newline at end of file
diff --git a/packages/survey-vue3-ui/example/src/components/test/test-custom-components/ItemContent.vue b/packages/survey-vue3-ui/example/src/components/test/test-custom-components/ItemContent.vue
index 37c65d46ae..4d3e5bf05e 100644
--- a/packages/survey-vue3-ui/example/src/components/test/test-custom-components/ItemContent.vue
+++ b/packages/survey-vue3-ui/example/src/components/test/test-custom-components/ItemContent.vue
@@ -1,10 +1,11 @@
 <template>
     <div class="sv-ranking-item__text" :style="{display: 'flex', alignItems: 'center', gap: '8px'}">
-        <sv-svg-icon iconName="icon-next_16x16" size = "16"></sv-svg-icon>
-        <survey-string :locString="item.locText" />
+        <SvComponent :is="'sv-svg-icon'" iconName="icon-next_16x16" size = "16"/>
+        <SvComponent :is="'survey-string'" :locString="item.locText" />
     </div>
 </template>
 <script lang="ts" setup>
+import { SvComponent } from 'survey-vue3-ui';
 import type { ItemValue } from 'survey-core';
 defineProps<{ item: ItemValue, cssClasses: any }>()
 </script>
\ No newline at end of file
diff --git a/packages/survey-vue3-ui/example/src/main.ts b/packages/survey-vue3-ui/example/src/main.ts
index 5d9c4415eb..1b74957322 100644
--- a/packages/survey-vue3-ui/example/src/main.ts
+++ b/packages/survey-vue3-ui/example/src/main.ts
@@ -1,4 +1,4 @@
-import { surveyPlugin }  from "survey-vue3-ui";
+import { ComponentFactory }  from "survey-vue3-ui";
 
 import { createApp } from 'vue'
 import Action from "./components/test/test-custom-components/Action.vue"
@@ -7,14 +7,11 @@ import ItemContent from "./components/test/test-custom-components/ItemContent.vu
 import App from './App.vue'
 import router from './router'
 
-const app = createApp(App)
-app.use(surveyPlugin);
-
-
-app.component("svc-custom-action", Action);
-app.component("new-item", Item);
-app.component("new-item-content", ItemContent);
+ComponentFactory.Instance.registerComponent("svc-custom-action", Action);
+ComponentFactory.Instance.registerComponent("new-item", Item);
+ComponentFactory.Instance.registerComponent("new-item-content", ItemContent);
 
+const app = createApp(App)
 app.use(router)
 
 app.mount('#app')
diff --git a/packages/survey-vue3-ui/example/vite.config.ts b/packages/survey-vue3-ui/example/vite.config.ts
index f7eb119cb8..7453708e37 100644
--- a/packages/survey-vue3-ui/example/vite.config.ts
+++ b/packages/survey-vue3-ui/example/vite.config.ts
@@ -4,15 +4,29 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(),
-  ],
-  resolve: {
-    preserveSymlinks: true,
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-      "survey-core": fileURLToPath(new URL('./node_modules/survey-core', import.meta.url)),
+export default defineConfig(({ command }) => {
+  return {
+    plugins: [
+      vue(),
+    ],
+    server: {
+      watch: {
+        ignored: ["survey-vue3-ui"].map((m) => `!**/node_modules/${m}/**`)
+      }
+    },
+    build: {
+      commonjsOptions: { exclude: ["survey-core"] },
+    },
+    optimizeDeps: {
+      exclude: ["survey-vue3-ui"],
+      include: ["survey-core", "survey-core/survey.i18n", "survey-core/plugins/bootstrap-integration", "survey-core/plugins/bootstrap-material-integration" ]
+    },
+    resolve: {
+      preserveSymlinks: command == "serve" ? false : true,
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url)),
+        "survey-core": fileURLToPath(new URL('./node_modules/survey-core', import.meta.url)),
+      }
     }
   }
 })
diff --git a/packages/survey-vue3-ui/package.json b/packages/survey-vue3-ui/package.json
index 04aec23d3b..25959dc7ff 100644
--- a/packages/survey-vue3-ui/package.json
+++ b/packages/survey-vue3-ui/package.json
@@ -10,11 +10,14 @@
     "build": "vite build && npm run build:types",
     "build:dev": "vite build --mode development",
     "build:types": "vue-tsc --project tsconfig.types.json --emitDeclarationOnly",
+    "serve:example:dev": "npm run dev --prefix ./example",
+    "serve:example:prod": "npm run preview --prefix ./example",
+    "build:example:prod": "npm run build --prefix ./example",
     "type-check": "vue-tsc --project tsconfig.types.json --noEmit",
     "test": "vitest --no-threads tests/*.spec.ts",
     "test:single": "vitest --no-watch --no-threads tests/*.spec.ts",
     "release": "commit-and-tag-version --message \"Release: %s [azurepipelines skip]\" ",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+    "lint": "eslint ./src ./tests --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "devDependencies": {
     "@babel/types": "^7.20.2",
@@ -40,4 +43,4 @@
     "vue": "3.4.19",
     "vue-tsc": "^1.0.8"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/survey-vue3-ui/src/BooleanCheckbox.vue b/packages/survey-vue3-ui/src/BooleanCheckbox.vue
index 356cfffe21..9f3d3e6b7f 100644
--- a/packages/survey-vue3-ui/src/BooleanCheckbox.vue
+++ b/packages/survey-vue3-ui/src/BooleanCheckbox.vue
@@ -31,16 +31,18 @@
           :id="question.labelRenderedAriaID"
           :class="question.cssClasses.checkboxControlLabel"
         >
-          <survey-element-title-content
+          <SvComponent
+            :is="'survey-element-title-content'"
             v-if="!question.hasTitleActions"
             :element="question"
             :css="css"
-          ></survey-element-title-content>
-          <sv-title-actions
+          ></SvComponent>
+          <SvComponent
+            :is="'sv-title-actions'"
             v-if="question.hasTitleActions"
             :element="question"
             :css="css"
-          ></sv-title-actions>
+          ></SvComponent>
         </span>
       </label>
       <div
@@ -48,12 +50,16 @@
         :class="question.cssDescription"
         :id="question.ariaDescriptionId"
       >
-        <survey-string :locString="question.locDescription" />
+        <SvComponent
+          :is="'survey-string'"
+          :locString="question.locDescription"
+        />
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { RendererFactory } from "survey-core";
 import type { IBooleanProps } from "./boolean";
 import { ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/BooleanRadio.vue b/packages/survey-vue3-ui/src/BooleanRadio.vue
index 71157ee8de..62ca4d459c 100644
--- a/packages/survey-vue3-ui/src/BooleanRadio.vue
+++ b/packages/survey-vue3-ui/src/BooleanRadio.vue
@@ -1,31 +1,35 @@
 <template>
   <div :class="question.cssClasses.rootRadio" ref="root">
     <fieldset role="presentation" :class="question.cssClasses.radioFieldset">
-      <sv-boolean-radio-item
+      <SvComponent
+        :is="'sv-boolean-radio-item'"
         v-if="question.swapOrder"
-        :key="true"
+        :key="'true'"
         :question="question"
         :locText="question.locLabelTrue"
         :value="true"
-      ></sv-boolean-radio-item>
-      <sv-boolean-radio-item
-        :key="false"
+      ></SvComponent>
+      <SvComponent
+        :is="'sv-boolean-radio-item'"
+        :key="'false'"
         :question="question"
         :locText="question.locLabelFalse"
         :value="false"
-      ></sv-boolean-radio-item>
-      <sv-boolean-radio-item
+      ></SvComponent>
+      <SvComponent
+        :is="'sv-boolean-radio-item'"
         v-if="!question.swapOrder"
-        :key="true"
+        :key="'true'"
         :question="question"
         :locText="question.locLabelTrue"
         :value="true"
-      ></sv-boolean-radio-item>
+      ></SvComponent>
     </fieldset>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { RendererFactory } from "survey-core";
 import { ref } from "vue";
 import { useQuestion } from "./base";
diff --git a/packages/survey-vue3-ui/src/BooleanRadioItem.vue b/packages/survey-vue3-ui/src/BooleanRadioItem.vue
index 7bb0f42b0d..bf048da204 100644
--- a/packages/survey-vue3-ui/src/BooleanRadioItem.vue
+++ b/packages/survey-vue3-ui/src/BooleanRadioItem.vue
@@ -27,13 +27,14 @@
         </svg>
       </span>
       <span :class="question.cssClasses.radioControlLabel">
-        <survey-string :locString="locText" />
+        <SvComponent :is="'survey-string'" :locString="locText" />
       </span>
     </label>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { LocalizableString, QuestionBooleanModel } from "survey-core";
 
 const props = defineProps<{
diff --git a/packages/survey-vue3-ui/src/BooleanSwitch.vue b/packages/survey-vue3-ui/src/BooleanSwitch.vue
index 15386257b3..8a077b8f29 100644
--- a/packages/survey-vue3-ui/src/BooleanSwitch.vue
+++ b/packages/survey-vue3-ui/src/BooleanSwitch.vue
@@ -28,8 +28,11 @@
         v-on:click="onLabelClick($event, question.swapOrder)"
       >
         <span :class="question.getLabelCss(question.swapOrder)"
-          ><survey-string :locString="question.locLabelLeft"></survey-string
-        ></span>
+          ><SvComponent
+            :is="'survey-string'"
+            :locString="question.locLabelLeft"
+          />
+        </span>
       </div>
       <div
         :class="question.cssClasses.switch"
@@ -40,9 +43,10 @@
             v-if="question.cssClasses.sliderText && question.isDeterminated"
             :class="question.cssClasses.sliderText"
           >
-            <survey-string
+            <SvComponent
+              :is="'survey-string'"
               :locString="question.getCheckedLabel()"
-            ></survey-string>
+            ></SvComponent>
           </span>
         </span>
       </div>
@@ -51,14 +55,17 @@
         v-on:click="onLabelClick($event, !question.swapOrder)"
       >
         <span :class="question.getLabelCss(!question.swapOrder)"
-          ><survey-string :locString="question.locLabelRight"></survey-string
-        ></span>
+          ><SvComponent
+            :is="'survey-string'"
+            :locString="question.locLabelRight"
+        /></span>
       </div>
     </label>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { useQuestion } from "./base";
 import { ref } from "vue";
 import type { IBooleanProps } from "./boolean";
diff --git a/packages/survey-vue3-ui/src/CheckboxItem.vue b/packages/survey-vue3-ui/src/CheckboxItem.vue
index 31fb6579f9..e52cc3e6c3 100644
--- a/packages/survey-vue3-ui/src/CheckboxItem.vue
+++ b/packages/survey-vue3-ui/src/CheckboxItem.vue
@@ -27,13 +27,14 @@
           <use :xlink:href="question.itemSvgIcon"></use>
         </svg> </span
       ><span v-if="!hideLabel" :class="question.cssClasses.controlLabel">
-        <survey-string :locString="item.locText" />
+        <SvComponent :is="'survey-string'" :locString="item.locText" />
       </span>
     </label>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { ItemValue, QuestionCheckboxModel } from "survey-core";
 import { ref } from "vue";
 import { useSelectBaseItem } from "./selectbase-item";
diff --git a/packages/survey-vue3-ui/src/Comment.vue b/packages/survey-vue3-ui/src/Comment.vue
index 8bd2732a88..5aff698a49 100644
--- a/packages/survey-vue3-ui/src/Comment.vue
+++ b/packages/survey-vue3-ui/src/Comment.vue
@@ -1,20 +1,29 @@
 <template>
-  <div ref="root" v-if="!question.isReadOnlyRenderDiv() && question.getMaxLength()">
-    <sv-text-area :model="question.textAreaModel"></sv-text-area>
-    <sv-character-counter
+  <div
+    ref="root"
+    v-if="!question.isReadOnlyRenderDiv() && question.getMaxLength()"
+  >
+    <SvComponent
+      :is="'sv-text-area'"
+      :model="question.textAreaModel"
+    ></SvComponent>
+    <SvComponent
+      :is="'sv-character-counter'"
       :counter="question.characterCounter"
       :remainingCharacterCounter="question.cssClasses.remainingCharacterCounter"
-    ></sv-character-counter>
+    ></SvComponent>
   </div>
-  <sv-text-area
+  <SvComponent
+    :is="'sv-text-area'"
     ref="root"
     v-else-if="!question.isReadOnlyRenderDiv() && !question.getMaxLength()"
     :model="question.textAreaModel"
-  ></sv-text-area>
+  ></SvComponent>
   <div ref="root" v-else>{{ question.value }}</div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionCommentModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/Composite.vue b/packages/survey-vue3-ui/src/Composite.vue
index 944c6e624f..8a8ba5a148 100644
--- a/packages/survey-vue3-ui/src/Composite.vue
+++ b/packages/survey-vue3-ui/src/Composite.vue
@@ -1,8 +1,14 @@
 <template>
-  <survey-panel ref="root" :element="contentPanel" :css="css" />
+  <SvComponent
+    :is="'survey-panel'"
+    ref="root"
+    :element="contentPanel"
+    :css="css"
+  />
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { computed, ref } from "vue";
 import type { QuestionCompositeModel } from "survey-core";
 import { useQuestion } from "./base";
diff --git a/packages/survey-vue3-ui/src/Custom.vue b/packages/survey-vue3-ui/src/Custom.vue
index 13e56bfbb6..37acd1d9d1 100644
--- a/packages/survey-vue3-ui/src/Custom.vue
+++ b/packages/survey-vue3-ui/src/Custom.vue
@@ -1,5 +1,5 @@
 <template>
-  <component
+  <SvComponent
     :ref="root"
     :is="getComponentName(contentQuestion)"
     :question="contentQuestion"
@@ -8,6 +8,7 @@
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { computed, ref } from "vue";
 import type { QuestionCustomModel, Question } from "survey-core";
 import { getComponentName as getComponent, useQuestion } from "./base";
diff --git a/packages/survey-vue3-ui/src/CustomWidget.vue b/packages/survey-vue3-ui/src/CustomWidget.vue
index 636352f0ad..2bb44467cf 100644
--- a/packages/survey-vue3-ui/src/CustomWidget.vue
+++ b/packages/survey-vue3-ui/src/CustomWidget.vue
@@ -1,7 +1,7 @@
 <template>
   <div ref="root">
     <div v-if="hasHtml" v-html="customHtml"></div>
-    <component
+    <SvComponent
       v-if="hasDefaultRender"
       :is="componentName"
       :question="question"
@@ -10,6 +10,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { Question } from "survey-core";
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 const props = defineProps<{
diff --git a/packages/survey-vue3-ui/src/Dropdown.vue b/packages/survey-vue3-ui/src/Dropdown.vue
index cf77ad8cd4..4db12bb3c0 100644
--- a/packages/survey-vue3-ui/src/Dropdown.vue
+++ b/packages/survey-vue3-ui/src/Dropdown.vue
@@ -1,11 +1,16 @@
 <template>
   <div :class="question.renderCssRoot" ref="root">
-    <sv-dropdown :question="question"></sv-dropdown>
-    <survey-other-choice v-if="question.isOtherSelected" :question="question" />
+    <SvComponent :is="'sv-dropdown'" :question="question"></SvComponent>
+    <SvComponent
+      :is="'survey-other-choice'"
+      v-if="question.isOtherSelected"
+      :question="question"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionDropdownModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/DropdownSelect.vue b/packages/survey-vue3-ui/src/DropdownSelect.vue
index a5980ec546..5528e03bd8 100644
--- a/packages/survey-vue3-ui/src/DropdownSelect.vue
+++ b/packages/survey-vue3-ui/src/DropdownSelect.vue
@@ -18,11 +18,12 @@
         <option v-if="question.allowClear" value="">
           {{ question.placeholder }}
         </option>
-        <sv-dropdown-option-item
+        <SvComponent
+          :is="'sv-dropdown-option-item'"
           v-for="item in question.visibleChoices"
           :item="item"
           :key="item.id"
-        ></sv-dropdown-option-item>
+        ></SvComponent>
       </select>
       <div
         disabled
@@ -36,18 +37,24 @@
         :class="question.cssClasses.chevronButton"
         v-if="question.cssClasses.chevronButtonIconId"
       >
-        <sv-svg-icon
+        <SvComponent
+          :is="'sv-svg-icon'"
           :class="question.cssClasses.chevronButtonSvg"
           :iconName="question.cssClasses.chevronButtonIconId"
           size="auto"
         >
-        </sv-svg-icon>
+        </SvComponent>
       </div>
     </div>
-    <survey-other-choice v-if="question.isOtherSelected" :question="question" />
+    <SvComponent
+      :is="'survey-other-choice'"
+      v-if="question.isOtherSelected"
+      :question="question"
+    />
   </div>
 </template>
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { computed, ref } from "vue";
 import { useQuestion } from "./base";
 import type { QuestionDropdownModel } from "survey-core";
diff --git a/packages/survey-vue3-ui/src/Element.vue b/packages/survey-vue3-ui/src/Element.vue
index 4882f2d5a6..f54ad694d2 100644
--- a/packages/survey-vue3-ui/src/Element.vue
+++ b/packages/survey-vue3-ui/src/Element.vue
@@ -4,20 +4,21 @@
     :style="getRootStyle(element)"
     :class="element.cssClasses.questionWrapper"
   >
-    <component
+    <SvComponent
       :is="componentName"
       v-bind="componentData"
       v-if="row.isNeedRender"
     />
-    <component
+    <SvComponent
       v-else-if="!!element.skeletonComponentName"
       :is="element.skeletonComponentName"
       :element="element"
       :css="css"
-    ></component>
+    ></SvComponent>
   </div>
 </template>
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionRowModel, SurveyElement, SurveyModel } from "survey-core";
 import { computed, onMounted, watch, ref, onUnmounted } from "vue";
 
diff --git a/packages/survey-vue3-ui/src/ElementHeader.vue b/packages/survey-vue3-ui/src/ElementHeader.vue
index 51f6c29340..973788a7f8 100644
--- a/packages/survey-vue3-ui/src/ElementHeader.vue
+++ b/packages/survey-vue3-ui/src/ElementHeader.vue
@@ -1,15 +1,28 @@
 <template>
-  <div :class="element.cssHeader" @click="clickTitleFunction" :style="getStyle()">
-    <survey-element-title :element="element" :css="css" />
-    <div v-if="element.hasDescriptionUnderTitle" v-show="element.hasDescription" :class="element.cssDescription"
-      :id="element.ariaDescriptionId">
-      <survey-string :locString="element.locDescription" />
+  <div
+    :class="element.cssHeader"
+    @click="clickTitleFunction"
+    :style="getStyle()"
+  >
+    <SvComponent :is="'survey-element-title'" :element="element" :css="css" />
+    <div
+      v-if="element.hasDescriptionUnderTitle"
+      v-show="element.hasDescription"
+      :class="element.cssDescription"
+      :id="element.ariaDescriptionId"
+    >
+      <SvComponent :is="'survey-string'" :locString="element.locDescription" />
     </div>
-    <sv-action-bar v-if="element.hasAdditionalTitleToolbar" :model="element.additionalTitleToolbar"></sv-action-bar>
+    <SvComponent
+      :is="'sv-action-bar'"
+      v-if="element.hasAdditionalTitleToolbar"
+      :model="element.additionalTitleToolbar"
+    ></SvComponent>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { Question, PanelModel } from "survey-core";
 
 const props = defineProps<{ element: Question | PanelModel; css?: any }>();
@@ -20,7 +33,7 @@ const clickTitleFunction = (e: any) => {
 };
 const getStyle = () => {
   const headerStyle: any = { width: undefined };
-  if("titleWidth" in props.element) {
+  if ("titleWidth" in props.element) {
     headerStyle.width = props.element.titleWidth;
   }
   return headerStyle;
diff --git a/packages/survey-vue3-ui/src/Errors.vue b/packages/survey-vue3-ui/src/Errors.vue
index 40168cdae6..de7b59f772 100644
--- a/packages/survey-vue3-ui/src/Errors.vue
+++ b/packages/survey-vue3-ui/src/Errors.vue
@@ -7,7 +7,7 @@
     :id="element.id + '_errors'"
     ref="root"
   >
-    <component
+    <SvComponent
       v-for="(error, index) in element.errors"
       :is="element.survey['questionErrorComponent']"
       :element="element"
@@ -20,10 +20,11 @@
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { PanelModel, Question } from "survey-core";
 import { ref } from "vue";
 
-const props = defineProps<{
+defineProps<{
   element: Question | PanelModel;
   location?: string;
 }>();
diff --git a/packages/survey-vue3-ui/src/File.vue b/packages/survey-vue3-ui/src/File.vue
index 8b18c34b1a..0a254e52d1 100644
--- a/packages/survey-vue3-ui/src/File.vue
+++ b/packages/survey-vue3-ui/src/File.vue
@@ -2,7 +2,11 @@
   <div :class="question.fileRootCss" ref="root">
     <input
       :class="question.cssClasses.fileInput"
-      v-if="(!question.isReadOnlyAttr && !question.isDisabledAttr) && question.hasFileUI"
+      v-if="
+        !question.isReadOnlyAttr &&
+        !question.isDisabledAttr &&
+        question.hasFileUI
+      "
       tabindex="-1"
       type="file"
       :id="question.inputId"
@@ -47,19 +51,22 @@
         v-if="question.showFileDecorator"
       >
         <span :class="question.cssClasses.dragAreaPlaceholder">
-          <survey-string
+          <SvComponent
+            :is="'survey-string'"
             :locString="question.locRenderedPlaceholder"
-          ></survey-string>
+          ></SvComponent>
         </span>
         <div :class="question.cssClasses.wrapper">
-          <sv-file-choose-btn
+          <SvComponent
+            :is="'sv-file-choose-btn'"
             v-if="question.showChooseButton"
             :data="{ question: question }"
-          ></sv-file-choose-btn>
-          <sv-action-bar
+          ></SvComponent>
+          <SvComponent
+            :is="'sv-action-bar'"
             v-if="question.actionsContainerVisible"
             :model="question.actionsContainer"
-          ></sv-action-bar>
+          ></SvComponent>
           <span
             :class="question.cssClasses.noFileChosen"
             v-if="question.isEmpty()"
@@ -67,38 +74,43 @@
           >
         </div>
       </div>
-      <sv-file-clean-btn
+      <SvComponent
+        :is="'sv-file-clean-btn'"
         v-if="question.showRemoveButton"
         :question="question"
         :css="question.showRemoveButton"
-      ></sv-file-clean-btn>
+      ></SvComponent>
       <div
         :class="question.cssClasses.loadingIndicator"
         v-if="question.showLoadingIndicator"
       >
-        <sv-loading-indicator></sv-loading-indicator>
+        <SvComponent :is="'sv-loading-indicator'" />
       </div>
-      <sv-file-video
+      <SvComponent
+        :is="'sv-file-video'"
         v-if="question.isPlayingVideo"
         :question="question"
-      ></sv-file-video>
+      ></SvComponent>
       <template v-if="question.allowShowPreview">
-        <sv-file-preview :question="question"></sv-file-preview>
+        <SvComponent :is="'sv-file-preview'" :question="question"></SvComponent>
       </template>
-      <sv-file-clean-btn
+      <SvComponent
+        :is="'sv-file-clean-btn'"
         v-if="question.showRemoveButtonBottom"
         :question="question"
         :css="question.showRemoveButtonBottom"
-      ></sv-file-clean-btn>
-      <sv-action-bar
+      ></SvComponent>
+      <SvComponent
+        :is="'sv-action-bar'"
         v-if="question.fileNavigatorVisible"
         :model="question.fileNavigator"
-      ></sv-action-bar>
+      ></SvComponent>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionFileModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/FileCleanButton.vue b/packages/survey-vue3-ui/src/FileCleanButton.vue
index 509c29661d..03ca97f24a 100644
--- a/packages/survey-vue3-ui/src/FileCleanButton.vue
+++ b/packages/survey-vue3-ui/src/FileCleanButton.vue
@@ -1,15 +1,17 @@
 <template>
   <button type="button" :class="css" @click="question.doClean">
     <span>{{ question.clearButtonCaption }}</span>
-    <sv-svg-icon
+    <SvComponent
+      :is="'sv-svg-icon'"
       v-if="question.cssClasses.removeButtonIconId"
       :iconName="question.cssClasses.removeButtonIconId"
       :size="'auto'"
       :title="question.clearButtonCaption"
-    ></sv-svg-icon>
+    ></SvComponent>
   </button>
 </template>
 <script setup lang="ts">
 import type { QuestionFileModel } from "survey-core";
+import SvComponent from "@/SvComponent.vue";
 defineProps<{ question: QuestionFileModel; css: any }>();
 </script>
diff --git a/packages/survey-vue3-ui/src/FileVideo.vue b/packages/survey-vue3-ui/src/FileVideo.vue
index 456b030d9c..0ee7e153c2 100644
--- a/packages/survey-vue3-ui/src/FileVideo.vue
+++ b/packages/survey-vue3-ui/src/FileVideo.vue
@@ -1,17 +1,27 @@
 <template>
   <div :class="question.cssClasses.videoContainer">
-    <sv-action :item="question.changeCameraAction"></sv-action>
-    <sv-action :item="question.closeCameraAction"></sv-action>
+    <SvComponent
+      :is="'sv-action'"
+      :item="question.changeCameraAction"
+    ></SvComponent>
+    <SvComponent
+      :is="'sv-action'"
+      :item="question.closeCameraAction"
+    ></SvComponent>
     <video
       autoplay
       playsinline
       :id="question.videoId"
       :class="question.cssClasses.video"
     ></video>
-    <sv-action :item="question.takePictureAction"></sv-action>
+    <SvComponent
+      :is="'sv-action'"
+      :item="question.takePictureAction"
+    ></SvComponent>
   </div>
 </template>
 <script setup lang="ts">
 import type { QuestionFileModel } from "survey-core";
+import SvComponent from "./SvComponent.vue";
 defineProps<{ question: QuestionFileModel }>();
 </script>
diff --git a/packages/survey-vue3-ui/src/Header.vue b/packages/survey-vue3-ui/src/Header.vue
index 4e081c4768..8e3c32798e 100644
--- a/packages/survey-vue3-ui/src/Header.vue
+++ b/packages/survey-vue3-ui/src/Header.vue
@@ -1,31 +1,38 @@
 <template>
   <div v-if="survey.renderedHasHeader" :class="survey.css.header" ref="root">
-    <component v-if="survey.isLogoBefore"
+    <SvComponent
+      v-if="survey.isLogoBefore"
       :is="survey.getElementWrapperComponentName(survey, 'logo-image')"
       :data="survey.getElementWrapperComponentData(survey, 'logo-image')"
-    ></component>
+    ></SvComponent>
 
     <div
       v-if="survey.renderedHasTitle"
       :class="survey.css.headerText"
       v-bind:style="{ maxWidth: survey.titleMaxWidth }"
     >
-      <survey-element-title :element="survey" :css="survey.css" />
-          <div v-if="survey.renderedHasDescription" :class="survey.css.description">
-          <survey-string :locString="survey.locDescription" />
-          </div>
+      <SvComponent
+        :is="'survey-element-title'"
+        :element="survey"
+        :css="survey.css"
+      />
+      <div v-if="survey.renderedHasDescription" :class="survey.css.description">
+        <SvComponent :is="'survey-string'" :locString="survey.locDescription" />
+      </div>
     </div>
 
-    <component v-if="survey.isLogoAfter"
+    <SvComponent
+      v-if="survey.isLogoAfter"
       :is="survey.getElementWrapperComponentName(survey, 'logo-image')"
       :data="survey.getElementWrapperComponentData(survey, 'logo-image')"
-    ></component>
+    ></SvComponent>
 
     <div :class="survey.css.headerClose"></div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { SurveyModel } from "survey-core";
 import { onMounted, ref } from "vue";
 
diff --git a/packages/survey-vue3-ui/src/Image.vue b/packages/survey-vue3-ui/src/Image.vue
index 951b8caeca..c6afa44028 100644
--- a/packages/survey-vue3-ui/src/Image.vue
+++ b/packages/survey-vue3-ui/src/Image.vue
@@ -63,15 +63,17 @@
       v-if="!imageLink || question.contentNotLoaded"
       :class="question.cssClasses.noImage"
     >
-      <sv-svg-icon
+      <SvComponent
+        :is="'sv-svg-icon'"
         :iconName="question.cssClasses.noImageSvgIconId"
         :size="48"
-      ></sv-svg-icon>
+      ></SvComponent>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionImageModel } from "survey-core";
 import { useLocString, useQuestion } from "./base";
 import { ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/Imagepicker.vue b/packages/survey-vue3-ui/src/Imagepicker.vue
index a5b2ef9795..6a9dd03062 100644
--- a/packages/survey-vue3-ui/src/Imagepicker.vue
+++ b/packages/survey-vue3-ui/src/Imagepicker.vue
@@ -2,12 +2,12 @@
   <fieldset :class="question.getSelectBaseRootCss()" ref="root">
     <legend class="sv-hidden">{{ question.locTitle.renderedHtml }}</legend>
     <template v-if="!question.hasColumns">
-      <component
+      <SvComponent
         v-for="item in question.visibleChoices"
         :key="item.value"
         :is="getItemValueComponentName(item)"
         v-bind="getItemValueComponentData(item)"
-      ></component>
+      ></SvComponent>
     </template>
     <template v-if="question.hasColumns">
       <div
@@ -16,18 +16,19 @@
         :key="colIndex"
         role="presentation"
       >
-        <component
+        <SvComponent
           v-for="item in column"
           :key="item.value"
           :is="getItemValueComponentName(item)"
           v-bind="getItemValueComponentData(item)"
-        ></component>
+        ></SvComponent>
       </div>
     </template>
   </fieldset>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { ItemValue, QuestionImagePickerModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/ImagepickerItem.vue b/packages/survey-vue3-ui/src/ImagepickerItem.vue
index ef3bcc88b6..8f63f430f1 100644
--- a/packages/survey-vue3-ui/src/ImagepickerItem.vue
+++ b/packages/survey-vue3-ui/src/ImagepickerItem.vue
@@ -37,12 +37,13 @@
             v-if="question.cssClasses.checkedItemDecorator"
             :class="question.cssClasses.checkedItemDecorator"
           >
-            <sv-svg-icon
+            <SvComponent
+              :is="'sv-svg-icon'"
               v-if="question.cssClasses.checkedItemSvgIconId"
               v-bind:class="question.cssClasses.checkedItemSvgIcon"
               size="auto"
               :iconName="question.cssClasses.checkedItemSvgIconId"
-            ></sv-svg-icon>
+            ></SvComponent>
           </span>
           <img
             v-if="
@@ -98,15 +99,16 @@
               objectFit: question.imageFit as any,
             }"
           >
-            <sv-svg-icon
+            <SvComponent
+              :is="'sv-svg-icon'"
               :class="question.cssClasses.itemNoImageSvgIcon"
               :iconName="question.cssClasses.itemNoImageSvgIconId"
               :size="48"
-            ></sv-svg-icon>
+            ></SvComponent>
           </div>
         </div>
         <span v-if="question.showLabel" :class="question.cssClasses.itemText">
-          <survey-string :locString="item.locText" />
+          <SvComponent :is="'survey-string'" :locString="item.locText" />
         </span>
       </div>
     </label>
@@ -114,6 +116,7 @@
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { ImageItemValue, QuestionImagePickerModel } from "survey-core";
 import { useBase, useLocString } from "./base";
 import { computed } from "vue";
diff --git a/packages/survey-vue3-ui/src/Matrix.vue b/packages/survey-vue3-ui/src/Matrix.vue
index 0b263a62dd..e417022674 100644
--- a/packages/survey-vue3-ui/src/Matrix.vue
+++ b/packages/survey-vue3-ui/src/Matrix.vue
@@ -15,14 +15,17 @@
                 width: question.columnMinWidth,
               }"
             >
-              <component
+              <SvComponent
                 :is="question.getColumnHeaderWrapperComponentName(column)"
                 :componentData="
                   question.getColumnHeaderWrapperComponentData(column)
                 "
               >
-                <survey-string :locString="column.locText" />
-              </component>
+                <SvComponent
+                  :is="'survey-string'"
+                  :locString="column.locText"
+                />
+              </SvComponent>
             </th>
           </tr>
         </thead>
@@ -40,12 +43,12 @@
                 width: question.rowTitleWidth,
               }"
             >
-              <component
+              <SvComponent
                 :is="question.getRowHeaderWrapperComponentName(row)"
                 :componentData="question.getRowHeaderWrapperComponentData(row)"
               >
-                <survey-string :locString="row.locText" />
-              </component>
+                <SvComponent :is="'survey-string'" :locString="row.locText" />
+              </SvComponent>
             </td>
             <template v-if="question.hasCellText">
               <td
@@ -54,9 +57,10 @@
                 :class="question.getItemClass(row, column)"
                 v-on:click="cellClick(row, column)"
               >
-                <survey-string
+                <SvComponent
+                  :is="'survey-string'"
                   :locString="question.getCellDisplayLocText(row.name, column)"
-                ></survey-string>
+                ></SvComponent>
               </td>
             </template>
             <template v-if="!question.hasCellText">
@@ -67,13 +71,13 @@
                 :class="question.cssClasses.cell"
                 v-on:click="cellClick(row, column)"
               >
-                <component
+                <SvComponent
                   :is="question.cellComponent"
                   :question="question"
                   :row="row"
                   :column="column"
                   :columnIndex="columnIndex"
-                ></component>
+                ></SvComponent>
               </td>
             </template>
           </tr>
@@ -84,6 +88,7 @@
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionMatrixModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref, shallowRef } from "vue";
diff --git a/packages/survey-vue3-ui/src/MatrixCell.vue b/packages/survey-vue3-ui/src/MatrixCell.vue
index 27824db629..1c10f8a3b0 100644
--- a/packages/survey-vue3-ui/src/MatrixCell.vue
+++ b/packages/survey-vue3-ui/src/MatrixCell.vue
@@ -34,26 +34,29 @@
       v-if="question.isMobile"
       :class="question.cssClasses.cellResponsiveTitle"
     >
-      <survey-string :locString="column.locText"></survey-string>
+      <SvComponent
+        :is="'survey-string'"
+        :locString="column.locText"
+      ></SvComponent>
     </span>
   </label>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type {
   MatrixRowModel,
   ItemValue,
   QuestionMatrixModel,
 } from "survey-core";
-import { useBase } from "./base";
 
 defineOptions({
   inheritAttrs: false,
 });
-const props = defineProps<{
+defineProps<{
   question: QuestionMatrixModel;
   row: MatrixRowModel;
   column: ItemValue;
   columnIndex: number;
 }>();
-</script>
\ No newline at end of file
+</script>
diff --git a/packages/survey-vue3-ui/src/MatrixDropdown.vue b/packages/survey-vue3-ui/src/MatrixDropdown.vue
index 2498c0c35f..278ac34455 100644
--- a/packages/survey-vue3-ui/src/MatrixDropdown.vue
+++ b/packages/survey-vue3-ui/src/MatrixDropdown.vue
@@ -1,8 +1,9 @@
 <template>
-  <survey-matrixtable :question="question" ref="root" />
+  <SvComponent :is="'survey-matrixtable'" :question="question" ref="root" />
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionMatrixDropdownModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/MatrixDropdownCellComp.vue b/packages/survey-vue3-ui/src/MatrixDropdownCellComp.vue
index 6fea6f032f..f9f4c804ad 100644
--- a/packages/survey-vue3-ui/src/MatrixDropdownCellComp.vue
+++ b/packages/survey-vue3-ui/src/MatrixDropdownCellComp.vue
@@ -8,86 +8,100 @@
     ref="root"
     v-if="cell.isVisible"
   >
-    <survey-errors v-if="cell.isErrorsCell" :element="cell.question" />
-    <sv-matrix-drag-drop-icon
+    <SvComponent
+      :is="'survey-errors'"
+      v-if="cell.isErrorsCell"
+      :element="cell.question"
+    />
+    <SvComponent
+      :is="'sv-matrix-drag-drop-icon'"
       v-if="cell.isDragHandlerCell"
       :item="{ data: { row: cell.row, question: question } }"
-    ></sv-matrix-drag-drop-icon>
-    <sv-action-bar
+    ></SvComponent>
+    <SvComponent
+      :is="'sv-action-bar'"
       v-if="cell.isActionsCell"
       :model="cell.item.getData()"
       :handleClick="false"
-    ></sv-action-bar>
-    <component
+    ></SvComponent>
+    <SvComponent
       v-if="cell.hasPanel"
       :is="panelComponentName"
       v-bind="panelComponentData"
-    ></component>
+    ></SvComponent>
     <span v-if="cell.showResponsiveTitle" :class="cell.responsiveTitleCss">
-      <survey-string :locString="cell.responsiveLocTitle" />
+      <SvComponent :is="'survey-string'" :locString="cell.responsiveLocTitle" />
     </span>
     <div
       v-if="cell.hasQuestion"
       :class="cell.cellQuestionWrapperClassName"
       v-show="isVisible"
     >
-      <component
+      <SvComponent
         v-if="!cell.isChoice && cell.question.isDefaultRendering()"
         :is="question.getCellWrapperComponentName(cell.cell)"
         :componentData="question.getCellWrapperComponentData(cell.cell)"
       >
-        <component
+        <SvComponent
           :is="getComponentName(cell.question)"
           :question="cell.question"
         />
-      </component>
-      <component
+      </SvComponent>
+      <SvComponent
         v-if="!cell.isChoice && !cell.question.isDefaultRendering()"
         :is="cell.question.getComponentName()"
         :question="cell.question"
       />
-      <component
+      <SvComponent
         v-if="cell.isItemChoice"
         :is="question.getCellWrapperComponentName(cell.cell)"
         :componentData="question.getCellWrapperComponentData(cell.cell)"
       >
-        <survey-radiogroup-item
+        <SvComponent
+          :is="'survey-radiogroup-item'"
           v-if="cell.isRadio"
           :key="cell.item.value"
           :question="cell.question"
           :item="cell.item"
           :hideLabel="true"
-        ></survey-radiogroup-item>
-        <survey-checkbox-item
+        ></SvComponent>
+        <SvComponent
+          :is="'survey-checkbox-item'"
           v-if="cell.isCheckbox"
           :key="cell.item.value"
           :question="cell.question"
           :item="cell.item"
           :hideLabel="true"
-        ></survey-checkbox-item>
-      </component>
-      <survey-other-choice
+        ></SvComponent>
+      </SvComponent>
+      <SvComponent
+        :is="'survey-other-choice'"
         v-if="cell.isOtherChoice"
         :question="cell.question"
       />
     </div>
     <template v-if="cell.hasTitle">
-      <component
+      <SvComponent
         :is="question.getCellWrapperComponentName(cell)"
         :componentData="question.getCellWrapperComponentData(cell)"
       >
-        <survey-string v-if="cell.hasTitle" :locString="cell.locTitle" />
+        <SvComponent
+          :is="'survey-string'"
+          v-if="cell.hasTitle"
+          :locString="cell.locTitle"
+        />
         <span
           v-if="!!cell.requiredText"
           :class="question.cssClasses.cellRequiredText"
           >{{ cell.requiredText }}</span
         >
-      </component>
+      </SvComponent>
     </template>
   </td>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type {
   Question,
   QuestionMatrixDropdownRenderedCell,
@@ -103,13 +117,11 @@ const props = defineProps<{
 const isVisible = ref(false);
 const root = ref<HTMLElement>();
 
-const getHeaders = () => props.cell.headers;
 const getCellStyle = () => {
   if (!!props.cell.width || !!props.cell.minWidth)
     return { width: props.cell.width, minWidth: props.cell.minWidth };
   return null;
 };
-const getCellIndex = () => (props.cell as any).index || "";
 const onVisibilityChanged = () => {
   if (!props.cell.hasQuestion || !props.question || !props.question.survey)
     return;
@@ -139,7 +151,7 @@ onMounted(() => {
     cQ.afterRenderCore(el);
   }
 });
-const panelComponentName = computed(() => {
+const panelComponentName = computed<string>(() => {
   const cell = props.cell;
   if (cell.hasPanel) {
     const panel = cell.panel;
@@ -152,7 +164,7 @@ const panelComponentName = computed(() => {
     }
     return "survey-panel";
   }
-  return undefined;
+  return undefined as any;
 });
 const panelComponentData = computed(() => {
   const cell = props.cell;
diff --git a/packages/survey-vue3-ui/src/MatrixDynamic.vue b/packages/survey-vue3-ui/src/MatrixDynamic.vue
index 11ff5e9275..7055604b5b 100644
--- a/packages/survey-vue3-ui/src/MatrixDynamic.vue
+++ b/packages/survey-vue3-ui/src/MatrixDynamic.vue
@@ -9,11 +9,15 @@
         :class="question.getAddRowButtonCss()"
         @click="addRowClick"
       >
-        <survey-string :locString="question.locAddRowText" />
+        <SvComponent
+          :is="'survey-string'"
+          :locString="question.locAddRowText"
+        />
         <span :class="question.cssClasses.iconAdd"></span>
       </button>
     </div>
-    <survey-matrixtable
+    <SvComponent
+      :is="'survey-matrixtable'"
       v-if="question.renderedTable.showTable"
       :question="question"
     />
@@ -22,7 +26,10 @@
       :class="question.cssClasses.emptyRowsSection"
     >
       <div :class="question.cssClasses.emptyRowsText">
-        <survey-string :locString="question.locEmptyRowsText" />
+        <SvComponent
+          :is="'survey-string'"
+          :locString="question.locEmptyRowsText"
+        />
       </div>
       <button
         v-if="question.renderedTable.showAddRow"
@@ -30,7 +37,10 @@
         :class="question.getAddRowButtonCss(true)"
         @click="addRowClick"
       >
-        <survey-string :locString="question.locAddRowText" />
+        <SvComponent
+          :is="'survey-string'"
+          :locString="question.locAddRowText"
+        />
         <span :class="question.cssClasses.iconAdd"></span>
       </button>
     </div>
@@ -43,7 +53,10 @@
         :class="question.getAddRowButtonCss()"
         @click="addRowClick"
       >
-        <survey-string :locString="question.locAddRowText" />
+        <SvComponent
+          :is="'survey-string'"
+          :locString="question.locAddRowText"
+        />
         <span :class="question.cssClasses.iconAdd"></span>
       </button>
     </div>
@@ -51,6 +64,7 @@
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionMatrixDynamicModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/MatrixRow.vue b/packages/survey-vue3-ui/src/MatrixRow.vue
index a9930390cb..b1230f8edb 100644
--- a/packages/survey-vue3-ui/src/MatrixRow.vue
+++ b/packages/survey-vue3-ui/src/MatrixRow.vue
@@ -6,7 +6,8 @@
     v-if="row.visible"
     ref="root"
   >
-    <survey-matrixdropdown-cell
+    <SvComponent
+      :is="'survey-matrixdropdown-cell'"
       :cell="cell"
       :question="question"
       v-for="(cell, cellIndex) in row.cells"
@@ -15,6 +16,7 @@
   </tr>
 </template>
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type {
   QuestionMatrixDropdownRenderedRow,
   QuestionMatrixDropdownModel,
diff --git a/packages/survey-vue3-ui/src/MatrixTable.vue b/packages/survey-vue3-ui/src/MatrixTable.vue
index 249d04e743..13261c94d6 100644
--- a/packages/survey-vue3-ui/src/MatrixTable.vue
+++ b/packages/survey-vue3-ui/src/MatrixTable.vue
@@ -13,17 +13,18 @@
               :class="cell.className"
               :style="{ minWidth: cell.minWidth, width: cell.width }"
             >
-              <component
+              <SvComponent
                 :is="question.getColumnHeaderWrapperComponentName(cell as any)"
                 :componentData="question.getColumnHeaderWrapperComponentData(cell as any)"
               >
-                <survey-string :locString="cell.locTitle" />
-                <survey-matrixheaderrequired
+                <SvComponent :is="'survey-string'" :locString="cell.locTitle" />
+                <SvComponent
+                  :is="'survey-matrixheaderrequired'"
                   v-if="!!cell.column"
                   :column="cell.column"
                   :question="question"
-                ></survey-matrixheaderrequired>
-              </component>
+                ></SvComponent>
+              </SvComponent>
             </th>
             <td
               v-if="!cell.hasTitle"
@@ -39,15 +40,17 @@
           v-for="row in table.renderedRows"
           :key="question.inputId + '_' + row.id"
         >
-          <survey-matrix-row
+          <SvComponent
+            :is="'survey-matrix-row'"
             :row="row"
             :question="question"
-          ></survey-matrix-row>
+          ></SvComponent>
         </template>
       </tbody>
       <tfoot v-if="table.showFooter">
         <tr>
-          <survey-matrixdropdown-cell
+          <SvComponent
+            :is="'survey-matrixdropdown-cell'"
             :cell="cell"
             :question="question"
             v-for="(cell, cellIndex) in table.footerRow.cells"
@@ -60,8 +63,9 @@
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionMatrixDropdownModelBase } from "survey-core";
-import { computed, getCurrentInstance } from "vue";
+import { computed } from "vue";
 import { useBase } from "./base";
 
 const props = defineProps<{ question: QuestionMatrixDropdownModelBase }>();
diff --git a/packages/survey-vue3-ui/src/Multipletext.vue b/packages/survey-vue3-ui/src/Multipletext.vue
index d285c243e4..7e56b905a9 100644
--- a/packages/survey-vue3-ui/src/Multipletext.vue
+++ b/packages/survey-vue3-ui/src/Multipletext.vue
@@ -11,10 +11,11 @@
             :key="'item' + cell.item.editor.id"
             :class="cell.className"
           >
-            <survey-multipletext-item
+            <SvComponent
+              :is="'survey-multipletext-item'"
               :question="question"
               :cell="cell"
-            ></survey-multipletext-item>
+            ></SvComponent>
           </td>
         </tr>
       </template>
@@ -23,6 +24,7 @@
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionMultipleTextModel } from "survey-core";
 import { useComputedArray, useQuestion } from "./base";
 import { ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/MultipletextItem.vue b/packages/survey-vue3-ui/src/MultipletextItem.vue
index 250cf89820..0fdbbfa61a 100644
--- a/packages/survey-vue3-ui/src/MultipletextItem.vue
+++ b/packages/survey-vue3-ui/src/MultipletextItem.vue
@@ -1,23 +1,45 @@
 <template>
   <label v-if="!cell.isErrorsCell" :class="question.getItemLabelCss(item)">
-    <span :class="question.getItemTitleCss()"
-      :style="{ minWidth: question.itemTitleWidth, width: question.itemTitleWidth }">
-      <span v-if="item.editor.isRequireTextBeforeTitle ||
-        item.editor.isRequireTextOnStart
-        " :class="question.cssClasses.requiredText">{{ item.editor.requiredText }}</span>
-      <survey-string :locString="item.locTitle" />
+    <span
+      :class="question.getItemTitleCss()"
+      :style="{
+        minWidth: question.itemTitleWidth,
+        width: question.itemTitleWidth,
+      }"
+    >
+      <span
+        v-if="
+          item.editor.isRequireTextBeforeTitle ||
+          item.editor.isRequireTextOnStart
+        "
+        :class="question.cssClasses.requiredText"
+        >{{ item.editor.requiredText }}</span
+      >
+      <SvComponent :is="'survey-string'" :locString="item.locTitle" />
       <span v-if="item.editor.isRequireTextAfterTitle">&nbsp;</span>
-      <span v-if="item.editor.isRequireTextAfterTitle" aria-hidden="true" :class="question.cssClasses.requiredText">{{
-        item.editor.requiredText }}</span>
+      <span
+        v-if="item.editor.isRequireTextAfterTitle"
+        aria-hidden="true"
+        :class="question.cssClasses.requiredText"
+        >{{ item.editor.requiredText }}</span
+      >
     </span>
-    <div :key="item.editor.id" :class="question.getItemCss()" v-on:focusin="item.focusIn()">
-      <component :is="getComponentName(item.editor)" :question="item.editor" />
+    <div
+      :key="item.editor.id"
+      :class="question.getItemCss()"
+      v-on:focusin="item.focusIn()"
+    >
+      <SvComponent
+        :is="getComponentName(item.editor)"
+        :question="item.editor"
+      />
     </div>
   </label>
-  <survey-errors v-else :element="item.editor" />
+  <SvComponent :is="'survey-errors'" v-else :element="item.editor" />
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type {
   Question,
   QuestionMultipleTextModel,
diff --git a/packages/survey-vue3-ui/src/Notifier.vue b/packages/survey-vue3-ui/src/Notifier.vue
index 8adbb8b3d9..3cefee21b3 100644
--- a/packages/survey-vue3-ui/src/Notifier.vue
+++ b/packages/survey-vue3-ui/src/Notifier.vue
@@ -7,11 +7,12 @@
     aria-live="polite"
   >
     <span>{{ model.message }}</span>
-    <sv-action-bar :model="model.actionBar"></sv-action-bar>
+    <SvComponent :is="'sv-action-bar'" :model="model.actionBar"></SvComponent>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { Notifier } from "survey-core";
 import { useBase } from "./base";
 
diff --git a/packages/survey-vue3-ui/src/Page.vue b/packages/survey-vue3-ui/src/Page.vue
index 149ac8a970..b9e7003aba 100644
--- a/packages/survey-vue3-ui/src/Page.vue
+++ b/packages/survey-vue3-ui/src/Page.vue
@@ -1,24 +1,26 @@
 <template>
   <div :class="page.cssRoot" ref="root">
-    <survey-element-title :element="page" :css="css" />
+    <SvComponent :is="'survey-element-title'" :element="page" :css="css" />
     <div v-if="showDescription" :class="page.cssClasses.page.description">
-      <survey-string :locString="page.locDescription" />
+      <SvComponent :is="'survey-string'" :locString="page.locDescription" />
     </div>
-    <survey-errors :element="page" />
+    <SvComponent :is="'survey-errors'" :element="page" />
     <template v-for="row in page.visibleRows" :key="row.id">
-      <component
+      <SvComponent
         :is="(page.getSurvey() as SurveyModel).getRowWrapperComponentName(row)"
         v-bind="{
             componentData: (page.getSurvey() as SurveyModel).getRowWrapperComponentData(row),
           }"
       >
-        <survey-row :row="row" :survey="survey" :css="css"> </survey-row>
-      </component>
+        <SvComponent :is="'survey-row'" :row="row" :survey="survey" :css="css">
+        </SvComponent>
+      </SvComponent>
     </template>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { SurveyModel } from "survey-core";
 import type { PageModel } from "survey-core";
 import { computed, onMounted, ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/Panel.vue b/packages/survey-vue3-ui/src/Panel.vue
index 2d9967b8c7..1b10b6c8c5 100644
--- a/packages/survey-vue3-ui/src/Panel.vue
+++ b/packages/survey-vue3-ui/src/Panel.vue
@@ -6,13 +6,22 @@
     @focusin="element.focusIn()"
     ref="root"
   >
-    <survey-errors :element="element" v-if="element.showErrorsAbovePanel" />
-    <survey-element-header
+    <SvComponent
+      :is="'survey-errors'"
+      :element="element"
+      v-if="element.showErrorsAbovePanel"
+    />
+    <SvComponent
+      :is="'survey-element-header'"
       v-if="element.hasTitle || element.hasDescription"
       :element="element"
       :css="css"
-    ></survey-element-header>
-    <survey-errors :element="element" v-if="!element.showErrorsAbovePanel" />
+    ></SvComponent>
+    <SvComponent
+      :is="'survey-errors'"
+      :element="element"
+      v-if="!element.showErrorsAbovePanel"
+    />
     <div
       :id="element.contentId"
       :style="{ paddingLeft: element.innerPaddingLeft }"
@@ -20,16 +29,25 @@
       :class="element.cssClasses.panel.content"
     >
       <template v-for="row in element.visibleRows" :key="row.id">
-        <component
+        <SvComponent
           :is="(element.getSurvey() as SurveyModel).getRowWrapperComponentName(row)"
           v-bind="{
             componentData: (element.getSurvey() as SurveyModel).getRowWrapperComponentData(row),
           }"
         >
-          <survey-row :row="row" :survey="survey" :css="css"> </survey-row>
-        </component>
+          <SvComponent
+            :is="'survey-row'"
+            :row="row"
+            :survey="survey"
+            :css="css"
+          >
+          </SvComponent>
+        </SvComponent>
       </template>
-      <sv-action-bar :model="element.getFooterToolbar()"></sv-action-bar>
+      <SvComponent
+        :is="'sv-action-bar'"
+        :model="element.getFooterToolbar()"
+      ></SvComponent>
     </div>
   </div>
 </template>
@@ -40,6 +58,7 @@ export default {
 };
 </script>
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { PanelModel, SurveyModel } from "survey-core";
 import { ref, computed, onMounted } from "vue";
 import { useBase } from "./base";
diff --git a/packages/survey-vue3-ui/src/PanelDynamic.vue b/packages/survey-vue3-ui/src/PanelDynamic.vue
index 00b545ea25..bec81b3d4c 100644
--- a/packages/survey-vue3-ui/src/PanelDynamic.vue
+++ b/packages/survey-vue3-ui/src/PanelDynamic.vue
@@ -5,9 +5,12 @@
       :class="question.cssClasses.noEntriesPlaceholder"
     >
       <span>
-        <survey-string :locString="question.locNoEntriesText"></survey-string>
+        <SvComponent
+          :is="'survey-string'"
+          :locString="question.locNoEntriesText"
+        ></SvComponent>
       </span>
-      <sv-paneldynamic-add-btn :data="{ question }" />
+      <SvComponent :is="'sv-paneldynamic-add-btn'" :data="{ question }" />
     </div>
     <div
       :class="question.cssClasses.progress"
@@ -23,7 +26,8 @@
         role="progressbar"
       ></div>
     </div>
-    <survey-paneldynamicprogress
+    <SvComponent
+      :is="'survey-paneldynamicprogress'"
       v-if="getShowLegacyNavigation() && question.isProgressTopShowing"
       :question="question"
     />
@@ -33,11 +37,12 @@
         :key="panel.id"
       >
         <div :class="question.getPanelWrapperCss(panel)">
-          <component
+          <SvComponent
             :is="getPanelComponentName(panel)"
             v-bind="getPanelComponentData(panel)"
-          ></component>
-          <sv-paneldynamic-remove-btn
+          ></SvComponent>
+          <SvComponent
+            :is="'sv-paneldynamic-remove-btn'"
             v-if="
               question.panelRemoveButtonLocation === 'right' &&
               question.canRemovePanel &&
@@ -55,15 +60,18 @@
         />
       </template>
     </div>
-    <survey-paneldynamicprogress
+    <SvComponent
+      :is="'survey-paneldynamicprogress'"
       v-if="getShowLegacyNavigation() && question.isProgressBottomShowing"
       :question="question"
     />
-    <sv-paneldynamic-add-btn
+    <SvComponent
+      :is="'sv-paneldynamic-add-btn'"
       v-if="getShowLegacyNavigation() && question.isRenderModeList"
       :data="{ question }"
     />
-    <survey-paneldynamicprogress-v2
+    <SvComponent
+      :is="'survey-paneldynamicprogress-v2'"
       v-if="question.showNavigation"
       :question="question"
     />
@@ -71,13 +79,14 @@
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type {
   PanelModel,
   QuestionPanelDynamicModel,
   SurveyModel,
 } from "survey-core";
 import { useQuestion } from "./base";
-import { computed, getCurrentInstance, ref } from "vue";
+import { getCurrentInstance, ref } from "vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionPanelDynamicModel; css?: any }>();
 const root = ref(null);
diff --git a/packages/survey-vue3-ui/src/PanelDynamicProgress.vue b/packages/survey-vue3-ui/src/PanelDynamicProgress.vue
index dd110cfbbc..9b3d692e0b 100644
--- a/packages/survey-vue3-ui/src/PanelDynamicProgress.vue
+++ b/packages/survey-vue3-ui/src/PanelDynamicProgress.vue
@@ -2,7 +2,10 @@
   <div :class="getCssClass()">
     <div style="clear: both" :class="getCssClass()">
       <div :class="question.cssClasses.progressContainer">
-        <sv-paneldynamic-prev-btn :data="{ question: question }" />
+        <SvComponent
+          :is="'sv-paneldynamic-prev-btn'"
+          :data="{ question: question }"
+        />
         <div
           :class="question.cssClasses.progress"
           v-if="question.isRangeShowing"
@@ -13,15 +16,25 @@
             role="progressbar"
           ></div>
         </div>
-        <sv-paneldynamic-next-btn :data="{ question: question }" />
+        <SvComponent
+          :is="'sv-paneldynamic-next-btn'"
+          :data="{ question: question }"
+        />
       </div>
-      <sv-paneldynamic-add-btn :data="{ question: question }" />
-      <sv-paneldynamic-progress-text :data="{ question: question }" />
+      <SvComponent
+        :is="'sv-paneldynamic-add-btn'"
+        :data="{ question: question }"
+      />
+      <SvComponent
+        :is="'sv-paneldynamic-progress-text'"
+        :data="{ question: question }"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionPanelDynamicModel } from "survey-core";
 const props = defineProps<{
   question: QuestionPanelDynamicModel;
diff --git a/packages/survey-vue3-ui/src/PanelDynamicProgressV2.vue b/packages/survey-vue3-ui/src/PanelDynamicProgressV2.vue
index 4434091718..201836a99d 100644
--- a/packages/survey-vue3-ui/src/PanelDynamicProgressV2.vue
+++ b/packages/survey-vue3-ui/src/PanelDynamicProgressV2.vue
@@ -15,12 +15,13 @@
       :class="question.cssClasses.footerButtonsContainer"
       v-if="question.footerToolbar.visibleActions.length"
     >
-      <sv-action-bar :model="question.footerToolbar" />
+      <SvComponent :is="'sv-action-bar'" :model="question.footerToolbar" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionPanelDynamicModel } from "survey-core";
 defineProps<{
   question: QuestionPanelDynamicModel;
diff --git a/packages/survey-vue3-ui/src/PopupSurvey.vue b/packages/survey-vue3-ui/src/PopupSurvey.vue
index 48cf3a093c..3c5b712995 100644
--- a/packages/survey-vue3-ui/src/PopupSurvey.vue
+++ b/packages/survey-vue3-ui/src/PopupSurvey.vue
@@ -1,39 +1,88 @@
 <template>
-  <div v-if="surveyWindow.isShowing" :style="{ maxWidth: surveyWindow.renderedWidth, width: surveyWindow.renderedWidth }"
-    :class="surveyWindow.cssRoot" @scroll="doScroll">
+  <div
+    v-if="surveyWindow.isShowing"
+    :style="{
+      maxWidth: surveyWindow.renderedWidth,
+      width: surveyWindow.renderedWidth,
+    }"
+    :class="surveyWindow.cssRoot"
+    @scroll="doScroll"
+  >
     <div :class="surveyWindow.cssRootContent">
       <div :class="cssHeaderRoot()">
-        <div v-if="surveyWindow.isCollapsed && !!surveyWindow.locTitle" :class="surveyWindow.cssHeaderTitleCollapsed">
+        <div
+          v-if="surveyWindow.isCollapsed && !!surveyWindow.locTitle"
+          :class="surveyWindow.cssHeaderTitleCollapsed"
+        >
           {{ surveyWindow.locTitle.renderedHtml }}
         </div>
 
         <div :class="surveyWindow.cssHeaderButtonsContainer">
-          <div v-if="surveyWindow.allowFullScreen" :class="surveyWindow.cssHeaderFullScreenButton" @click="doToggleFullScreen">
-            <sv-svg-icon v-if="surveyWindow.isFullScreen" :iconName="'icon-back-to-panel_16x16'" :size="16"> </sv-svg-icon>
-            <sv-svg-icon v-if="!surveyWindow.isFullScreen" :iconName="'icon-full-screen_16x16'" :size="16"> </sv-svg-icon>
+          <div
+            v-if="surveyWindow.allowFullScreen"
+            :class="surveyWindow.cssHeaderFullScreenButton"
+            @click="doToggleFullScreen"
+          >
+            <SvComponent
+              :is="'sv-svg-icon'"
+              v-if="surveyWindow.isFullScreen"
+              :iconName="'icon-back-to-panel_16x16'"
+              :size="16"
+            >
+            </SvComponent>
+            <SvComponent
+              :is="'sv-svg-icon'"
+              v-if="!surveyWindow.isFullScreen"
+              :iconName="'icon-full-screen_16x16'"
+              :size="16"
+            >
+            </SvComponent>
           </div>
 
           <div :class="surveyWindow.cssHeaderCollapseButton" @click="doExpand">
-            <sv-svg-icon v-if="surveyWindow.isExpanded" :iconName="'icon-minimize_16x16'" :size="16"> </sv-svg-icon>
-            <sv-svg-icon v-if="surveyWindow.isCollapsed" :iconName="'icon-restore_16x16'" :size="16"> </sv-svg-icon>
+            <SvComponent
+              :is="'sv-svg-icon'"
+              v-if="surveyWindow.isExpanded"
+              :iconName="'icon-minimize_16x16'"
+              :size="16"
+            >
+            </SvComponent>
+            <SvComponent
+              :is="'sv-svg-icon'"
+              v-if="surveyWindow.isCollapsed"
+              :iconName="'icon-restore_16x16'"
+              :size="16"
+            >
+            </SvComponent>
           </div>
 
-          <div v-if="surveyWindow.allowClose" :class="surveyWindow.cssHeaderCloseButton" @click="doHide">
-            <sv-svg-icon :iconName="'icon-close_16x16'" :size="16"> </sv-svg-icon>
+          <div
+            v-if="surveyWindow.allowClose"
+            :class="surveyWindow.cssHeaderCloseButton"
+            @click="doHide"
+          >
+            <SvComponent
+              :is="'sv-svg-icon'"
+              :iconName="'icon-close_16x16'"
+              :size="16"
+            >
+            </SvComponent>
           </div>
         </div>
       </div>
       <div :class="surveyWindow.cssBody">
-        <component :is="getSurveyComponentName()" :survey="survey"> </component>
+        <SurveyComponent :survey="survey"></SurveyComponent>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { PopupSurveyModel, type SurveyModel } from "survey-core";
-import { shallowRef, type ShallowRef, watch, computed, onUnmounted } from "vue";
+import { shallowRef, type ShallowRef, watch, onUnmounted } from "vue";
 import { useBase } from "./base";
+import SurveyComponent from "./Survey.vue";
 
 const props = defineProps<{
   survey: SurveyModel;
@@ -45,33 +94,19 @@ const props = defineProps<{
 }>();
 const surveyWindow =
   shallowRef<PopupSurveyModel>() as ShallowRef<PopupSurveyModel>;
-const css = computed(() => {
-  return props.survey ? props.survey.getCss() : {};
-});
-const expandedCss = computed(() => {
-  return surveyWindow.value?.isExpanded
-    ? css.value.window.header.buttonCollapsed
-    : css.value.window.header.buttonExpanded;
-});
-const isExpandedSurvey = computed(() => {
-  return surveyWindow.value?.isExpanded as boolean;
-});
 
 const doExpand = () => {
   surveyWindow.value.changeExpandCollapse();
 };
 const doHide = () => {
   surveyWindow.value.hide();
-  if (!!props.onClose) {
+  if (props.onClose) {
     props.onClose();
   }
 };
 const doToggleFullScreen = () => {
   surveyWindow.value.toggleFullScreen();
 };
-const getSurveyComponentName = () => {
-  return "SurveyComponent";
-};
 const doScroll = () => {
   surveyWindow.value.onScroll();
 };
@@ -82,7 +117,7 @@ const cssHeaderRoot = () => {
     headerCss += " " + surveyWindow.value.cssRootCollapsedMod;
   }
   return headerCss;
-}
+};
 
 useBase(() => surveyWindow.value);
 
diff --git a/packages/survey-vue3-ui/src/Question.vue b/packages/survey-vue3-ui/src/Question.vue
index abfa3c338d..793d467c85 100644
--- a/packages/survey-vue3-ui/src/Question.vue
+++ b/packages/survey-vue3-ui/src/Question.vue
@@ -13,36 +13,43 @@
     :aria-expanded="element.ariaExpanded"
     :data-name="element.name"
   >
-    <survey-errors
+    <SvComponent
+      :is="'survey-errors'"
       v-if="element.showErrorsAboveQuestion"
       :element="element"
       :location="'top'"
     />
-    <survey-element-header
+    <SvComponent
+      :is="'survey-element-header'"
       v-if="element.hasTitleOnLeftTop"
       :element="element"
       :css="css"
     />
-    <component :is="contentComponentName" v-bind="contentComponentData">
+    <SvComponent :is="contentComponentName" v-bind="contentComponentData">
       <div
         :class="getContentClass(element) || undefined"
         :style="{ display: !element.renderedIsExpanded ? 'none' : undefined }"
         role="presentation"
       >
-        <survey-errors
+        <SvComponent
+          :is="'survey-errors'"
           v-if="hasErrorsOnTop"
           :element="element"
           :location="'top'"
         />
 
-        <component :is="componentName" :question="element" />
+        <SvComponent :is="componentName" :question="element" />
         <div v-if="element.hasComment" :class="element.getCommentAreaCss()">
           <div>
-            <survey-string :locString="element.locCommentText" />
+            <SvComponent
+              :is="'survey-string'"
+              :locString="element.locCommentText"
+            />
           </div>
-          <survey-question-comment :question="element" />
+          <SvComponent :is="'survey-question-comment'" :question="element" />
         </div>
-        <survey-errors
+        <SvComponent
+          :is="'survey-errors'"
           v-if="hasErrorsOnBottom"
           :element="element"
           :location="'bottom'"
@@ -52,16 +59,21 @@
           :class="element.cssClasses.descriptionUnderInput"
           :id="element.ariaDescriptionId"
         >
-          <survey-string :locString="element.locDescription" />
+          <SvComponent
+            :is="'survey-string'"
+            :locString="element.locDescription"
+          />
         </div>
       </div>
-    </component>
-    <survey-element-header
+    </SvComponent>
+    <SvComponent
+      :is="'survey-element-header'"
       v-if="element.hasTitleOnBottom"
       :element="element"
       :css="css"
     />
-    <survey-errors
+    <SvComponent
+      :is="'survey-errors'"
       v-if="element.showErrorsBelowQuestion"
       :element="element"
       :location="'bottom'"
@@ -76,6 +88,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { SurveyModel, Question } from "survey-core";
 import { useBase } from "./base";
 import { computed, onUnmounted, ref, watch } from "vue";
diff --git a/packages/survey-vue3-ui/src/QuestionComment.vue b/packages/survey-vue3-ui/src/QuestionComment.vue
index 96db8ba2ce..3a11935da5 100644
--- a/packages/survey-vue3-ui/src/QuestionComment.vue
+++ b/packages/survey-vue3-ui/src/QuestionComment.vue
@@ -1,9 +1,15 @@
 <template>
   <div v-if="question.isReadOnlyRenderDiv()">{{ question.comment }}</div>
-  <sv-text-area v-else :model="question.commentTextAreaModel"></sv-text-area>
+
+  <SvComponent
+    :is="'sv-text-area'"
+    v-else
+    :model="question.commentTextAreaModel"
+  ></SvComponent>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "./SvComponent.vue";
 import type { Question } from "survey-core";
 defineProps<{
   question: Question;
diff --git a/packages/survey-vue3-ui/src/QuestionOther.vue b/packages/survey-vue3-ui/src/QuestionOther.vue
index 846765b7e5..bfdcad4a19 100644
--- a/packages/survey-vue3-ui/src/QuestionOther.vue
+++ b/packages/survey-vue3-ui/src/QuestionOther.vue
@@ -1,13 +1,17 @@
 <template>
   <div :class="question.getCommentAreaCss(true)">
     <div v-if="question.isReadOnlyRenderDiv()">{{ question.otherValue }}</div>
-    <sv-text-area v-else :model="question.otherTextAreaModel"></sv-text-area>
+    <SvComponent
+      :is="'sv-text-area'"
+      v-else
+      :model="question.otherTextAreaModel"
+    ></SvComponent>
   </div>
 </template>
 
 <script lang="ts" setup>
 import type { Question } from "survey-core";
-
+import SvComponent from "./SvComponent.vue";
 defineProps<{
   question: Question;
 }>();
diff --git a/packages/survey-vue3-ui/src/RadiogroupItem.vue b/packages/survey-vue3-ui/src/RadiogroupItem.vue
index cf11f597f7..14a77efb55 100644
--- a/packages/survey-vue3-ui/src/RadiogroupItem.vue
+++ b/packages/survey-vue3-ui/src/RadiogroupItem.vue
@@ -22,13 +22,14 @@
           <use :xlink:href="question.itemSvgIcon"></use>
         </svg> </span
       ><span v-if="!hideLabel" :class="getControlLabelClass(item)">
-        <survey-string :locString="item.locText" />
+        <SvComponent :is="'survey-string'" :locString="item.locText" />
       </span>
     </label>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { ItemValue, QuestionRadiogroupModel } from "survey-core";
 import { computed, ref } from "vue";
 import { useSelectBaseItem } from "./selectbase-item";
diff --git a/packages/survey-vue3-ui/src/Ranking.vue b/packages/survey-vue3-ui/src/Ranking.vue
index 5b955f5907..24a31693a0 100644
--- a/packages/survey-vue3-ui/src/Ranking.vue
+++ b/packages/survey-vue3-ui/src/Ranking.vue
@@ -1,12 +1,12 @@
 <template>
   <div :class="question.rootClass" ref="root">
     <template v-if="!question.selectToRankEnabled">
-      <component
+      <SvComponent
         v-for="(item, index) in question.renderedRankingChoices"
         :key="item.value + '-' + index + '-item'"
         :is="getItemValueComponentName(item)"
         v-bind="getItemValueComponentData(item, index)"
-      ></component>
+      ></SvComponent>
     </template>
 
     <div
@@ -14,20 +14,21 @@
       :class="question.getContainerClasses('from')"
       data-ranking="from-container"
     >
-      <component
+      <SvComponent
         v-for="(item, index) in question.renderedUnRankingChoices"
         :key="item.value + '-' + index + '-item'"
         :is="getItemValueComponentName(item)"
         v-bind="getItemValueComponentData(item, index, true)"
-      ></component>
+      ></SvComponent>
 
       <div
         v-if="question.renderedUnRankingChoices.length === 0"
         :class="question.cssClasses.containerPlaceholder"
       >
-        <survey-string
+        <SvComponent
+          :is="'survey-string'"
           :locString="question.locSelectToRankEmptyRankedAreaText"
-        ></survey-string>
+        ></SvComponent>
       </div>
     </div>
 
@@ -41,26 +42,28 @@
       :class="question.getContainerClasses('to')"
       data-ranking="to-container"
     >
-      <component
+      <SvComponent
         v-for="(item, index) in question.renderedRankingChoices"
         :key="item.value + '-' + index + '-item'"
         :is="getItemValueComponentName(item)"
         v-bind="getItemValueComponentData(item, index)"
-      ></component>
+      ></SvComponent>
 
       <div
         v-if="question.renderedRankingChoices.length === 0"
         :class="question.cssClasses.containerPlaceholder"
       >
-        <survey-string
+        <SvComponent
+          :is="'survey-string'"
           :locString="question.locSelectToRankEmptyUnrankedAreaText"
-        ></survey-string>
+        ></SvComponent>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { ItemValue, QuestionRankingModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/RankingItem.vue b/packages/survey-vue3-ui/src/RankingItem.vue
index 8dbf0f5926..ed4e234f32 100644
--- a/packages/survey-vue3-ui/src/RankingItem.vue
+++ b/packages/survey-vue3-ui/src/RankingItem.vue
@@ -52,18 +52,19 @@
             <use :xlink:href="question.dashSvgIcon"></use>
           </svg>
         </div>
-        <component :is="question.itemComponent" :item="item" :cssClasses="question.cssClasses"></component>
+        <SvComponent
+          :is="question.itemComponent"
+          :item="item"
+          :cssClasses="question.cssClasses"
+        ></SvComponent>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import type {
-  ItemValue,
-  LocalizableString,
-  QuestionRankingModel,
-} from "survey-core";
+import SvComponent from "@/SvComponent.vue";
+import type { ItemValue, QuestionRankingModel } from "survey-core";
 import { useBase } from "./base";
 import { computed } from "vue";
 defineOptions({ inheritAttrs: false });
diff --git a/packages/survey-vue3-ui/src/RankingItemContent.vue b/packages/survey-vue3-ui/src/RankingItemContent.vue
index 9f1f7c1e37..12ecd71dd7 100644
--- a/packages/survey-vue3-ui/src/RankingItemContent.vue
+++ b/packages/survey-vue3-ui/src/RankingItemContent.vue
@@ -1,13 +1,14 @@
 <template>
   <div :class="cssClasses.controlLabel">
-    <survey-string :locString="item.locText" />
+    <SvComponent :is="'survey-string'" :locString="item.locText" />
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { ItemValue } from "survey-core";
 defineOptions({ inheritAttrs: false });
-const props = defineProps<{
+defineProps<{
   item: ItemValue;
   cssClasses: any;
 }>();
diff --git a/packages/survey-vue3-ui/src/Rating.vue b/packages/survey-vue3-ui/src/Rating.vue
index fca4b07dbb..a5cf36946f 100644
--- a/packages/survey-vue3-ui/src/Rating.vue
+++ b/packages/survey-vue3-ui/src/Rating.vue
@@ -3,23 +3,30 @@
     <fieldset role="radiogroup">
       <legend role="presentation" class="sv-hidden"></legend>
       <span v-if="question.hasMinLabel" :class="question.cssClasses.minText">
-        <survey-string :locString="question.locMinRateDescription" />
+        <SvComponent
+          :is="'survey-string'"
+          :locString="question.locMinRateDescription"
+        />
       </span>
-      <component
+      <SvComponent
         v-for="(item, index) in question.renderedRateItems"
         :key="getInputId(index)"
         :is="question.itemComponent"
         :item="item"
         :index="index"
         :question="question"
-      ></component>
+      />
       <span v-if="question.hasMaxLabel" :class="question.cssClasses.maxText">
-        <survey-string :locString="question.locMaxRateDescription" />
+        <SvComponent
+          :is="'survey-string'"
+          :locString="question.locMaxRateDescription"
+        />
       </span>
     </fieldset>
   </div>
 </template>
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionRatingModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/RatingDropdown.vue b/packages/survey-vue3-ui/src/RatingDropdown.vue
index f2fc2b9b47..5b799a9560 100644
--- a/packages/survey-vue3-ui/src/RatingDropdown.vue
+++ b/packages/survey-vue3-ui/src/RatingDropdown.vue
@@ -1,10 +1,11 @@
 <template>
   <div :class="question.cssClasses.rootDropdown" ref="root">
-    <sv-dropdown :question="question"></sv-dropdown>
+    <SvComponent :is="'sv-dropdown'" :question="question"></SvComponent>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { ref } from "vue";
 import { useQuestion } from "./base";
 defineOptions({ inheritAttrs: false });
diff --git a/packages/survey-vue3-ui/src/Row.vue b/packages/survey-vue3-ui/src/Row.vue
index c0b54cddc8..cea94e5d05 100644
--- a/packages/survey-vue3-ui/src/Row.vue
+++ b/packages/survey-vue3-ui/src/Row.vue
@@ -1,17 +1,19 @@
 <template>
   <div :class="row.getRowCss()" ref="root">
-    <survey-element
+    <SvComponent
+      :is="'survey-element'"
       :row="row"
       :css="css"
       :element="element"
       v-for="element in row.visibleElements"
       :key="(element as any).id"
-    ></survey-element>
+    ></SvComponent>
   </div>
 </template>
 
 <script lang="ts" setup>
-import type { QuestionRowModel, SurveyElement, SurveyModel } from "survey-core";
+import SvComponent from "@/SvComponent.vue";
+import type { QuestionRowModel, SurveyModel } from "survey-core";
 import { onMounted, ref } from "vue";
 import { useBase } from "./base";
 
diff --git a/packages/survey-vue3-ui/src/SelectBase.vue b/packages/survey-vue3-ui/src/SelectBase.vue
index ef86413d83..2dfa9d1f3b 100644
--- a/packages/survey-vue3-ui/src/SelectBase.vue
+++ b/packages/survey-vue3-ui/src/SelectBase.vue
@@ -14,29 +14,29 @@
       {{ question.locTitle.renderedHtml }}
     </legend>
     <template v-if="question.hasHeadItems">
-      <component
+      <SvComponent
         v-for="item in question.headItems"
         :key="item.value"
         :is="getItemValueComponentName(item)"
         v-bind="getItemValueComponentData(item)"
-      ></component>
+      ></SvComponent>
     </template>
     <template v-if="!question.hasColumns && !question.blockedRow">
-      <component
+      <SvComponent
         v-for="item in question.bodyItems"
         :key="item.value"
         :is="getItemValueComponentName(item)"
         v-bind="getItemValueComponentData(item)"
-      ></component>
+      ></SvComponent>
     </template>
     <div :class="question.cssClasses.rootRow" v-if="question.blockedRow">
       <template v-if="!question.hasColumns && question.blockedRow">
-        <component
+        <SvComponent
           v-for="item in question.dataChoices"
           :key="item.value"
           :is="getItemValueComponentName(item)"
           v-bind="getItemValueComponentData(item)"
-        ></component>
+        ></SvComponent>
       </template>
     </div>
     <div
@@ -50,24 +50,25 @@
           :class="question.getColumnClass()"
           role="presentation"
         >
-          <component
+          <SvComponent
             v-for="item in column"
             :key="item.value"
             :is="getItemValueComponentName(item)"
             v-bind="getItemValueComponentData(item)"
-          ></component>
+          ></SvComponent>
         </div>
       </template>
     </div>
     <template v-if="question.hasFootItems">
-      <component
+      <SvComponent
         v-for="item in question.footItems"
         :key="item.value"
         :is="getItemValueComponentName(item)"
         v-bind="getItemValueComponentData(item)"
-      ></component>
+      ></SvComponent>
     </template>
-    <survey-other-choice
+    <SvComponent
+      :is="'survey-other-choice'"
       v-if="question.renderedValue && question.isOtherSelected"
       :question="question"
     />
@@ -87,6 +88,7 @@
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type {
   ItemValue,
   QuestionCheckboxModel,
diff --git a/packages/survey-vue3-ui/src/Signaturepad.vue b/packages/survey-vue3-ui/src/Signaturepad.vue
index 8c0379f7d0..6a02b9a510 100644
--- a/packages/survey-vue3-ui/src/Signaturepad.vue
+++ b/packages/survey-vue3-ui/src/Signaturepad.vue
@@ -10,9 +10,10 @@
       :class="question.cssClasses.placeholder"
       v-show="question.needShowPlaceholder()"
     >
-      <survey-string
+      <SvComponent
+        :is="'survey-string'"
         :locString="question.locRenderedPlaceholder"
-      ></survey-string>
+      ></SvComponent>
     </div>
     <div>
       <img
@@ -44,23 +45,25 @@
         "
       >
         <span v-if="!question.cssClasses.clearButtonIconId">✖</span>
-        <sv-svg-icon
+        <SvComponent
+          :is="'sv-svg-icon'"
           v-if="question.cssClasses.clearButtonIconId"
           :iconName="question.cssClasses.clearButtonIconId"
           :size="'auto'"
-        ></sv-svg-icon>
+        ></SvComponent>
       </button>
     </div>
     <div
       :class="question.cssClasses.loadingIndicator"
       v-if="question.showLoadingIndicator"
     >
-      <sv-loading-indicator></sv-loading-indicator>
+      <SvComponent :is="'sv-loading-indicator'" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionSignaturePadModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/String.vue b/packages/survey-vue3-ui/src/String.vue
index 740422c06d..a4766cfcff 100644
--- a/packages/survey-vue3-ui/src/String.vue
+++ b/packages/survey-vue3-ui/src/String.vue
@@ -1,8 +1,9 @@
 <template>
-  <component :is="locString.renderAs" :locString="locString.renderAsData" />
+  <SvComponent :is="locString.renderAs" :locString="locString.renderAsData" />
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { LocalizableString } from "survey-core";
 defineProps<{
   locString: LocalizableString;
diff --git a/packages/survey-vue3-ui/src/StringViewer.vue b/packages/survey-vue3-ui/src/StringViewer.vue
index fa967dc2c6..8901597ef9 100644
--- a/packages/survey-vue3-ui/src/StringViewer.vue
+++ b/packages/survey-vue3-ui/src/StringViewer.vue
@@ -14,5 +14,7 @@ const props = defineProps<{
   locString: LocalizableString;
 }>();
 const renderedHtml = useLocString(() => props.locString);
-const className = props.locString.allowLineBreaks ? "sv-string-viewer sv-string-viewer--multiline" : "sv-string-viewer";
+const className = props.locString.allowLineBreaks
+  ? "sv-string-viewer sv-string-viewer--multiline"
+  : "sv-string-viewer";
 </script>
diff --git a/packages/survey-vue3-ui/src/Survey.vue b/packages/survey-vue3-ui/src/Survey.vue
index 334bdbc03b..dc3ca54a27 100644
--- a/packages/survey-vue3-ui/src/Survey.vue
+++ b/packages/survey-vue3-ui/src/Survey.vue
@@ -2,12 +2,16 @@
   <div
     :class="vueSurvey.getRootCss()"
     :style="vueSurvey.themeVariables"
-    :lang="vueSurvey.locale || 'en'" :dir="vueSurvey.localeDir"
+    :lang="vueSurvey.locale || 'en'"
+    :dir="vueSurvey.localeDir"
     ref="root"
   >
-    <sv-svg-bundle v-if="vueSurvey.needRenderIcons"></sv-svg-bundle>
+    <SvComponent
+      :is="'sv-svg-bundle'"
+      v-if="vueSurvey.needRenderIcons"
+    ></SvComponent>
     <div :class="vueSurvey.wrapperFormCss">
-      <survey-popup-modal></survey-popup-modal>
+      <SvComponent :is="'survey-popup-modal'" />
       <div
         v-if="vueSurvey.renderBackgroundImage"
         :class="css.rootBackgroundImage"
@@ -16,77 +20,89 @@
       <form onsubmit="return false;">
         <div v-if="!vueSurvey.hasLogo" class="sv_custom_header"></div>
         <div :class="css.container">
-          <survey-header
+          <SvComponent
+            :is="'survey-header'"
             v-if="vueSurvey.headerView === 'basic'"
             :survey="vueSurvey"
           />
-          <component
+          <SvComponent
             :is="'sv-components-container'"
             :survey="vueSurvey"
             :container="'header'"
             :needRenderWrapper="false"
-          ></component>
+          ></SvComponent>
           <template v-if="vueSurvey.isShowingPage">
             <div :class="vueSurvey.bodyContainerCss">
-              <component
+              <SvComponent
                 :is="'sv-components-container'"
                 :survey="vueSurvey"
                 :container="'left'"
                 :needRenderWrapper="true"
-              ></component>
-              <div class="sv-components-column sv-components-column--expandable">
-                <component :is="'sv-components-container'" :survey="vueSurvey" :container="'center'" :needRenderWrapper="true"></component>
+              ></SvComponent>
+              <div
+                class="sv-components-column sv-components-column--expandable"
+              >
+                <SvComponent
+                  :is="'sv-components-container'"
+                  :survey="vueSurvey"
+                  :container="'center'"
+                  :needRenderWrapper="true"
+                ></SvComponent>
                 <div
                   :class="vueSurvey.bodyCss"
                   :style="{ maxWidth: vueSurvey.renderedWidth }"
                   :id="pageId"
                 >
-                  <component
+                  <SvComponent
                     :is="'sv-components-container'"
                     :survey="vueSurvey"
                     :container="'contentTop'"
                     :needRenderWrapper="true"
-                  ></component>
-                  <survey-page
+                  ></SvComponent>
+                  <SvComponent
+                    :is="'survey-page'"
                     :key="pageKey"
                     :survey="vueSurvey"
                     :page="vueSurvey.activePage"
                     :css="css"
                   />
-                  <component
+                  <SvComponent
                     :is="'sv-components-container'"
                     :survey="vueSurvey"
                     :container="'contentBottom'"
                     :needRenderWrapper="true"
-                  ></component>
-                  <sv-brand-info v-if="vueSurvey.showBrandInfo"></sv-brand-info>
+                  ></SvComponent>
+                  <SvComponent
+                    :is="'sv-brand-info'"
+                    v-if="vueSurvey.showBrandInfo"
+                  ></SvComponent>
                 </div>
               </div>
-              <component
+              <SvComponent
                 :is="'sv-components-container'"
                 :survey="vueSurvey"
                 :container="'right'"
                 :needRenderWrapper="true"
-              ></component>
+              ></SvComponent>
             </div>
           </template>
-          <component
+          <SvComponent
             :is="'sv-components-container'"
             :survey="vueSurvey"
             :container="'footer'"
             :needRenderWrapper="false"
-          ></component>
+          ></SvComponent>
           <div v-if="hasCompletedPage">
             <div
               v-html="getProcessedCompletedHtml()"
               :class="vueSurvey.completedCss"
             ></div>
-            <component
+            <SvComponent
               :is="'sv-components-container'"
               :survey="vueSurvey"
               :container="'completePage'"
               :needRenderWrapper="true"
-            ></component>
+            ></SvComponent>
           </div>
           <div
             v-if="vueSurvey.state === 'completedbefore'"
@@ -103,12 +119,16 @@
           </div>
         </div>
       </form>
-      <sv-notifier :model="vueSurvey.notifier"></sv-notifier>
+      <SvComponent
+        :is="'sv-notifier'"
+        :model="vueSurvey.notifier"
+      ></SvComponent>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { SurveyModel } from "survey-core";
 import {
   toRaw,
@@ -159,7 +179,7 @@ const getProcessedCompletedHtml = () => {
   return processedCompletedHtmlValue.value;
 };
 
-const setupSurvey = (model:SurveyModel) => {
+const setupSurvey = (model: SurveyModel) => {
   if (!model) return;
   var el = root.value;
   if (el) model.afterRenderSurvey(el);
diff --git a/packages/survey-vue3-ui/src/SvComponent.vue b/packages/survey-vue3-ui/src/SvComponent.vue
new file mode 100644
index 0000000000..aee2e65089
--- /dev/null
+++ b/packages/survey-vue3-ui/src/SvComponent.vue
@@ -0,0 +1,22 @@
+<template>
+  <component :is="registeredComponent" v-bind="$attrs">
+    <template v-for="(_, name) in $slots" #[name]="scope">
+      <slot :name v-bind="scope" />
+    </template>
+  </component>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { ComponentFactory } from "./component-factory";
+
+defineOptions({
+  inheritAttrs: false,
+});
+const props = defineProps<{
+  is: string;
+}>();
+
+const registeredComponent = computed(() =>
+  ComponentFactory.Instance.getComponent(props.is)
+);
+</script>
diff --git a/packages/survey-vue3-ui/src/Tagbox.vue b/packages/survey-vue3-ui/src/Tagbox.vue
index 45976cc6c1..4481197d86 100644
--- a/packages/survey-vue3-ui/src/Tagbox.vue
+++ b/packages/survey-vue3-ui/src/Tagbox.vue
@@ -1,11 +1,16 @@
 <template>
   <div :class="question.renderCssRoot" ref="root">
-    <sv-tagbox :question="question"></sv-tagbox>
-    <survey-other-choice v-if="question.isOtherSelected" :question="question" />
+    <SvComponent :is="'sv-tagbox'" :question="question"></SvComponent>
+    <SvComponent
+      :is="'survey-other-choice'"
+      v-if="question.isOtherSelected"
+      :question="question"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionTagboxModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/TemplateRenderer.vue b/packages/survey-vue3-ui/src/TemplateRenderer.vue
index 286e54921a..8b9636cea1 100644
--- a/packages/survey-vue3-ui/src/TemplateRenderer.vue
+++ b/packages/survey-vue3-ui/src/TemplateRenderer.vue
@@ -1,9 +1,10 @@
 <template>
   <slot v-if="hasContentComponent && !componentName"></slot>
-  <component v-else :is="componentName" v-bind="componentData" />
+  <SvComponent v-else :is="componentName" v-bind="componentData" />
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { computed, useSlots } from "vue";
 defineProps<{
   componentName?: string;
diff --git a/packages/survey-vue3-ui/src/Text.vue b/packages/survey-vue3-ui/src/Text.vue
index 75bdc0c8ed..294a387dc2 100644
--- a/packages/survey-vue3-ui/src/Text.vue
+++ b/packages/survey-vue3-ui/src/Text.vue
@@ -3,15 +3,25 @@
     {{ question.value }}
   </div>
   <div v-else-if="question.dataListId" ref="root">
-    <survey-text-input :question="question" />
+    <SvComponent :is="'survey-text-input'" :question="question" />
     <datalist :id="question.dataListId">
-      <option v-for="item in question.dataList" :value="item"></option>
+      <option
+        v-for="(item, index) in question.dataList"
+        :key="index"
+        :value="item"
+      ></option>
     </datalist>
   </div>
-  <survey-text-input v-else :question="question" :get-ref="(ref: any) => { root = ref; }" />
+  <SvComponent
+    :is="'survey-text-input'"
+    v-else
+    :question="question"
+    :get-ref="(ref: any) => { root = ref; }"
+  />
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionTextModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/TextInput.vue b/packages/survey-vue3-ui/src/TextInput.vue
index ecffd80dc2..f3b98e9516 100644
--- a/packages/survey-vue3-ui/src/TextInput.vue
+++ b/packages/survey-vue3-ui/src/TextInput.vue
@@ -60,22 +60,24 @@
       :aria-invalid="question.a11y_input_ariaInvalid"
       :aria-errormessage="question.a11y_input_ariaErrormessage"
     />
-    <sv-character-counter
+    <SvComponent
+      :is="'sv-character-counter'"
       :counter="question.characterCounter"
       :remainingCharacterCounter="question.cssClasses.remainingCharacterCounter"
-    ></sv-character-counter>
+    ></SvComponent>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionTextModel } from "survey-core";
 import { useBase } from "./base";
 import { computed, ref } from "vue";
 
-const props = defineProps<{ question: QuestionTextModel; getRef?: Function; }>();
+const props = defineProps<{ question: QuestionTextModel; getRef?: Function }>();
 const getRef = function (element: HTMLElement) {
   if (props.getRef) props.getRef(element);
-}
+};
 const root = ref(null);
 defineExpose({ root });
 
diff --git a/packages/survey-vue3-ui/src/base.ts b/packages/survey-vue3-ui/src/base.ts
index ff3dac585d..15355b7c71 100644
--- a/packages/survey-vue3-ui/src/base.ts
+++ b/packages/survey-vue3-ui/src/base.ts
@@ -11,8 +11,6 @@ import {
   type Ref,
   onBeforeUnmount,
   watchEffect,
-  nextTick,
-  onBeforeUpdate,
   onUpdated,
 } from "vue";
 Base.createPropertiesHash = () => {
diff --git a/packages/survey-vue3-ui/src/buttongroup/ButtonGroup.vue b/packages/survey-vue3-ui/src/buttongroup/ButtonGroup.vue
index f0b80fef9d..c554421f03 100644
--- a/packages/survey-vue3-ui/src/buttongroup/ButtonGroup.vue
+++ b/packages/survey-vue3-ui/src/buttongroup/ButtonGroup.vue
@@ -1,15 +1,17 @@
 <template>
   <div role="group" :class="question.cssClasses.root" ref="root">
-    <sv-button-group-item
+    <SvComponent
+      :is="'sv-button-group-item'"
       v-for="(item, index) in question.visibleChoices"
       :question="question"
       :key="index"
       :item="item"
       :index="index"
-    ></sv-button-group-item>
+    ></SvComponent>
   </div>
 </template>
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionButtonGroupModel } from "survey-core";
 import { useQuestion } from "..";
 import { ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/buttongroup/ButtonGroupItem.vue b/packages/survey-vue3-ui/src/buttongroup/ButtonGroupItem.vue
index e95f63b012..538bf80867 100644
--- a/packages/survey-vue3-ui/src/buttongroup/ButtonGroupItem.vue
+++ b/packages/survey-vue3-ui/src/buttongroup/ButtonGroupItem.vue
@@ -19,23 +19,28 @@
       :value="model.value"
     />
     <div :class="model.css.decorator">
-      <sv-svg-icon
+      <SvComponent
+        :is="'sv-svg-icon'"
         v-if="model.iconName"
         :iconName="model.iconName"
         :size="model.iconSize"
         :class="model.css.icon"
-      ></sv-svg-icon>
+      ></SvComponent>
       <span
         :class="model.css.caption"
         v-if="model.showCaption"
         :title="model.caption.renderedHtml"
       >
-        <survey-string :locString="model.caption"></survey-string>
+        <SvComponent
+          :is="'survey-string'"
+          :locString="model.caption"
+        ></SvComponent>
       </span>
     </div>
   </label>
 </template>
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import {
   ButtonGroupItemModel,
   QuestionButtonGroupModel,
diff --git a/packages/survey-vue3-ui/src/component-factory.ts b/packages/survey-vue3-ui/src/component-factory.ts
new file mode 100644
index 0000000000..e483b3df1d
--- /dev/null
+++ b/packages/survey-vue3-ui/src/component-factory.ts
@@ -0,0 +1,21 @@
+export class ComponentFactory {
+  public static Instance: ComponentFactory = new ComponentFactory();
+  private creatorHash: { [index: string]: any } = {};
+
+  public registerComponent(typeName: string, componentType: any): void {
+    this.creatorHash[typeName] = componentType;
+  }
+  public getComponent(typeName: string): any {
+    return this.creatorHash[typeName];
+  }
+  public getAllTypes(): Array<string> {
+    const result = new Array<string>();
+    for (const key in this.creatorHash) {
+      result.push(key);
+    }
+    return result.sort();
+  }
+  public isComponentRegistered(elementType: string): boolean {
+    return !!this.creatorHash[elementType];
+  }
+}
diff --git a/packages/survey-vue3-ui/src/components/Container.vue b/packages/survey-vue3-ui/src/components/Container.vue
index 0e3ab3ba37..ab356e2c78 100644
--- a/packages/survey-vue3-ui/src/components/Container.vue
+++ b/packages/survey-vue3-ui/src/components/Container.vue
@@ -1,29 +1,33 @@
 <template>
   <template v-if="components.length > 0">
-    <div v-if="needRenderWrapper" :class="['sv-components-column', 'sv-components-container-' + container]">
-      <template v-for="(component, index) in components">
-        <component
+    <div
+      v-if="needRenderWrapper"
+      :class="['sv-components-column', 'sv-components-container-' + container]"
+    >
+      <template v-for="component in components" :key="component.id">
+        <SvComponent
           :is="component.component"
           :survey="survey"
           :container="container"
           :model="component.data"
-        ></component>
+        ></SvComponent>
       </template>
     </div>
     <template v-else>
-      <template v-for="(component, index) in components">
-        <component
+      <template v-for="component in components" :key="component.id">
+        <SvComponent
           :is="component.component"
           :survey="survey"
           :container="container"
           :model="component.data"
-        ></component>
+        ></SvComponent>
       </template>
     </template>
   </template>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { computed } from "vue";
 import type { SurveyModel } from "survey-core";
 
diff --git a/packages/survey-vue3-ui/src/components/LoadingIndicator.vue b/packages/survey-vue3-ui/src/components/LoadingIndicator.vue
index 26ba27ae42..6154d2f1dc 100644
--- a/packages/survey-vue3-ui/src/components/LoadingIndicator.vue
+++ b/packages/survey-vue3-ui/src/components/LoadingIndicator.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="sd-loading-indicator">
-    <sv-svg-icon :iconName="'icon-loading'" size="'auto'"></sv-svg-icon>
+    <SvComponent
+      :is="'sv-svg-icon'"
+      :iconName="'icon-loading'"
+      size="'auto'"
+    ></SvComponent>
   </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import SvComponent from "@/SvComponent.vue";
+</script>
diff --git a/packages/survey-vue3-ui/src/components/QuestionError.vue b/packages/survey-vue3-ui/src/components/QuestionError.vue
index 7ccf940b98..5bbbecc2a5 100644
--- a/packages/survey-vue3-ui/src/components/QuestionError.vue
+++ b/packages/survey-vue3-ui/src/components/QuestionError.vue
@@ -1,28 +1,25 @@
 <template>
-    <div :key="errorKey">
-      <span
-        :class="
-          cssClasses
-            ? cssClasses.error.icon || undefined
-            : 'panel-error-icon'
-        "
-        aria-hidden="true"
-      ></span>
-      <span
-        :class="
-          cssClasses
-            ? cssClasses.error.item || undefined
-            : 'panel-error-item'
-        "
-      >
-        <survey-string :locString="error.locText" />
-      </span>
-    </div>
+  <div :key="errorKey">
+    <span
+      :class="
+        cssClasses ? cssClasses.error.icon || undefined : 'panel-error-icon'
+      "
+      aria-hidden="true"
+    ></span>
+    <span
+      :class="
+        cssClasses ? cssClasses.error.item || undefined : 'panel-error-item'
+      "
+    >
+      <SvComponent :is="'survey-string'" :locString="error.locText" />
+    </span>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { SurveyError } from "survey-core";
-const props = defineProps<{
+defineProps<{
   errorKey: string;
   error: SurveyError;
   cssClasses: any;
diff --git a/packages/survey-vue3-ui/src/components/TextArea.vue b/packages/survey-vue3-ui/src/components/TextArea.vue
index 8b8f95817d..b03557d4df 100644
--- a/packages/survey-vue3-ui/src/components/TextArea.vue
+++ b/packages/survey-vue3-ui/src/components/TextArea.vue
@@ -46,12 +46,13 @@
 </template>
 
 <script lang="ts" setup>
-import { useBase } from "@/base";
 import type { TextAreaModel } from "survey-core";
 import { computed, onMounted, onUpdated, onUnmounted, ref } from "vue";
 
 const props = defineProps<{ model: TextAreaModel }>();
-const contentElement = ref<HTMLTextAreaElement>((null as any) as HTMLTextAreaElement);
+const contentElement = ref<HTMLTextAreaElement>(
+  null as any as HTMLTextAreaElement
+);
 const value = computed(() => props.model.getTextValue() || "");
 
 onMounted(() => {
diff --git a/packages/survey-vue3-ui/src/components/action-bar/Action.vue b/packages/survey-vue3-ui/src/components/action-bar/Action.vue
index c4531559e5..eaae0a8bc5 100644
--- a/packages/survey-vue3-ui/src/components/action-bar/Action.vue
+++ b/packages/survey-vue3-ui/src/components/action-bar/Action.vue
@@ -1,14 +1,16 @@
 <template>
   <div v-bind:class="item.getActionRootCss()" :id="item.id">
     <div class="sv-action__content">
-      <sv-action-bar-separator
+      <SvComponent
+        :is="'sv-action-bar-separator'"
         v-if="item.needSeparator"
-      ></sv-action-bar-separator>
-      <component :is="componentName" :item="item"> </component>
+      ></SvComponent>
+      <SvComponent :is="componentName" :item="item"> </SvComponent>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { useBase } from "@/base";
 import type { Action } from "survey-core";
 import { computed } from "vue";
diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
index 545a28e0f9..1dd2190e39 100644
--- a/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
+++ b/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
@@ -5,18 +5,20 @@
     :class="model.getRootCss()"
     @click="onClick"
   >
-    <sv-action
+    <SvComponent
+      :is="'sv-action'"
       v-for="item in renderedActions"
       v-bind:key="item.id"
       :item="item"
-    ></sv-action>
+    ></SvComponent>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { ActionContainer } from "survey-core";
 import { useBase, useComputedArray } from "@/base";
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 
 const props = withDefaults(
   defineProps<{
diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue
index f1d2f41e1c..e6251cf241 100644
--- a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue
+++ b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue
@@ -29,13 +29,14 @@
     v-bind:role="item.ariaRole"
     v-key2click="{ processEsc: false, disableTabStop: item.disableTabStop }"
   >
-    <sv-svg-icon
+    <SvComponent
+      :is="'sv-svg-icon'"
       v-if="item.iconName"
       :class="item.cssClasses.itemIcon"
       :iconName="item.iconName"
       :size="item.iconSize"
       :title="item.tooltip || item.title"
-    ></sv-svg-icon>
+    ></SvComponent>
 
     <span v-if="item.hasTitle" :class="item.getActionBarItemTitleCss()">{{
       item.title
@@ -48,6 +49,8 @@ export default {
 };
 </script>
 <script lang="ts" setup>
+import { key2ClickDirective as vKey2click } from "@/directives/key2click";
+import SvComponent from "@/SvComponent.vue";
 import { useBase } from "@/base";
 import type { Action } from "survey-core";
 const props = defineProps<{ item: Action }>();
diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue
index 778fdcf709..a1c076d466 100644
--- a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue
+++ b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue
@@ -17,19 +17,24 @@
     v-bind:role="item.ariaRole"
     v-key2click="{ processEsc: false, disableTabStop: item.disableTabStop }"
   >
-    <sv-svg-icon
+    <SvComponent
+      :is="'sv-svg-icon'"
       v-if="item.iconName"
       :class="item.cssClasses.itemIcon"
       :iconName="item.iconName"
       :size="item.iconSize"
       :title="item.tooltip || item.title"
-    ></sv-svg-icon>
+    ></SvComponent>
 
     <span v-if="item.hasTitle" :class="item.getActionBarItemTitleCss()">{{
       item.title
     }}</span>
   </button>
-  <sv-popup :model="item.popupModel" :getTarget="getTarget"></sv-popup>
+  <SvComponent
+    :is="'sv-popup'"
+    :model="item.popupModel"
+    :getTarget="getTarget"
+  ></SvComponent>
 </template>
 <script lang="ts">
 export default {
@@ -37,6 +42,8 @@ export default {
 };
 </script>
 <script lang="ts" setup>
+import { key2ClickDirective as vKey2click } from "@/directives/key2click";
+import SvComponent from "@/SvComponent.vue";
 import { useBase } from "@/base";
 import {
   type Action,
diff --git a/packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue b/packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue
index d38d8ac729..6d06730ac3 100644
--- a/packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue
+++ b/packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue
@@ -23,7 +23,8 @@
       </div>
 
       <div :class="question.cssClasses.controlValue">
-        <survey-string
+        <SvComponent
+          :is="'survey-string'"
           v-if="showSelectedItemLocText"
           :locString="selectedItemLocText"
         />
@@ -36,13 +37,13 @@
           }}</span>
           <span>{{ model.hintStringSuffix }}</span>
         </div>
-        <component
+        <SvComponent
           v-if="question.showInputFieldComponent"
           :is="question.inputFieldComponentName"
           :item="model.getSelectedAction()"
           :question="question"
         >
-        </component>
+        </SvComponent>
         <input
           type="text"
           ref="inputElement"
@@ -73,19 +74,21 @@
         @click="clear"
         aria-hidden="true"
       >
-        <sv-svg-icon
+        <SvComponent
+          :is="'sv-svg-icon'"
           :class="question.cssClasses.cleanButtonSvg"
           :iconName="question.cssClasses.cleanButtonIconId"
           :title="question.clearCaption"
           size="auto"
         >
-        </sv-svg-icon>
+        </SvComponent>
       </div>
     </div>
-    <sv-popup
+    <SvComponent
+      :is="'sv-popup'"
       v-if="!question.isReadOnly"
       :model="question.dropdownListModel.popupModel"
-    ></sv-popup>
+    ></SvComponent>
     <div
       v-else
       :id="question.inputId"
@@ -95,7 +98,8 @@
       :tabindex="question.isDisabledAttr ? undefined : 0"
       :class="question.getControlClass()"
     >
-      <survey-string
+      <SvComponent
+        :is="'survey-string'"
         v-if="question.selectedItemLocText"
         :locString="question.selectedItemLocText"
       />
@@ -107,19 +111,21 @@
       v-if="question.cssClasses.chevronButtonIconId"
       aria-hidden="true"
     >
-      <sv-svg-icon
+      <SvComponent
+        :is="'sv-svg-icon'"
         :class="question.cssClasses.chevronButtonSvg"
         :iconName="question.cssClasses.chevronButtonIconId"
         size="auto"
       >
-      </sv-svg-icon>
+      </SvComponent>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { useBase } from "@/base";
-import { DropdownListModel, Question, Helpers } from "survey-core";
+import { Question, Helpers } from "survey-core";
 import { computed, onMounted, onUpdated, ref } from "vue";
 
 const props = defineProps<{ question: Question }>();
diff --git a/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue b/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue
index 63c87ce34a..07f7269db8 100644
--- a/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue
+++ b/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue
@@ -7,16 +7,19 @@
     v-key2click
     v-on:click="question.chooseFile($event)"
   >
-    <sv-svg-icon
+    <SvComponent
+      :is="'sv-svg-icon'"
       v-if="question.cssClasses.chooseFileIconId"
       :title="question.chooseButtonText"
       :iconName="question.cssClasses.chooseFileIconId"
       :size="'auto'"
-    ></sv-svg-icon>
+    ></SvComponent>
     <span>{{ question.chooseButtonText }}</span>
   </label>
 </template>
 <script setup lang="ts">
+import { key2ClickDirective as vKey2click } from "@/directives/key2click";
+import SvComponent from "@/SvComponent.vue";
 import type { QuestionFileModel, Action } from "survey-core";
 import { computed } from "vue";
 const props = defineProps<{
@@ -24,6 +27,6 @@ const props = defineProps<{
   item?: Action;
 }>();
 const question = computed(
-  () => props.data?.question || props.item.data.question
+  () => props.data?.question || props.item?.data.question
 );
 </script>
diff --git a/packages/survey-vue3-ui/src/components/file/FilePreview.vue b/packages/survey-vue3-ui/src/components/file/FilePreview.vue
index f7263ab18c..6c89e99138 100644
--- a/packages/survey-vue3-ui/src/components/file/FilePreview.vue
+++ b/packages/survey-vue3-ui/src/components/file/FilePreview.vue
@@ -33,12 +33,13 @@
           }"
           alt="File preview"
         />
-        <sv-svg-icon
+        <SvComponent
+          :is="'sv-svg-icon'"
           v-if="question.defaultImage(val)"
           :iconName="question.cssClasses.defaultImageIconId"
           :class="question.cssClasses.defaultImage"
           :size="'auto'"
-        ></sv-svg-icon>
+        ></SvComponent>
         <div
           v-if="val.name && !question.isReadOnly"
           :class="question.getRemoveButtonCss()"
@@ -47,13 +48,14 @@
           <span :class="question.cssClasses.removeFile">{{
             question.removeFileCaption
           }}</span>
-          <sv-svg-icon
+          <SvComponent
+            :is="'sv-svg-icon'"
             v-if="question.cssClasses.removeFileSvgIconId"
             :title="question.removeFileCaption"
             :class="question.cssClasses.removeFileSvg"
             :iconName="question.cssClasses.removeFileSvgIconId"
             :size="'auto'"
-          ></sv-svg-icon>
+          ></SvComponent>
         </div>
       </div>
       <div
@@ -75,5 +77,6 @@
 
 <script setup lang="ts">
 import type { QuestionFileModel } from "survey-core";
+import SvComponent from "@/SvComponent.vue";
 defineProps<{ question: QuestionFileModel }>();
 </script>
diff --git a/packages/survey-vue3-ui/src/components/header/Header.vue b/packages/survey-vue3-ui/src/components/header/Header.vue
index 64f9c794f6..2affbb0d82 100644
--- a/packages/survey-vue3-ui/src/components/header/Header.vue
+++ b/packages/survey-vue3-ui/src/components/header/Header.vue
@@ -1,5 +1,9 @@
 <template>
-  <div v-if="survey.headerView === 'advanced'" :class="model.headerClasses" :style="{ height: model.renderedHeight }">
+  <div
+    v-if="survey.headerView === 'advanced'"
+    :class="model.headerClasses"
+    :style="{ height: model.renderedHeight }"
+  >
     <div
       v-if="!!model.backgroundImage"
       :class="model.backgroundImageClasses"
@@ -10,19 +14,21 @@
       :class="model.contentClasses"
       :style="{ maxWidth: model.maxWidth }"
     >
-      <sv-header-cell
+      <SvComponent
+        :is="'sv-header-cell'"
         v-for="(cell, index) in model.cells"
         :model="cell"
         :key="index"
-      ></sv-header-cell>
+      ></SvComponent>
     </div>
     <div v-if="survey.isMobile">
-      <sv-header-mobile :model="model"></sv-header-mobile>
+      <SvComponent :is="'sv-header-mobile'" :model="model"></SvComponent>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { SurveyModel, Cover } from "survey-core";
 import { useBase } from "@/base";
 
diff --git a/packages/survey-vue3-ui/src/components/header/HeaderCell.vue b/packages/survey-vue3-ui/src/components/header/HeaderCell.vue
index 73135438e2..61ee991c24 100644
--- a/packages/survey-vue3-ui/src/components/header/HeaderCell.vue
+++ b/packages/survey-vue3-ui/src/components/header/HeaderCell.vue
@@ -18,7 +18,11 @@
         class="sv-header__title"
         :style="{ maxWidth: model.textAreaWidth }"
       >
-        <survey-element-title :element="model.survey" :css="model.survey.css" />
+        <SvComponent
+          :is="'survey-element-title'"
+          :element="model.survey"
+          :css="model.survey.css"
+        />
       </div>
       <div
         v-if="model.showDescription"
@@ -29,7 +33,10 @@
           v-if="model.survey.renderedHasDescription"
           :class="model.survey.css.description"
         >
-          <survey-string :locString="model.survey.locDescription" />
+          <SvComponent
+            :is="'survey-string'"
+            :locString="model.survey.locDescription"
+          />
         </div>
       </div>
     </div>
@@ -37,6 +44,7 @@
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { CoverCell } from "survey-core";
 defineProps<{
   model: CoverCell;
diff --git a/packages/survey-vue3-ui/src/components/header/HeaderMobile.vue b/packages/survey-vue3-ui/src/components/header/HeaderMobile.vue
index 2a5a022c54..e92cd2f634 100644
--- a/packages/survey-vue3-ui/src/components/header/HeaderMobile.vue
+++ b/packages/survey-vue3-ui/src/components/header/HeaderMobile.vue
@@ -1,33 +1,51 @@
 <template>
   <div class="sv-header--mobile">
     <div v-if="model.survey.hasLogo" class="sv-header__logo">
-    <div :class="model.survey.logoClassNames">
-      <img
-        :class="model.survey.css.logoImage"
-        :src="model.survey.locLogo.renderedHtml"
-        :width="model.survey.renderedLogoWidth"
-        :height="model.survey.renderedLogoHeight"
-        :alt="model.survey.locTitle.renderedHtml"
-        :style="{ 'objectFit': model.survey.logoFit, 'width': model.survey.renderedStyleLogoWidth, 'height': model.survey.renderedStyleLogoHeight } as any"
-      />
-    </div>
+      <div :class="model.survey.logoClassNames">
+        <img
+          :class="model.survey.css.logoImage"
+          :src="model.survey.locLogo.renderedHtml"
+          :width="model.survey.renderedLogoWidth"
+          :height="model.survey.renderedLogoHeight"
+          :alt="model.survey.locTitle.renderedHtml"
+          :style="{ 'objectFit': model.survey.logoFit, 'width': model.survey.renderedStyleLogoWidth, 'height': model.survey.renderedStyleLogoHeight } as any"
+        />
+      </div>
     </div>
-    <div v-if="model.survey.hasTitle" class="sv-header__title" :style="{ 'maxWidth': model.renderedtextAreaWidth }">
-      <survey-element-title :element="model.survey" :css="model.survey.css" />
+    <div
+      v-if="model.survey.hasTitle"
+      class="sv-header__title"
+      :style="{ maxWidth: model.renderedtextAreaWidth }"
+    >
+      <SvComponent
+        :is="'survey-element-title'"
+        :element="model.survey"
+        :css="model.survey.css"
+      />
     </div>
-    <div v-if="model.survey.renderedHasDescription" class="sv-header__description" :style="{ 'maxWidth': model.renderedtextAreaWidth }">
-      <div v-if="model.survey.renderedHasDescription" :class="model.survey.css.description">
-        <survey-string :locString="model.survey.locDescription" />
+    <div
+      v-if="model.survey.renderedHasDescription"
+      class="sv-header__description"
+      :style="{ maxWidth: model.renderedtextAreaWidth }"
+    >
+      <div
+        v-if="model.survey.renderedHasDescription"
+        :class="model.survey.css.description"
+      >
+        <SvComponent
+          :is="'survey-string'"
+          :locString="model.survey.locDescription"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { Base, SurveyModel, Cover, CoverCell } from "survey-core";
-import { onMounted, onUnmounted, ref } from "vue";
+import SvComponent from "@/SvComponent.vue";
+import { Cover } from "survey-core";
 
-const props = defineProps<{
+defineProps<{
   model: Cover;
 }>();
 </script>
diff --git a/packages/survey-vue3-ui/src/components/list/List.vue b/packages/survey-vue3-ui/src/components/list/List.vue
index a12a43829d..c41e2dedae 100644
--- a/packages/survey-vue3-ui/src/components/list/List.vue
+++ b/packages/survey-vue3-ui/src/components/list/List.vue
@@ -2,7 +2,12 @@
   <div v-bind:class="model.cssClasses.root" ref="listContainerElement">
     <div v-bind:class="model.cssClasses.filter" v-if="model.showFilter">
       <div v-bind:class="model.cssClasses.filterIcon">
-        <sv-svg-icon :iconName="'icon-search'" :size="'auto'"> </sv-svg-icon>
+        <SvComponent
+          :is="'sv-svg-icon'"
+          :iconName="'icon-search'"
+          :size="'auto'"
+        >
+        </SvComponent>
       </div>
       <input
         type="text"
@@ -22,10 +27,11 @@
         "
         v-bind:class="model.cssClasses.searchClearButtonIcon"
       >
-        <sv-svg-icon
+        <SvComponent
+          :is="'sv-svg-icon'"
           :iconName="'icon-searchclear'"
           :size="'auto'"
-        ></sv-svg-icon>
+        ></SvComponent>
       </button>
     </div>
     <div v-bind:class="model.cssClasses.emptyContainer" v-show="model.isEmpty">
@@ -54,18 +60,20 @@
         }
       "
     >
-      <sv-list-item
+      <SvComponent
+        :is="'sv-list-item'"
         v-for="item in renderedActions"
         :item="item"
         :model="model"
         :key="item.id"
       >
-      </sv-list-item>
+      </SvComponent>
     </ul>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { useBase, useComputedArray } from "@/base";
 import type { ListModel } from "survey-core";
 import { onMounted, ref } from "vue";
diff --git a/packages/survey-vue3-ui/src/components/list/ListItem.vue b/packages/survey-vue3-ui/src/components/list/ListItem.vue
index 347f44e2ab..c1bb7ea0b7 100644
--- a/packages/survey-vue3-ui/src/components/list/ListItem.vue
+++ b/packages/survey-vue3-ui/src/components/list/ListItem.vue
@@ -23,13 +23,18 @@
       @mouseover="(e) => model.onItemHover(item)"
       @mouseleave="(e) => model.onItemLeave(item)"
     >
-      <component :is="itemComponent" :item="item" :model="model">
-      </component>
+      <SvComponent
+        :is="itemComponent"
+        :item="item"
+        :model="model"
+      ></SvComponent>
     </div>
   </li>
 </template>
 
 <script lang="ts" setup>
+import { key2ClickDirective as vKey2click } from "@/directives/key2click";
+import SvComponent from "@/SvComponent.vue";
 import { useBase } from "@/base";
 import type { ListModel, Action, IAction } from "survey-core";
 import { computed, onMounted } from "vue";
diff --git a/packages/survey-vue3-ui/src/components/list/ListItemContent.vue b/packages/survey-vue3-ui/src/components/list/ListItemContent.vue
index 39cf1cc492..1e67a12f40 100644
--- a/packages/survey-vue3-ui/src/components/list/ListItemContent.vue
+++ b/packages/survey-vue3-ui/src/components/list/ListItemContent.vue
@@ -1,22 +1,25 @@
 <template>
-  <sv-svg-icon
+  <SvComponent
+    :is="'sv-svg-icon'"
     v-if="item.iconName"
     v-bind:class="model.cssClasses.itemIcon"
     :iconName="item.iconName"
     :size="item.iconSize"
-  ></sv-svg-icon>
-  <survey-string :locString="item.locTitle" />
-  <sv-svg-icon
+  ></SvComponent>
+  <SvComponent :is="'survey-string'" :locString="item.locTitle" />
+  <SvComponent
+    :is="'sv-svg-icon'"
     v-if="item.markerIconName"
     v-bind:class="item.cssClasses.itemMarkerIcon"
     :iconName="item.markerIconName"
     :size="item.markerIconSize"
-  ></sv-svg-icon>
+  ></SvComponent>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { useBase } from "@/base";
-import type { ListModel, Action, IAction } from "survey-core";
+import type { ListModel, Action } from "survey-core";
 
 const props = defineProps<{ model: ListModel; item: Action }>();
 
diff --git a/packages/survey-vue3-ui/src/components/list/ListItemGroup.vue b/packages/survey-vue3-ui/src/components/list/ListItemGroup.vue
index 3f20d51df8..f3e25b9f59 100644
--- a/packages/survey-vue3-ui/src/components/list/ListItemGroup.vue
+++ b/packages/survey-vue3-ui/src/components/list/ListItemGroup.vue
@@ -1,10 +1,14 @@
 <template>
-  <component :is="'sv-list-item-content'" :item="item" :model="model">
-  </component>
-  <sv-popup :model="item.popupModel"></sv-popup>
+  <SvComponent
+    :is="'sv-list-item-content'"
+    :item="item"
+    :model="model"
+  ></SvComponent>
+  <SvComponent :is="'sv-popup'" :model="item.popupModel"></SvComponent>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { useBase } from "@/base";
 import type { ListModel, Action } from "survey-core";
 
diff --git a/packages/survey-vue3-ui/src/components/matrix-actions/detail-button/DetailButton.vue b/packages/survey-vue3-ui/src/components/matrix-actions/detail-button/DetailButton.vue
index 4e99eea0d1..3d1301dd91 100644
--- a/packages/survey-vue3-ui/src/components/matrix-actions/detail-button/DetailButton.vue
+++ b/packages/survey-vue3-ui/src/components/matrix-actions/detail-button/DetailButton.vue
@@ -10,16 +10,18 @@
       question.getIsDetailPanelShowing(row) ? row.detailPanelId : null
     "
   >
-    <sv-svg-icon
+    <SvComponent
+      :is="'sv-svg-icon'"
       :class="question.getDetailPanelIconCss(row)"
       :iconName="question.getDetailPanelIconId(row)"
       size="auto"
     >
-    </sv-svg-icon>
+    </SvComponent>
   </button>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { Action } from "survey-core";
 import { useMatrixAction } from "../matrix-action";
 const props = defineProps<{ item: Action }>();
diff --git a/packages/survey-vue3-ui/src/components/matrix-actions/remove-button/RemoveButton.vue b/packages/survey-vue3-ui/src/components/matrix-actions/remove-button/RemoveButton.vue
index 8a646a46d3..ef5f9620c3 100644
--- a/packages/survey-vue3-ui/src/components/matrix-actions/remove-button/RemoveButton.vue
+++ b/packages/survey-vue3-ui/src/components/matrix-actions/remove-button/RemoveButton.vue
@@ -5,12 +5,13 @@
     :disabled="question.isInputReadOnly"
     @click="() => question.removeRowUI(row)"
   >
-    <survey-string :locString="question.locRemoveRowText" />
+    <SvComponent :is="'survey-string'" :locString="question.locRemoveRowText" />
     <span :class="question.cssClasses.iconRemove"></span>
   </button>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { Action } from "survey-core";
 import { useMatrixAction } from "../matrix-action";
 const props = defineProps<{ item: Action }>();
diff --git a/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicAddBtn.vue b/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicAddBtn.vue
index fe5da7e30b..ef90164134 100644
--- a/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicAddBtn.vue
+++ b/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicAddBtn.vue
@@ -7,12 +7,13 @@
     @click="addPanelClick"
   >
     <span :class="question.cssClasses.buttonAddText"
-      ><survey-string :locString="question.locPanelAddText"
+      ><SvComponent :is="'survey-string'" :locString="question.locPanelAddText"
     /></span>
   </button>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { type IPanelDynamicActionProps, usePanelDynamicAction } from "./action";
 
 const props = defineProps<IPanelDynamicActionProps>();
diff --git a/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicNextBtn.vue b/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicNextBtn.vue
index 5cf757919b..191f3fc34a 100644
--- a/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicNextBtn.vue
+++ b/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicNextBtn.vue
@@ -4,14 +4,16 @@
     @click="nextPanelClick"
     :class="question.getNextButtonCss()"
   >
-    <sv-svg-icon
+    <SvComponent
+      :is="'sv-svg-icon'"
       :iconName="question.cssClasses.progressBtnIcon"
       :size="'auto'"
-    ></sv-svg-icon>
+    ></SvComponent>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { type IPanelDynamicActionProps, usePanelDynamicAction } from "./action";
 
 const props = defineProps<IPanelDynamicActionProps>();
diff --git a/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicPrevBtn.vue b/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicPrevBtn.vue
index 7e65c98c2c..a660aeba40 100644
--- a/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicPrevBtn.vue
+++ b/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicPrevBtn.vue
@@ -4,14 +4,16 @@
     @click="prevPanelClick"
     :class="question.getPrevButtonCss()"
   >
-    <sv-svg-icon
+    <SvComponent
+      :is="'sv-svg-icon'"
       :iconName="question.cssClasses.progressBtnIcon"
       :size="'auto'"
-    ></sv-svg-icon>
+    ></SvComponent>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { type IPanelDynamicActionProps, usePanelDynamicAction } from "./action";
 
 const props = defineProps<IPanelDynamicActionProps>();
diff --git a/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicRemoveBtn.vue b/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicRemoveBtn.vue
index 190935838a..51476d76f8 100644
--- a/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicRemoveBtn.vue
+++ b/packages/survey-vue3-ui/src/components/paneldynamic-actions/PaneldynamicRemoveBtn.vue
@@ -5,13 +5,16 @@
     @click="removePanelClick(panel)"
   >
     <span :class="question.cssClasses.buttonRemoveText"
-      ><survey-string :locString="question.locPanelRemoveText"
+      ><SvComponent
+        :is="'survey-string'"
+        :locString="question.locPanelRemoveText"
     /></span>
     <span :class="question.cssClasses.iconRemove"></span>
   </button>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { PanelModel } from "survey-core";
 import { type IPanelDynamicActionProps, usePanelDynamicAction } from "./action";
 import { computed } from "vue";
diff --git a/packages/survey-vue3-ui/src/components/popup/Popup.vue b/packages/survey-vue3-ui/src/components/popup/Popup.vue
index 2d01b91680..b6e08733a9 100644
--- a/packages/survey-vue3-ui/src/components/popup/Popup.vue
+++ b/packages/survey-vue3-ui/src/components/popup/Popup.vue
@@ -1,9 +1,13 @@
 <template>
   <div ref="root">
-    <sv-popup-container :model="popupViewModel"></sv-popup-container>
+    <SvComponent
+      :is="'sv-popup-container'"
+      :model="popupViewModel"
+    ></SvComponent>
   </div>
 </template>
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { useBase } from "@/base";
 import { PopupModel, createPopupViewModel } from "survey-core";
 import { shallowRef, ref, onMounted, watch, onUnmounted } from "vue";
diff --git a/packages/survey-vue3-ui/src/components/popup/PopupContainer.vue b/packages/survey-vue3-ui/src/components/popup/PopupContainer.vue
index d218bf4937..9ca098f13c 100644
--- a/packages/survey-vue3-ui/src/components/popup/PopupContainer.vue
+++ b/packages/survey-vue3-ui/src/components/popup/PopupContainer.vue
@@ -27,25 +27,25 @@
       v-on:click="clickInside"
     >
       <div class="sv-popup__shadow">
-        <component
+        <SvComponent
           v-if="model.showHeader"
           :is="model.popupHeaderTemplate"
           :model="model"
-        ></component>
+        ></SvComponent>
         <div class="sv-popup__body-content">
           <div class="sv-popup__body-header" v-if="!!model.title">
             {{ model.title }}
           </div>
           <div class="sv-popup__scrolling-content">
             <div class="sv-popup__content">
-              <component
+              <SvComponent
                 :is="model.contentComponentName"
                 v-bind="model.contentComponentData"
-              ></component>
+              ></SvComponent>
             </div>
           </div>
           <div v-if="model.showFooter" class="sv-popup__body-footer">
-            <sv-action-bar :model="model.footerToolbar" />
+            <SvComponent :is="'sv-action-bar'" :model="model.footerToolbar" />
           </div>
         </div>
       </div>
@@ -53,6 +53,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { useBase } from "@/base";
 import type { PopupBaseViewModel } from "survey-core";
 import { onMounted, onUpdated } from "vue";
diff --git a/packages/survey-vue3-ui/src/components/popup/PopupModal.vue b/packages/survey-vue3-ui/src/components/popup/PopupModal.vue
index 8001f5a5ff..df55160935 100644
--- a/packages/survey-vue3-ui/src/components/popup/PopupModal.vue
+++ b/packages/survey-vue3-ui/src/components/popup/PopupModal.vue
@@ -1,13 +1,13 @@
 <template>
   <Teleport v-if="popup" :to="popup.container"
-    ><sv-popup-container :model="popup"></sv-popup-container
-  ></Teleport>
+    ><SvComponent :is="'sv-popup-container'" :model="popup"
+  /></Teleport>
 </template>
 <script lang="ts" setup>
-import { onUnmounted, ref, shallowRef } from "vue";
+import SvComponent from "@/SvComponent.vue";
+import { onUnmounted, shallowRef } from "vue";
 import {
   PopupBaseViewModel,
-  PopupModalViewModel,
   createDialogOptions,
   createPopupModalViewModel,
   settings,
diff --git a/packages/survey-vue3-ui/src/components/progress/ProgressButtons.vue b/packages/survey-vue3-ui/src/components/progress/ProgressButtons.vue
index ede71f84cb..54d907ff5a 100644
--- a/packages/survey-vue3-ui/src/components/progress/ProgressButtons.vue
+++ b/packages/survey-vue3-ui/src/components/progress/ProgressButtons.vue
@@ -43,7 +43,10 @@
               :class="css.progressButtonsPageTitle"
               :title="page.renderedNavigationTitle"
             >
-              <survey-string :locString="page.locNavigationTitle" />
+              <SvComponent
+                :is="'survey-string'"
+                :locString="page.locNavigationTitle"
+              />
             </div>
             <div
               v-if="canShowItemTitles"
@@ -78,13 +81,13 @@
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import {
   type SurveyModel,
   ProgressButtons,
   ProgressButtonsResponsivityManager,
-  IProgressButtonsViewModel,
 } from "survey-core";
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 
 const props = defineProps<{
   survey: SurveyModel;
@@ -97,7 +100,7 @@ const canShowFooter = ref(false);
 const canShowItemTitles = ref(true);
 const progressButtonsListContainer = ref<HTMLElement>();
 const css = computed(() => props.survey.css);
-let respManager: ProgressButtonsResponsivityManager = null;
+let respManager: ProgressButtonsResponsivityManager = null as any;
 
 const clickScrollButton = (isLeftScroll: boolean) => {
   let element: any = progressButtonsListContainer.value;
diff --git a/packages/survey-vue3-ui/src/components/progress/ProgressToc.vue b/packages/survey-vue3-ui/src/components/progress/ProgressToc.vue
index e18996d4b0..9a015acc09 100644
--- a/packages/survey-vue3-ui/src/components/progress/ProgressToc.vue
+++ b/packages/survey-vue3-ui/src/components/progress/ProgressToc.vue
@@ -1,15 +1,21 @@
 <template>
   <div :class="model.containerCss">
     <div v-if="model.isMobile" v-on:click="model.togglePopup" v-key2click>
-      <sv-svg-icon :iconName="model.icon" :size="24"></sv-svg-icon>
-      <sv-popup :model="model.popupModel"></sv-popup>
+      <SvComponent
+        :is="'sv-svg-icon'"
+        :iconName="model.icon"
+        :size="24"
+      ></SvComponent>
+      <SvComponent :is="'sv-popup'" :model="model.popupModel"></SvComponent>
     </div>
-    <sv-list v-else :model="model.listModel"></sv-list>
+    <SvComponent :is="'sv-list'" v-else :model="model.listModel"></SvComponent>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { key2ClickDirective as vKey2click } from "@/directives/key2click";
+import SvComponent from "@/SvComponent.vue";
 import { type SurveyModel, TOCModel } from "survey-core";
 
-const props = defineProps<{ survey: SurveyModel, model: TOCModel }>();
+defineProps<{ survey: SurveyModel; model: TOCModel }>();
 </script>
diff --git a/packages/survey-vue3-ui/src/components/rating/RatingDropdownItem.vue b/packages/survey-vue3-ui/src/components/rating/RatingDropdownItem.vue
index cf3bb04f37..db9be2c4d0 100644
--- a/packages/survey-vue3-ui/src/components/rating/RatingDropdownItem.vue
+++ b/packages/survey-vue3-ui/src/components/rating/RatingDropdownItem.vue
@@ -2,12 +2,13 @@
   <div class="sd-rating-dropdown-item">
     <span class="sd-rating-dropdown-item_text">{{ item.title }}</span>
     <div v-if="!!item.description" class="sd-rating-dropdown-item_description">
-      <survey-string :locString="item.description" />
+      <SvComponent :is="'survey-string'" :locString="item.description" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { useBase } from "@/base";
 
 const props = defineProps<{ item: any }>();
diff --git a/packages/survey-vue3-ui/src/components/rating/RatingItem.vue b/packages/survey-vue3-ui/src/components/rating/RatingItem.vue
index 99f973dbca..767e5b06ca 100644
--- a/packages/survey-vue3-ui/src/components/rating/RatingItem.vue
+++ b/packages/survey-vue3-ui/src/components/rating/RatingItem.vue
@@ -19,12 +19,13 @@
       :aria-errormessage="question.ariaErrormessage"
     />
     <span :class="question.cssClasses.itemText" :data-text="item.text">
-      <survey-string :locString="item.locText" />
+      <SvComponent :is="'survey-string'" :locString="item.locText" />
     </span>
   </label>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { IRatingItemProps } from "./rating";
 import { useBase } from "@/base";
 
diff --git a/packages/survey-vue3-ui/src/components/rating/RatingItemSmiley.vue b/packages/survey-vue3-ui/src/components/rating/RatingItemSmiley.vue
index 2fdd40210a..5e731653d3 100644
--- a/packages/survey-vue3-ui/src/components/rating/RatingItemSmiley.vue
+++ b/packages/survey-vue3-ui/src/components/rating/RatingItemSmiley.vue
@@ -21,15 +21,17 @@
       :aria-invalid="question.ariaInvalid"
       :aria-errormessage="question.ariaErrormessage"
     />
-    <sv-svg-icon
+    <SvComponent
+      :is="'sv-svg-icon'"
       :iconName="question.getItemSmileyIconName(item.itemValue)"
       :size="'auto'"
       :title="item.text"
-    ></sv-svg-icon>
+    ></SvComponent>
   </label>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { IRatingItemProps } from "./rating";
 import { useBase } from "@/base";
 
diff --git a/packages/survey-vue3-ui/src/components/rating/RatingItemStar.vue b/packages/survey-vue3-ui/src/components/rating/RatingItemStar.vue
index 44d7ff4ad9..c78b48d73a 100644
--- a/packages/survey-vue3-ui/src/components/rating/RatingItemStar.vue
+++ b/packages/survey-vue3-ui/src/components/rating/RatingItemStar.vue
@@ -20,22 +20,24 @@
       :aria-invalid="question.ariaInvalid"
       :aria-errormessage="question.ariaErrormessage"
     />
-    <sv-svg-icon
+    <SvComponent
+      :is="'sv-svg-icon'"
       :class="'sv-star'"
       :iconName="question.itemStarIcon"
       :size="'auto'"
       :title="item.text"
-    ></sv-svg-icon
-    ><sv-svg-icon
+    /><SvComponent
+      :is="'sv-svg-icon'"
       :class="'sv-star-2'"
       :iconName="question.itemStarIconAlt"
       :size="'auto'"
       :title="item.text"
-    ></sv-svg-icon>
+    ></SvComponent>
   </label>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { IRatingItemProps } from "./rating";
 import { useBase } from "@/base";
 
diff --git a/packages/survey-vue3-ui/src/components/tagbox/Tagbox.vue b/packages/survey-vue3-ui/src/components/tagbox/Tagbox.vue
index 90bbdebb20..0813b02d07 100644
--- a/packages/survey-vue3-ui/src/components/tagbox/Tagbox.vue
+++ b/packages/survey-vue3-ui/src/components/tagbox/Tagbox.vue
@@ -19,16 +19,18 @@
       :required="question.isRequired ? true : null"
     >
       <div :class="question.cssClasses.controlValue">
-        <sv-tagbox-item
+        <SvComponent
+          :is="'sv-tagbox-item'"
           v-for="(item, index) in selectedChoices"
           :item="item"
           :question="question"
           :key="'item' + index"
-        ></sv-tagbox-item>
-        <sv-tagbox-filter
+        ></SvComponent>
+        <SvComponent
+          :is="'sv-tagbox-filter'"
           :model="model"
           :question="question"
-        ></sv-tagbox-filter>
+        ></SvComponent>
       </div>
       <div
         :class="question.cssClasses.cleanButton"
@@ -37,16 +39,21 @@
         @click="clear"
         aria-hidden="true"
       >
-        <sv-svg-icon
+        <SvComponent
+          :is="'sv-svg-icon'"
           :class="question.cssClasses.cleanButtonSvg"
           :iconName="question.cssClasses.cleanButtonIconId"
           :title="question.clearCaption"
           size="auto"
         >
-        </sv-svg-icon>
+        </SvComponent>
       </div>
     </div>
-    <sv-popup v-if="!question.isReadOnly" :model="model.popupModel"></sv-popup>
+    <SvComponent
+      :is="'sv-popup'"
+      v-if="!question.isReadOnly"
+      :model="model.popupModel"
+    ></SvComponent>
     <div
       v-else
       :id="question.inputId"
@@ -56,7 +63,8 @@
       :tabindex="question.isDisabledAttr ? undefined : 0"
       :class="question.getControlClass()"
     >
-      <survey-string
+      <SvComponent
+        :is="'survey-string'"
         v-if="question.locReadOnlyText"
         :locString="question.locReadOnlyText"
       />
@@ -67,17 +75,19 @@
       v-if="question.cssClasses.chevronButtonIconId"
       aria-hidden="true"
     >
-      <sv-svg-icon
+      <SvComponent
+        :is="'sv-svg-icon'"
         :class="question.cssClasses.chevronButtonSvg"
         :iconName="question.cssClasses.chevronButtonIconId"
         size="auto"
       >
-      </sv-svg-icon>
+      </SvComponent>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { useBase, useComputedArray } from "@/base";
 import { DropdownMultiSelectListModel, QuestionTagboxModel } from "survey-core";
 import { computed } from "vue";
diff --git a/packages/survey-vue3-ui/src/components/tagbox/TagboxFilter.vue b/packages/survey-vue3-ui/src/components/tagbox/TagboxFilter.vue
index bab9d82ebe..df3cc39b6f 100644
--- a/packages/survey-vue3-ui/src/components/tagbox/TagboxFilter.vue
+++ b/packages/survey-vue3-ui/src/components/tagbox/TagboxFilter.vue
@@ -5,7 +5,8 @@
     </div>
 
     <div :class="question.cssClasses.hintSuffixWrapper">
-      <survey-string
+      <SvComponent
+        :is="'survey-string'"
         v-if="question.showSelectedItemLocText"
         :locString="question.selectedItemLocText"
       />
@@ -40,6 +41,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { useBase } from "@/base";
 import type {
   DropdownMultiSelectListModel,
diff --git a/packages/survey-vue3-ui/src/components/tagbox/TagboxItem.vue b/packages/survey-vue3-ui/src/components/tagbox/TagboxItem.vue
index c1225e8094..d795b5d2b7 100644
--- a/packages/survey-vue3-ui/src/components/tagbox/TagboxItem.vue
+++ b/packages/survey-vue3-ui/src/components/tagbox/TagboxItem.vue
@@ -1,22 +1,24 @@
 <template>
   <div class="sv-tagbox__item" :key="item.key">
     <div class="sv-tagbox__item-text">
-      <survey-string :locString="item.locText" />
+      <SvComponent :is="'survey-string'" :locString="item.locText" />
     </div>
     <div
       v-bind:class="question.cssClasses.cleanItemButton"
       v-on:click="removeItem"
     >
-      <sv-svg-icon
+      <SvComponent
+        :is="'sv-svg-icon'"
         v-bind:class="question.cssClasses.cleanItemButtonSvg"
         :iconName="question.cssClasses.cleanItemButtonIconId"
         :size="'auto'"
-      ></sv-svg-icon>
+      ></SvComponent>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { useBase } from "@/base";
 import type { ItemValue, QuestionTagboxModel } from "survey-core";
 
diff --git a/packages/survey-vue3-ui/src/components/title/TitleActions.vue b/packages/survey-vue3-ui/src/components/title/TitleActions.vue
index 9e77196abc..5b29e7851a 100644
--- a/packages/survey-vue3-ui/src/components/title/TitleActions.vue
+++ b/packages/survey-vue3-ui/src/components/title/TitleActions.vue
@@ -1,21 +1,24 @@
 <template>
   <div class="sv-title-actions">
     <span class="sv-title-actions__title">
-      <survey-string
+      <SvComponent
+        :is="'survey-string'"
         v-if="element.isPage"
         :locString="element.locTitle"
-      ></survey-string>
-      <survey-element-title-content
+      ></SvComponent>
+      <SvComponent
+        :is="'survey-element-title-content'"
         v-if="!element.isPage"
         :element="element"
         :css="css"
-      ></survey-element-title-content>
+      ></SvComponent>
     </span>
-    <sv-action-bar :model="toolbar"></sv-action-bar>
+    <SvComponent :is="'sv-action-bar'" :model="toolbar"></SvComponent>
   </div>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { PanelModel, Question } from "survey-core";
 import { computed } from "vue";
 
diff --git a/packages/survey-vue3-ui/src/components/title/TitleContent.vue b/packages/survey-vue3-ui/src/components/title/TitleContent.vue
index 8fbc0ba491..ad1d65ca4f 100644
--- a/packages/survey-vue3-ui/src/components/title/TitleContent.vue
+++ b/packages/survey-vue3-ui/src/components/title/TitleContent.vue
@@ -1,5 +1,6 @@
 <template>
-  <survey-string
+  <SvComponent
+    :is="'survey-string'"
     v-if="element.isTitleRenderedAsString"
     :locString="element.locTitle"
   />
@@ -27,7 +28,8 @@
     v-if="!element.isTitleRenderedAsString && element.isRequireTextBeforeTitle"
     >&nbsp;</span
   >
-  <survey-string
+  <SvComponent
+    :is="'survey-string'"
     v-if="!element.isTitleRenderedAsString"
     :locString="element.locTitle"
   />
@@ -44,6 +46,7 @@
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import type { PanelModel, Question } from "survey-core";
 import { computed } from "vue";
 defineOptions({ inheritAttrs: false });
@@ -52,9 +55,10 @@ const props = defineProps<{
   css: any;
 }>();
 
-const cssClasses = computed(() =>
-  (props.element.isPanel
-    ? props.element.cssClasses.panel
-    : props.element.cssClasses) || {}
+const cssClasses = computed(
+  () =>
+    (props.element.isPanel
+      ? props.element.cssClasses.panel
+      : props.element.cssClasses) || {}
 );
 </script>
diff --git a/packages/survey-vue3-ui/src/components/title/TitleElement.vue b/packages/survey-vue3-ui/src/components/title/TitleElement.vue
index 2c84184e08..fa00711539 100644
--- a/packages/survey-vue3-ui/src/components/title/TitleElement.vue
+++ b/packages/survey-vue3-ui/src/components/title/TitleElement.vue
@@ -1,7 +1,7 @@
 <template>
   <component
     v-if="element.hasTitle"
-    v-bind:is="element.titleTagName"
+    :is="element.titleTagName"
     :class="element.cssTitle"
     v-bind:aria-label="element.titleAriaLabel"
     v-bind:id="element.ariaTitleId"
@@ -14,20 +14,23 @@
       }
     "
   >
-    <survey-element-title-content
+    <SvComponent
+      :is="'survey-element-title-content'"
       v-if="!element.hasTitleActions"
       :element="element"
       :css="css"
-    ></survey-element-title-content>
-    <sv-title-actions
+    ></SvComponent>
+    <SvComponent
+      :is="'sv-title-actions'"
       v-if="element.hasTitleActions"
       :element="element"
       :css="css"
-    ></sv-title-actions>
+    ></SvComponent>
   </component>
 </template>
 
 <script lang="ts" setup>
+import SvComponent from "@/SvComponent.vue";
 import { doKey2ClickUp, type SurveyElementCore } from "survey-core";
 defineProps<{
   element: SurveyElementCore;
diff --git a/packages/survey-vue3-ui/src/directives/key2click.ts b/packages/survey-vue3-ui/src/directives/key2click.ts
new file mode 100644
index 0000000000..a9766f196a
--- /dev/null
+++ b/packages/survey-vue3-ui/src/directives/key2click.ts
@@ -0,0 +1,33 @@
+import {
+  doKey2ClickBlur,
+  doKey2ClickDown,
+  doKey2ClickUp,
+  IAttachKey2clickOptions,
+} from "survey-core";
+import { ObjectDirective } from "vue";
+
+export const key2ClickDirective: ObjectDirective<any, IAttachKey2clickOptions> =
+  {
+    mounted: function (el: HTMLElement, binding) {
+      const options: IAttachKey2clickOptions = { ...binding.value } || {
+        processEsc: true,
+      };
+      if (options.disableTabStop) {
+        el.tabIndex = -1;
+        return;
+      }
+      if (!options.disableTabStop) el.tabIndex = 0;
+      el.addEventListener("keyup", (evt: any) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+        doKey2ClickUp(evt, options);
+        return false;
+      });
+      el.addEventListener("keydown", (evt: any) => {
+        doKey2ClickDown(evt, options);
+      });
+      el.addEventListener("blur", (evt: any) => {
+        doKey2ClickBlur(evt);
+      });
+    },
+  };
diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts
index 3f73badb0b..5fe21b5d4c 100644
--- a/packages/survey-vue3-ui/src/index.ts
+++ b/packages/survey-vue3-ui/src/index.ts
@@ -118,13 +118,7 @@ import Element from "./Element.vue";
 
 import TemplateRenderer from "./TemplateRenderer.vue";
 
-import {
-  SurveyModel,
-  doKey2ClickBlur,
-  doKey2ClickDown,
-  doKey2ClickUp,
-  type IAttachKey2clickOptions,
-} from "survey-core";
+import { SurveyModel } from "survey-core";
 import type { App } from "vue";
 import FileCleanButton from "./FileCleanButton.vue";
 import FileVideo from "./FileVideo.vue";
@@ -134,179 +128,174 @@ import ButtonGroup from "./buttongroup/ButtonGroup.vue";
 import ButtonGroupItem from "./buttongroup/ButtonGroupItem.vue";
 import Logo from "./Logo.vue";
 import SvgBundle from "./SvgBundle.vue";
+import { ComponentFactory } from "./component-factory";
 
 export { useBase, useLocString, useQuestion, useComputedArray } from "./base";
+export { ComponentFactory };
+export { key2ClickDirective } from "./directives/key2click";
+export { default as SvComponent } from "./SvComponent.vue";
+export { PopupSurvey as PopupSurveyComponent };
+export { SurveyVue as SurveyComponent };
 
 SurveyModel.platform = "vue3";
 
-function registerComponents(app: App) {
-  app.component("SurveyComponent", SurveyVue);
-  app.component("sv-svg-bundle", SvgBundle);
-  app.component("PopupSurveyComponent", PopupSurvey);
-  app.component("survey", SurveyVue);
-  app.component("popup-survey", PopupSurvey);
-
-  app.component("survey-header", HeaderBasic);
-  app.component("sv-logo-image", Logo);
-  app.component("survey-page", Page);
-  app.component("survey-row", Row);
-  app.component("survey-question", Question);
-  app.component("survey-panel", Panel);
-  app.component("survey-element-header", ElementHeader);
-  app.component("survey-string", String);
-  app.component("sv-string-viewer", StringViewer);
-  app.component("sv-string-editor", StringEditor);
-  app.component("sv-skeleton", Skeleton);
-  app.component("survey-text", QuestionText);
-  app.component("survey-text-input", QuestionTextInput);
-  app.component("survey-checkbox", Checkbox);
-  app.component("survey-checkbox-item", CheckboxItem);
-  app.component("survey-radiogroup", Radiogroup);
-  app.component("survey-radiogroup-item", RadiogroupItem);
-  app.component("survey-signaturepad", Signaturepad);
-  app.component("survey-html", Html);
-  app.component("survey-image", Image);
-  app.component("survey-expression", Expression);
-  app.component("survey-file", File);
-  app.component("sv-file-choose-btn", FileChooseButton);
-  app.component("sv-file-clean-btn", FileCleanButton);
-  app.component("sv-file-preview", FilePreview);
-  app.component("sv-file-video", FileVideo);
-  app.component("survey-imagepicker", ImagePicker);
-  app.component("survey-imagepicker-item", ImagePickerItem);
-  app.component("survey-comment", Comment);
-  app.component("survey-dropdown", Dropdown);
-  app.component("sv-dropdown-select", DropdownSelect);
-  app.component("sv-dropdown-option-item", DropdownOptionItem);
-  app.component("sv-dropdown", DropdownInput);
-  app.component("survey-tagbox", Tagbox);
-  app.component("sv-tagbox", TagboxInput);
-  app.component("sv-tagbox-item", TagboxItem);
-  app.component("sv-tagbox-filter", TagboxFilter);
-  app.component("survey-ranking", Ranking);
-  app.component("survey-ranking-item", RankingItem);
-  app.component("sv-ranking-item", RankingItemContent);
-  app.component("survey-rating", Rating);
-  app.component("sv-rating-item", RatingItem);
-  app.component("sv-rating-item-smiley", RatingItemSmiley);
-  app.component("sv-rating-item-star", RatingItemStar);
-  app.component("sv-rating-dropdown", RatingDropdown);
-  app.component("sv-rating-dropdown-item", RatingDropdownItem);
-  app.component("survey-boolean", BooleanSwitch);
-  app.component("sv-boolean-radio", BooleanRadio);
-  app.component("sv-boolean-radio-item", BooleanRadioItem);
-  app.component("sv-boolean-checkbox", BooleanCheckbox);
-  app.component("survey-multipletext", MultipleText);
-  app.component("survey-multipletext-item", MultipletextItem);
-
-  app.component("survey-matrix", Matrix);
-  app.component("survey-matrix-row", MatrixRow);
-  app.component("survey-matrix-cell", MatrixCell);
-  app.component("survey-matrixdropdown", MatrixDropdown);
-  app.component("survey-matrixtable", MatrixTable);
-  app.component("survey-matrixheaderrequired", MatrixHeaderRequired);
-  app.component("survey-matrixdropdown-cell", MatrixDropdownCellComp);
-  app.component("survey-matrixdynamic", MatrixDynamic);
-  app.component("sv-matrix-remove-button", RemoveButton);
-  app.component("sv-matrix-drag-drop-icon", DragDropIcon);
-  app.component("sv-matrix-detail-button", DetailButton);
-
-  app.component("survey-paneldynamic", PanelDynamic);
-  app.component("survey-paneldynamicprogress", PanelDynamicProgress);
-  app.component("survey-paneldynamicprogress-v2", PanelDynamicProgressV2);
-  app.component("sv-paneldynamic-add-btn", PaneldynamicAddBtn);
-  app.component("sv-paneldynamic-next-btn", PaneldynamicNextBtn);
-  app.component("sv-paneldynamic-prev-btn", PaneldynamicPrevBtn);
-  app.component("sv-paneldynamic-remove-btn", PaneldynamicRemoveBtn);
-  app.component("sv-paneldynamic-progress-text", PaneldynamicProgressText);
-
-  app.component("sv-components-container", Container);
-
-  app.component("sv-progress-buttons", ProgressButtonsComponent);
-  app.component("sv-navigation-toc", ProgressToc);
-  app.component("sv-progress-pages", Progress);
-  app.component("sv-progress-questions", Progress);
-  app.component("sv-progress-correctquestions", Progress);
-  app.component("sv-progress-requiredquestions", Progress);
-
-  app.component("survey-errors", Errors);
-  app.component("survey-question-comment", QuestionComment);
-  app.component("survey-element-title", TitleElement);
-  app.component("survey-element-title-content", TitleContent);
-  app.component("sv-title-actions", TitleActions);
-  app.component("sv-brand-info", BrandInfo);
-  app.component("sv-question-error", QuestionError);
-  app.component("sv-svg-icon", SvgIcon);
-
-  app.component("sv-action-bar", ActionBar);
-  app.component("sv-action", Action);
-  app.component("sv-action-bar-item", ActionBarItem);
-  app.component("sv-action-bar-item-dropdown", ActionBarItemDropdown);
-  app.component("sv-action-bar-separator", ActionBarSeparator);
-
-  app.component("sv-list", List);
-  app.component("sv-list-item-content", ListItemContent);
-  app.component("sv-list-item-group", ListItemGroup);
-  app.component("sv-list-item", ListItem);
-
-  app.component("sv-popup", Popup);
-  app.component("sv-popup-container", PopupContainer);
-  app.component("popup-pointer", PopupPointer);
-
-  app.component("sv-notifier", Notifier);
-  app.component("survey-other-choice", OtherChoice);
-  app.component("sv-nav-btn", SurveyNavigationButton);
-  app.component("survey-customwidget", CustomWidget);
-  app.component("survey-popup-modal", PopupModal);
-
-  app.component("sv-character-counter", CharacterCounterComponent);
-  app.component("sv-text-area", TextAreaComponent);
-
-  app.component("survey-composite", Composite);
-  app.component("survey-custom", Custom);
-  app.component("sv-timerpanel", TimerPanel);
-  app.component("sv-loading-indicator", LoadingIndicator);
-
-  app.component("sv-header", Header);
-  app.component("sv-header-cell", HeaderCell);
-  app.component("sv-header-mobile", HeaderMobile);
-
-  app.component("sv-template-renderer", TemplateRenderer);
-
-  app.component("survey-element", Element);
-
-  app.component("survey-buttongroup", ButtonGroup);
-  app.component("sv-button-group-item", ButtonGroupItem);
+function registerComponentWithFunction(
+  registerFunc: (name: string, component: any) => void,
+  name: string,
+  component: any
+) {
+  registerFunc(name, component);
+}
 
-  app.directive("key2click", {
-    // When the bound element is inserted into the DOM...
-    mounted: function (el: HTMLElement, binding: any) {
-      const options: IAttachKey2clickOptions = { ...binding.value } || {
-        processEsc: true,
-      };
-      if (options.disableTabStop) {
-        el.tabIndex = -1;
-        return;
-      }
-      if (!options.disableTabStop) el.tabIndex = 0;
-      el.addEventListener("keyup", (evt: any) => {
-        evt.preventDefault();
-        evt.stopPropagation();
-        doKey2ClickUp(evt, options);
-        return false;
-      });
-      el.addEventListener("keydown", (evt: any) => {
-        doKey2ClickDown(evt, options);
-      });
-      el.addEventListener("blur", (evt: any) => {
-        doKey2ClickBlur(evt);
-      });
-    },
-  });
+function registerComponents(
+  registerFunc: (name: string, component: any) => void
+) {
+  const registerComponent = registerComponentWithFunction.bind(
+    undefined,
+    registerFunc
+  );
+  registerComponent("sv-svg-bundle", SvgBundle);
+  registerComponent("popup-survey", PopupSurvey);
+  registerComponent("survey-header", HeaderBasic);
+  registerComponent("sv-logo-image", Logo);
+  registerComponent("survey-page", Page);
+  registerComponent("survey-row", Row);
+  registerComponent("survey-question", Question);
+  registerComponent("survey-panel", Panel);
+  registerComponent("survey-element-header", ElementHeader);
+  registerComponent("survey-string", String);
+  registerComponent("sv-string-viewer", StringViewer);
+  registerComponent("sv-string-editor", StringEditor);
+  registerComponent("sv-skeleton", Skeleton);
+  registerComponent("survey-text", QuestionText);
+  registerComponent("survey-text-input", QuestionTextInput);
+  registerComponent("survey-checkbox", Checkbox);
+  registerComponent("survey-checkbox-item", CheckboxItem);
+  registerComponent("survey-radiogroup", Radiogroup);
+  registerComponent("survey-radiogroup-item", RadiogroupItem);
+  registerComponent("survey-signaturepad", Signaturepad);
+  registerComponent("survey-html", Html);
+  registerComponent("survey-image", Image);
+  registerComponent("survey-expression", Expression);
+  registerComponent("survey-file", File);
+  registerComponent("sv-file-choose-btn", FileChooseButton);
+  registerComponent("sv-file-clean-btn", FileCleanButton);
+  registerComponent("sv-file-preview", FilePreview);
+  registerComponent("sv-file-video", FileVideo);
+  registerComponent("survey-imagepicker", ImagePicker);
+  registerComponent("survey-imagepicker-item", ImagePickerItem);
+  registerComponent("survey-comment", Comment);
+  registerComponent("survey-dropdown", Dropdown);
+  registerComponent("sv-dropdown-select", DropdownSelect);
+  registerComponent("sv-dropdown-option-item", DropdownOptionItem);
+  registerComponent("sv-dropdown", DropdownInput);
+  registerComponent("survey-tagbox", Tagbox);
+  registerComponent("sv-tagbox", TagboxInput);
+  registerComponent("sv-tagbox-item", TagboxItem);
+  registerComponent("sv-tagbox-filter", TagboxFilter);
+  registerComponent("survey-ranking", Ranking);
+  registerComponent("survey-ranking-item", RankingItem);
+  registerComponent("sv-ranking-item", RankingItemContent);
+  registerComponent("survey-rating", Rating);
+  registerComponent("sv-rating-item", RatingItem);
+  registerComponent("sv-rating-item-smiley", RatingItemSmiley);
+  registerComponent("sv-rating-item-star", RatingItemStar);
+  registerComponent("sv-rating-dropdown", RatingDropdown);
+  registerComponent("sv-rating-dropdown-item", RatingDropdownItem);
+  registerComponent("survey-boolean", BooleanSwitch);
+  registerComponent("sv-boolean-radio", BooleanRadio);
+  registerComponent("sv-boolean-radio-item", BooleanRadioItem);
+  registerComponent("sv-boolean-checkbox", BooleanCheckbox);
+  registerComponent("survey-multipletext", MultipleText);
+  registerComponent("survey-multipletext-item", MultipletextItem);
+
+  registerComponent("survey-matrix", Matrix);
+  registerComponent("survey-matrix-row", MatrixRow);
+  registerComponent("survey-matrix-cell", MatrixCell);
+  registerComponent("survey-matrixdropdown", MatrixDropdown);
+  registerComponent("survey-matrixtable", MatrixTable);
+  registerComponent("survey-matrixheaderrequired", MatrixHeaderRequired);
+  registerComponent("survey-matrixdropdown-cell", MatrixDropdownCellComp);
+  registerComponent("survey-matrixdynamic", MatrixDynamic);
+  registerComponent("sv-matrix-remove-button", RemoveButton);
+  registerComponent("sv-matrix-drag-drop-icon", DragDropIcon);
+  registerComponent("sv-matrix-detail-button", DetailButton);
+
+  registerComponent("survey-paneldynamic", PanelDynamic);
+  registerComponent("survey-paneldynamicprogress", PanelDynamicProgress);
+  registerComponent("survey-paneldynamicprogress-v2", PanelDynamicProgressV2);
+  registerComponent("sv-paneldynamic-add-btn", PaneldynamicAddBtn);
+  registerComponent("sv-paneldynamic-next-btn", PaneldynamicNextBtn);
+  registerComponent("sv-paneldynamic-prev-btn", PaneldynamicPrevBtn);
+  registerComponent("sv-paneldynamic-remove-btn", PaneldynamicRemoveBtn);
+  registerComponent("sv-paneldynamic-progress-text", PaneldynamicProgressText);
+  registerComponent("sv-components-container", Container);
+
+  registerComponent("sv-progress-buttons", ProgressButtonsComponent);
+  registerComponent("sv-navigation-toc", ProgressToc);
+  registerComponent("sv-progress-pages", Progress);
+  registerComponent("sv-progress-questions", Progress);
+  registerComponent("sv-progress-correctquestions", Progress);
+  registerComponent("sv-progress-requiredquestions", Progress);
+
+  registerComponent("survey-errors", Errors);
+  registerComponent("survey-question-comment", QuestionComment);
+  registerComponent("survey-element-title", TitleElement);
+  registerComponent("survey-element-title-content", TitleContent);
+  registerComponent("sv-title-actions", TitleActions);
+  registerComponent("sv-brand-info", BrandInfo);
+  registerComponent("sv-question-error", QuestionError);
+  registerComponent("sv-svg-icon", SvgIcon);
+
+  registerComponent("sv-action-bar", ActionBar);
+  registerComponent("sv-action", Action);
+  registerComponent("sv-action-bar-item", ActionBarItem);
+  registerComponent("sv-action-bar-item-dropdown", ActionBarItemDropdown);
+  registerComponent("sv-action-bar-separator", ActionBarSeparator);
+
+  registerComponent("sv-list", List);
+  registerComponent("sv-list-item-content", ListItemContent);
+  registerComponent("sv-list-item-group", ListItemGroup);
+  registerComponent("sv-list-item", ListItem);
+
+  registerComponent("sv-popup", Popup);
+  registerComponent("sv-popup-container", PopupContainer);
+  registerComponent("popup-pointer", PopupPointer);
+
+  registerComponent("sv-notifier", Notifier);
+  registerComponent("survey-other-choice", OtherChoice);
+  registerComponent("sv-nav-btn", SurveyNavigationButton);
+  registerComponent("survey-customwidget", CustomWidget);
+  registerComponent("survey-popup-modal", PopupModal);
+
+  registerComponent("survey-composite", Composite);
+  registerComponent("survey-custom", Custom);
+  registerComponent("sv-timerpanel", TimerPanel);
+  registerComponent("sv-loading-indicator", LoadingIndicator);
+  registerComponent("sv-header", Header);
+  registerComponent("sv-header-cell", HeaderCell);
+  registerComponent("sv-header-mobile", HeaderMobile);
+  registerComponent("sv-template-renderer", TemplateRenderer);
+  registerComponent("sv-character-counter", CharacterCounterComponent);
+  registerComponent("sv-text-area", TextAreaComponent);
+  registerComponent("survey-element", Element);
+
+  registerComponent("survey-buttongroup", ButtonGroup);
+  registerComponent("sv-button-group-item", ButtonGroupItem);
+  registerComponent("survey", SurveyVue);
 }
 
+registerComponents((name, component) =>
+  ComponentFactory.Instance.registerComponent(name, component)
+);
+
 export const surveyPlugin = {
-  install(app: any) {
-    registerComponents(app);
+  install(app: App) {
+    app.component("SurveyComponent", SurveyVue);
+    app.component("PopupSurveyComponent", PopupSurvey);
+    registerComponents((name, component) => {
+      app.component(name, component);
+      ComponentFactory.Instance.registerComponent(name, name);
+    });
   },
 };
diff --git a/packages/survey-vue3-ui/src/main.ts b/packages/survey-vue3-ui/src/main.ts
index 96abf5fdbe..ee1b6d7249 100644
--- a/packages/survey-vue3-ui/src/main.ts
+++ b/packages/survey-vue3-ui/src/main.ts
@@ -7,4 +7,4 @@ import "survey-core/defaultV2.css";
 const app = createApp(App);
 app.use(surveyPlugin);
 
-const mountedApp = app.mount("#app");
+app.mount("#app");