diff --git a/packages/devextreme-vue/src/accordion.ts b/packages/devextreme-vue/src/accordion.ts
index d572ae7b69c2..ce7398d44e13 100644
--- a/packages/devextreme-vue/src/accordion.ts
+++ b/packages/devextreme-vue/src/accordion.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/accordion";
 import Accordion, { Properties } from "devextreme/ui/accordion";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -47,7 +47,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxAccordion extends AccessibleOptions {
   readonly instance?: Accordion;
 }
-const DxAccordion = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -142,9 +143,14 @@ const DxAccordion = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxAccordion = defineComponent(componentConfig);
+
 
-const DxItem = createConfigurationComponent({
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -167,10 +173,16 @@ const DxItem = createConfigurationComponent({
     titleTemplate: {},
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
 
+
 export default DxAccordion;
 export {
   DxAccordion,
diff --git a/packages/devextreme-vue/src/action-sheet.ts b/packages/devextreme-vue/src/action-sheet.ts
index f387af153700..334de987f572 100644
--- a/packages/devextreme-vue/src/action-sheet.ts
+++ b/packages/devextreme-vue/src/action-sheet.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/action_sheet";
 import ActionSheet, { Properties } from "devextreme/ui/action_sheet";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "cancelText" |
@@ -36,7 +36,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxActionSheet extends AccessibleOptions {
   readonly instance?: ActionSheet;
 }
-const DxActionSheet = createComponent({
+
+const componentConfig = {
   props: {
     cancelText: String,
     dataSource: {},
@@ -109,9 +110,14 @@ const DxActionSheet = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxActionSheet = defineComponent(componentConfig);
+
 
-const DxItem = createConfigurationComponent({
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -132,10 +138,16 @@ const DxItem = createConfigurationComponent({
     text: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
 
+
 export default DxActionSheet;
 export {
   DxActionSheet,
diff --git a/packages/devextreme-vue/src/autocomplete.ts b/packages/devextreme-vue/src/autocomplete.ts
index d6e17d190c79..672439f15541 100644
--- a/packages/devextreme-vue/src/autocomplete.ts
+++ b/packages/devextreme-vue/src/autocomplete.ts
@@ -1,6 +1,6 @@
 import Autocomplete, { Properties } from "devextreme/ui/autocomplete";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -82,7 +82,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxAutocomplete extends AccessibleOptions {
   readonly instance?: Autocomplete;
 }
-const DxAutocomplete = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -252,9 +253,14 @@ const DxAutocomplete = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
 
-const DxAnimation = createConfigurationComponent({
+const DxAutocomplete = defineComponent(componentConfig);
+
+
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -265,13 +271,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -282,9 +294,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -295,9 +313,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxButton = createConfigurationComponent({
+
+const DxButtonConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -310,13 +334,19 @@ const DxButton = createConfigurationComponent({
     name: String,
     options: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxButtonConfig);
+
+const DxButton = defineComponent(DxButtonConfig);
+
 (DxButton as any).$_optionName = "buttons";
 (DxButton as any).$_isCollectionItem = true;
 (DxButton as any).$_expectedChildren = {
   options: { isCollectionItem: false, optionName: "options" }
 };
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -327,9 +357,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxDropDownOptions = createConfigurationComponent({
+
+const DxDropDownOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -436,14 +472,20 @@ const DxDropDownOptions = createConfigurationComponent({
     width: [Function, Number, String],
     wrapperAttr: {}
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDropDownOptionsConfig);
+
+const DxDropDownOptions = defineComponent(DxDropDownOptionsConfig);
+
 (DxDropDownOptions as any).$_optionName = "dropDownOptions";
 (DxDropDownOptions as any).$_expectedChildren = {
   animation: { isCollectionItem: false, optionName: "animation" },
   position: { isCollectionItem: false, optionName: "position" },
   toolbarItem: { isCollectionItem: true, optionName: "toolbarItems" }
 };
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -460,12 +502,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -492,13 +540,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -515,10 +569,16 @@ const DxItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -529,9 +589,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -542,9 +608,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxOptions = createConfigurationComponent({
+
+const DxOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -601,9 +673,15 @@ const DxOptions = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOptionsConfig);
+
+const DxOptions = defineComponent(DxOptionsConfig);
+
 (DxOptions as any).$_optionName = "options";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -624,9 +702,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -653,9 +737,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -672,9 +762,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
-const DxToolbarItem = createConfigurationComponent({
+
+const DxToolbarItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -707,10 +803,16 @@ const DxToolbarItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarItemConfig);
+
+const DxToolbarItem = defineComponent(DxToolbarItemConfig);
+
 (DxToolbarItem as any).$_optionName = "toolbarItems";
 (DxToolbarItem as any).$_isCollectionItem = true;
 
+
 export default DxAutocomplete;
 export {
   DxAutocomplete,
diff --git a/packages/devextreme-vue/src/bar-gauge.ts b/packages/devextreme-vue/src/bar-gauge.ts
index 194aa78b1632..a1488db64ed7 100644
--- a/packages/devextreme-vue/src/bar-gauge.ts
+++ b/packages/devextreme-vue/src/bar-gauge.ts
@@ -1,6 +1,6 @@
 import BarGauge, { Properties } from "devextreme/viz/bar_gauge";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "animation" |
@@ -45,7 +45,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxBarGauge extends AccessibleOptions {
   readonly instance?: BarGauge;
 }
-const DxBarGauge = createComponent({
+
+const componentConfig = {
   props: {
     animation: {},
     backgroundColor: String,
@@ -148,9 +149,14 @@ const DxBarGauge = createComponent({
       tooltip: { isCollectionItem: false, optionName: "tooltip" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxBarGauge = defineComponent(componentConfig);
 
-const DxAnimation = createConfigurationComponent({
+
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -163,9 +169,15 @@ const DxAnimation = createConfigurationComponent({
     easing: String,
     enabled: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
-const DxBarGaugeTitle = createConfigurationComponent({
+
+const DxBarGaugeTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -190,7 +202,12 @@ const DxBarGaugeTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBarGaugeTitleConfig);
+
+const DxBarGaugeTitle = defineComponent(DxBarGaugeTitleConfig);
+
 (DxBarGaugeTitle as any).$_optionName = "title";
 (DxBarGaugeTitle as any).$_expectedChildren = {
   barGaugeTitleSubtitle: { isCollectionItem: false, optionName: "subtitle" },
@@ -198,7 +215,8 @@ const DxBarGaugeTitle = createConfigurationComponent({
   margin: { isCollectionItem: false, optionName: "margin" },
   subtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxBarGaugeTitleSubtitle = createConfigurationComponent({
+
+const DxBarGaugeTitleSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -215,12 +233,18 @@ const DxBarGaugeTitleSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBarGaugeTitleSubtitleConfig);
+
+const DxBarGaugeTitleSubtitle = defineComponent(DxBarGaugeTitleSubtitleConfig);
+
 (DxBarGaugeTitleSubtitle as any).$_optionName = "subtitle";
 (DxBarGaugeTitleSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxBorder = createConfigurationComponent({
+
+const DxBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -239,9 +263,15 @@ const DxBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBorderConfig);
+
+const DxBorder = defineComponent(DxBorderConfig);
+
 (DxBorder as any).$_optionName = "border";
-const DxExport = createConfigurationComponent({
+
+const DxExportConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -262,9 +292,15 @@ const DxExport = createConfigurationComponent({
     printingEnabled: Boolean,
     svgToCanvas: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxExportConfig);
+
+const DxExport = defineComponent(DxExportConfig);
+
 (DxExport as any).$_optionName = "export";
-const DxFont = createConfigurationComponent({
+
+const DxFontConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -281,9 +317,15 @@ const DxFont = createConfigurationComponent({
     size: [Number, String],
     weight: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFontConfig);
+
+const DxFont = defineComponent(DxFontConfig);
+
 (DxFont as any).$_optionName = "font";
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -302,9 +344,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxGeometry = createConfigurationComponent({
+
+const DxGeometryConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -315,9 +363,15 @@ const DxGeometry = createConfigurationComponent({
     endAngle: Number,
     startAngle: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGeometryConfig);
+
+const DxGeometry = defineComponent(DxGeometryConfig);
+
 (DxGeometry as any).$_optionName = "geometry";
-const DxItemTextFormat = createConfigurationComponent({
+
+const DxItemTextFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -336,9 +390,15 @@ const DxItemTextFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemTextFormatConfig);
+
+const DxItemTextFormat = defineComponent(DxItemTextFormatConfig);
+
 (DxItemTextFormat as any).$_optionName = "itemTextFormat";
-const DxLabel = createConfigurationComponent({
+
+const DxLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -359,13 +419,19 @@ const DxLabel = createConfigurationComponent({
     indent: Number,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelConfig);
+
+const DxLabel = defineComponent(DxLabelConfig);
+
 (DxLabel as any).$_optionName = "label";
 (DxLabel as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
   format: { isCollectionItem: false, optionName: "format" }
 };
-const DxLegend = createConfigurationComponent({
+
+const DxLegendConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -418,7 +484,12 @@ const DxLegend = createConfigurationComponent({
     verticalAlignment: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendConfig);
+
+const DxLegend = defineComponent(DxLegendConfig);
+
 (DxLegend as any).$_optionName = "legend";
 (DxLegend as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -429,7 +500,8 @@ const DxLegend = createConfigurationComponent({
   margin: { isCollectionItem: false, optionName: "margin" },
   title: { isCollectionItem: false, optionName: "title" }
 };
-const DxLegendBorder = createConfigurationComponent({
+
+const DxLegendBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -448,9 +520,15 @@ const DxLegendBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendBorderConfig);
+
+const DxLegendBorder = defineComponent(DxLegendBorderConfig);
+
 (DxLegendBorder as any).$_optionName = "border";
-const DxLegendTitle = createConfigurationComponent({
+
+const DxLegendTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -471,7 +549,12 @@ const DxLegendTitle = createConfigurationComponent({
     text: String,
     verticalAlignment: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendTitleConfig);
+
+const DxLegendTitle = defineComponent(DxLegendTitleConfig);
+
 (DxLegendTitle as any).$_optionName = "title";
 (DxLegendTitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
@@ -479,7 +562,8 @@ const DxLegendTitle = createConfigurationComponent({
   margin: { isCollectionItem: false, optionName: "margin" },
   subtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxLegendTitleSubtitle = createConfigurationComponent({
+
+const DxLegendTitleSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -492,12 +576,18 @@ const DxLegendTitleSubtitle = createConfigurationComponent({
     offset: Number,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendTitleSubtitleConfig);
+
+const DxLegendTitleSubtitle = defineComponent(DxLegendTitleSubtitleConfig);
+
 (DxLegendTitleSubtitle as any).$_optionName = "subtitle";
 (DxLegendTitleSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxLoadingIndicator = createConfigurationComponent({
+
+const DxLoadingIndicatorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -512,12 +602,18 @@ const DxLoadingIndicator = createConfigurationComponent({
     show: Boolean,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLoadingIndicatorConfig);
+
+const DxLoadingIndicator = defineComponent(DxLoadingIndicatorConfig);
+
 (DxLoadingIndicator as any).$_optionName = "loadingIndicator";
 (DxLoadingIndicator as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxMargin = createConfigurationComponent({
+
+const DxMarginConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -532,9 +628,15 @@ const DxMargin = createConfigurationComponent({
     right: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMarginConfig);
+
+const DxMargin = defineComponent(DxMarginConfig);
+
 (DxMargin as any).$_optionName = "margin";
-const DxShadow = createConfigurationComponent({
+
+const DxShadowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -551,9 +653,15 @@ const DxShadow = createConfigurationComponent({
     offsetY: Number,
     opacity: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShadowConfig);
+
+const DxShadow = defineComponent(DxShadowConfig);
+
 (DxShadow as any).$_optionName = "shadow";
-const DxSize = createConfigurationComponent({
+
+const DxSizeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -564,9 +672,15 @@ const DxSize = createConfigurationComponent({
     height: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSizeConfig);
+
+const DxSize = defineComponent(DxSizeConfig);
+
 (DxSize as any).$_optionName = "size";
-const DxSubtitle = createConfigurationComponent({
+
+const DxSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -583,9 +697,15 @@ const DxSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSubtitleConfig);
+
+const DxSubtitle = defineComponent(DxSubtitleConfig);
+
 (DxSubtitle as any).$_optionName = "subtitle";
-const DxTitle = createConfigurationComponent({
+
+const DxTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -610,9 +730,15 @@ const DxTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTitleConfig);
+
+const DxTitle = defineComponent(DxTitleConfig);
+
 (DxTitle as any).$_optionName = "title";
-const DxTooltip = createConfigurationComponent({
+
+const DxTooltipConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -651,7 +777,12 @@ const DxTooltip = createConfigurationComponent({
     shadow: Object,
     zIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipConfig);
+
+const DxTooltip = defineComponent(DxTooltipConfig);
+
 (DxTooltip as any).$_optionName = "tooltip";
 (DxTooltip as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -660,7 +791,8 @@ const DxTooltip = createConfigurationComponent({
   shadow: { isCollectionItem: false, optionName: "shadow" },
   tooltipBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxTooltipBorder = createConfigurationComponent({
+
+const DxTooltipBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -677,9 +809,15 @@ const DxTooltipBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipBorderConfig);
+
+const DxTooltipBorder = defineComponent(DxTooltipBorderConfig);
+
 (DxTooltipBorder as any).$_optionName = "border";
 
+
 export default DxBarGauge;
 export {
   DxBarGauge,
diff --git a/packages/devextreme-vue/src/box.ts b/packages/devextreme-vue/src/box.ts
index ca010869dcf6..2f5c919624b3 100644
--- a/packages/devextreme-vue/src/box.ts
+++ b/packages/devextreme-vue/src/box.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/box";
 import Box, { Properties } from "devextreme/ui/box";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "align" |
@@ -31,7 +31,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxBox extends AccessibleOptions {
   readonly instance?: Box;
 }
-const DxBox = createComponent({
+
+const componentConfig = {
   props: {
     align: String,
     crossAlign: String,
@@ -94,9 +95,14 @@ const DxBox = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxBox = defineComponent(componentConfig);
+
 
-const DxItem = createConfigurationComponent({
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -121,10 +127,16 @@ const DxItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
 
+
 export default DxBox;
 export {
   DxBox,
diff --git a/packages/devextreme-vue/src/bullet.ts b/packages/devextreme-vue/src/bullet.ts
index 44eecc30f9ef..7f884207d726 100644
--- a/packages/devextreme-vue/src/bullet.ts
+++ b/packages/devextreme-vue/src/bullet.ts
@@ -1,6 +1,6 @@
 import Bullet, { Properties } from "devextreme/viz/bullet";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "color" |
@@ -35,7 +35,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxBullet extends AccessibleOptions {
   readonly instance?: Bullet;
 }
-const DxBullet = createComponent({
+
+const componentConfig = {
   props: {
     color: String,
     disabled: Boolean,
@@ -110,9 +111,14 @@ const DxBullet = createComponent({
       tooltip: { isCollectionItem: false, optionName: "tooltip" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxBullet = defineComponent(componentConfig);
+
 
-const DxBorder = createConfigurationComponent({
+const DxBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -129,9 +135,15 @@ const DxBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBorderConfig);
+
+const DxBorder = defineComponent(DxBorderConfig);
+
 (DxBorder as any).$_optionName = "border";
-const DxFont = createConfigurationComponent({
+
+const DxFontConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -148,9 +160,15 @@ const DxFont = createConfigurationComponent({
     size: [Number, String],
     weight: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFontConfig);
+
+const DxFont = defineComponent(DxFontConfig);
+
 (DxFont as any).$_optionName = "font";
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -169,9 +187,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxMargin = createConfigurationComponent({
+
+const DxMarginConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -186,9 +210,15 @@ const DxMargin = createConfigurationComponent({
     right: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMarginConfig);
+
+const DxMargin = defineComponent(DxMarginConfig);
+
 (DxMargin as any).$_optionName = "margin";
-const DxShadow = createConfigurationComponent({
+
+const DxShadowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -205,9 +235,15 @@ const DxShadow = createConfigurationComponent({
     offsetY: Number,
     opacity: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShadowConfig);
+
+const DxShadow = defineComponent(DxShadowConfig);
+
 (DxShadow as any).$_optionName = "shadow";
-const DxSize = createConfigurationComponent({
+
+const DxSizeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -218,9 +254,15 @@ const DxSize = createConfigurationComponent({
     height: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSizeConfig);
+
+const DxSize = defineComponent(DxSizeConfig);
+
 (DxSize as any).$_optionName = "size";
-const DxTooltip = createConfigurationComponent({
+
+const DxTooltipConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -259,7 +301,12 @@ const DxTooltip = createConfigurationComponent({
     shadow: Object,
     zIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipConfig);
+
+const DxTooltip = defineComponent(DxTooltipConfig);
+
 (DxTooltip as any).$_optionName = "tooltip";
 (DxTooltip as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -268,6 +315,7 @@ const DxTooltip = createConfigurationComponent({
   shadow: { isCollectionItem: false, optionName: "shadow" }
 };
 
+
 export default DxBullet;
 export {
   DxBullet,
diff --git a/packages/devextreme-vue/src/button-group.ts b/packages/devextreme-vue/src/button-group.ts
index 291100eaa210..1079606daf2f 100644
--- a/packages/devextreme-vue/src/button-group.ts
+++ b/packages/devextreme-vue/src/button-group.ts
@@ -1,6 +1,6 @@
 import ButtonGroup, { Properties } from "devextreme/ui/button_group";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -33,7 +33,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxButtonGroup extends AccessibleOptions {
   readonly instance?: ButtonGroup;
 }
-const DxButtonGroup = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -102,9 +103,14 @@ const DxButtonGroup = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxButtonGroup = defineComponent(componentConfig);
+
 
-const DxItem = createConfigurationComponent({
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -127,10 +133,16 @@ const DxItem = createConfigurationComponent({
     type: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
 
+
 export default DxButtonGroup;
 export {
   DxButtonGroup,
diff --git a/packages/devextreme-vue/src/button.ts b/packages/devextreme-vue/src/button.ts
index 45016ad064ac..3eb2c4135154 100644
--- a/packages/devextreme-vue/src/button.ts
+++ b/packages/devextreme-vue/src/button.ts
@@ -1,5 +1,6 @@
 import Button, { Properties } from "devextreme/ui/button";
-import { createComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -31,7 +32,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxButton extends AccessibleOptions {
   readonly instance?: Button;
 }
-const DxButton = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -95,7 +97,11 @@ const DxButton = createComponent({
     (this as any).$_WidgetClass = Button;
     (this as any).$_hasAsyncTemplate = true;
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxButton = defineComponent(componentConfig);
 
 export default DxButton;
 export {
diff --git a/packages/devextreme-vue/src/calendar.ts b/packages/devextreme-vue/src/calendar.ts
index 63f4cf6d14cc..cb0006bc5451 100644
--- a/packages/devextreme-vue/src/calendar.ts
+++ b/packages/devextreme-vue/src/calendar.ts
@@ -1,5 +1,6 @@
 import Calendar, { Properties } from "devextreme/ui/calendar";
-import { createComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -47,7 +48,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxCalendar extends AccessibleOptions {
   readonly instance?: Calendar;
 }
-const DxCalendar = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -155,7 +157,11 @@ const DxCalendar = createComponent({
     (this as any).$_WidgetClass = Calendar;
     (this as any).$_hasAsyncTemplate = true;
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxCalendar = defineComponent(componentConfig);
 
 export default DxCalendar;
 export {
diff --git a/packages/devextreme-vue/src/chart.ts b/packages/devextreme-vue/src/chart.ts
index b6f8a6479bfe..7aeb0b74b0bb 100644
--- a/packages/devextreme-vue/src/chart.ts
+++ b/packages/devextreme-vue/src/chart.ts
@@ -1,6 +1,6 @@
 import Chart, { Properties } from "devextreme/viz/chart";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "adaptiveLayout" |
@@ -80,7 +80,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxChart extends AccessibleOptions {
   readonly instance?: Chart;
 }
-const DxChart = createComponent({
+
+const componentConfig = {
   props: {
     adaptiveLayout: Object,
     adjustOnZoom: Boolean,
@@ -266,9 +267,14 @@ const DxChart = createComponent({
       zoomAndPan: { isCollectionItem: false, optionName: "zoomAndPan" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxChart = defineComponent(componentConfig);
 
-const DxAdaptiveLayout = createConfigurationComponent({
+
+const DxAdaptiveLayoutConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -281,9 +287,15 @@ const DxAdaptiveLayout = createConfigurationComponent({
     keepLabels: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAdaptiveLayoutConfig);
+
+const DxAdaptiveLayout = defineComponent(DxAdaptiveLayoutConfig);
+
 (DxAdaptiveLayout as any).$_optionName = "adaptiveLayout";
-const DxAggregation = createConfigurationComponent({
+
+const DxAggregationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -296,9 +308,15 @@ const DxAggregation = createConfigurationComponent({
     enabled: Boolean,
     method: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAggregationConfig);
+
+const DxAggregation = defineComponent(DxAggregationConfig);
+
 (DxAggregation as any).$_optionName = "aggregation";
-const DxAggregationInterval = createConfigurationComponent({
+
+const DxAggregationIntervalConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -323,9 +341,15 @@ const DxAggregationInterval = createConfigurationComponent({
     weeks: Number,
     years: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAggregationIntervalConfig);
+
+const DxAggregationInterval = defineComponent(DxAggregationIntervalConfig);
+
 (DxAggregationInterval as any).$_optionName = "aggregationInterval";
-const DxAnimation = createConfigurationComponent({
+
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -340,9 +364,15 @@ const DxAnimation = createConfigurationComponent({
     enabled: Boolean,
     maxPointCountSupported: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
-const DxAnnotation = createConfigurationComponent({
+
+const DxAnnotationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -413,7 +443,12 @@ const DxAnnotation = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnnotationConfig);
+
+const DxAnnotation = defineComponent(DxAnnotationConfig);
+
 (DxAnnotation as any).$_optionName = "annotations";
 (DxAnnotation as any).$_isCollectionItem = true;
 (DxAnnotation as any).$_expectedChildren = {
@@ -424,7 +459,8 @@ const DxAnnotation = createConfigurationComponent({
   image: { isCollectionItem: false, optionName: "image" },
   shadow: { isCollectionItem: false, optionName: "shadow" }
 };
-const DxAnnotationBorder = createConfigurationComponent({
+
+const DxAnnotationBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -443,9 +479,15 @@ const DxAnnotationBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnnotationBorderConfig);
+
+const DxAnnotationBorder = defineComponent(DxAnnotationBorderConfig);
+
 (DxAnnotationBorder as any).$_optionName = "border";
-const DxAnnotationImage = createConfigurationComponent({
+
+const DxAnnotationImageConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -458,9 +500,15 @@ const DxAnnotationImage = createConfigurationComponent({
     url: String,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnnotationImageConfig);
+
+const DxAnnotationImage = defineComponent(DxAnnotationImageConfig);
+
 (DxAnnotationImage as any).$_optionName = "image";
-const DxArgumentAxis = createConfigurationComponent({
+
+const DxArgumentAxisConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -567,7 +615,12 @@ const DxArgumentAxis = createConfigurationComponent({
     workdaysOnly: Boolean,
     workWeek: Array
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxArgumentAxisConfig);
+
+const DxArgumentAxis = defineComponent(DxArgumentAxisConfig);
+
 (DxArgumentAxis as any).$_optionName = "argumentAxis";
 (DxArgumentAxis as any).$_expectedChildren = {
   aggregationInterval: { isCollectionItem: false, optionName: "aggregationInterval" },
@@ -592,7 +645,8 @@ const DxArgumentAxis = createConfigurationComponent({
   visualRange: { isCollectionItem: false, optionName: "visualRange" },
   wholeRange: { isCollectionItem: false, optionName: "wholeRange" }
 };
-const DxArgumentFormat = createConfigurationComponent({
+
+const DxArgumentFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -611,9 +665,15 @@ const DxArgumentFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxArgumentFormatConfig);
+
+const DxArgumentFormat = defineComponent(DxArgumentFormatConfig);
+
 (DxArgumentFormat as any).$_optionName = "argumentFormat";
-const DxAxisConstantLineStyle = createConfigurationComponent({
+
+const DxAxisConstantLineStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -632,9 +692,15 @@ const DxAxisConstantLineStyle = createConfigurationComponent({
     paddingTopBottom: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAxisConstantLineStyleConfig);
+
+const DxAxisConstantLineStyle = defineComponent(DxAxisConstantLineStyleConfig);
+
 (DxAxisConstantLineStyle as any).$_optionName = "constantLineStyle";
-const DxAxisConstantLineStyleLabel = createConfigurationComponent({
+
+const DxAxisConstantLineStyleLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -651,9 +717,15 @@ const DxAxisConstantLineStyleLabel = createConfigurationComponent({
     verticalAlignment: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAxisConstantLineStyleLabelConfig);
+
+const DxAxisConstantLineStyleLabel = defineComponent(DxAxisConstantLineStyleLabelConfig);
+
 (DxAxisConstantLineStyleLabel as any).$_optionName = "label";
-const DxAxisLabel = createConfigurationComponent({
+
+const DxAxisLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -690,9 +762,15 @@ const DxAxisLabel = createConfigurationComponent({
     visible: Boolean,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAxisLabelConfig);
+
+const DxAxisLabel = defineComponent(DxAxisLabelConfig);
+
 (DxAxisLabel as any).$_optionName = "label";
-const DxAxisTitle = createConfigurationComponent({
+
+const DxAxisTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -711,9 +789,15 @@ const DxAxisTitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAxisTitleConfig);
+
+const DxAxisTitle = defineComponent(DxAxisTitleConfig);
+
 (DxAxisTitle as any).$_optionName = "title";
-const DxBackgroundColor = createConfigurationComponent({
+
+const DxBackgroundColorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -724,9 +808,15 @@ const DxBackgroundColor = createConfigurationComponent({
     base: String,
     fillId: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBackgroundColorConfig);
+
+const DxBackgroundColor = defineComponent(DxBackgroundColorConfig);
+
 (DxBackgroundColor as any).$_optionName = "backgroundColor";
-const DxBorder = createConfigurationComponent({
+
+const DxBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -753,9 +843,15 @@ const DxBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBorderConfig);
+
+const DxBorder = defineComponent(DxBorderConfig);
+
 (DxBorder as any).$_optionName = "border";
-const DxBreak = createConfigurationComponent({
+
+const DxBreakConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -766,10 +862,16 @@ const DxBreak = createConfigurationComponent({
     endValue: [Date, Number, String],
     startValue: [Date, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBreakConfig);
+
+const DxBreak = defineComponent(DxBreakConfig);
+
 (DxBreak as any).$_optionName = "breaks";
 (DxBreak as any).$_isCollectionItem = true;
-const DxBreakStyle = createConfigurationComponent({
+
+const DxBreakStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -782,9 +884,15 @@ const DxBreakStyle = createConfigurationComponent({
     line: String,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBreakStyleConfig);
+
+const DxBreakStyle = defineComponent(DxBreakStyleConfig);
+
 (DxBreakStyle as any).$_optionName = "breakStyle";
-const DxChartTitle = createConfigurationComponent({
+
+const DxChartTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -809,7 +917,12 @@ const DxChartTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxChartTitleConfig);
+
+const DxChartTitle = defineComponent(DxChartTitleConfig);
+
 (DxChartTitle as any).$_optionName = "title";
 (DxChartTitle as any).$_expectedChildren = {
   chartTitleSubtitle: { isCollectionItem: false, optionName: "subtitle" },
@@ -817,7 +930,8 @@ const DxChartTitle = createConfigurationComponent({
   margin: { isCollectionItem: false, optionName: "margin" },
   subtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxChartTitleSubtitle = createConfigurationComponent({
+
+const DxChartTitleSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -834,12 +948,18 @@ const DxChartTitleSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxChartTitleSubtitleConfig);
+
+const DxChartTitleSubtitle = defineComponent(DxChartTitleSubtitleConfig);
+
 (DxChartTitleSubtitle as any).$_optionName = "subtitle";
 (DxChartTitleSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxColor = createConfigurationComponent({
+
+const DxColorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -850,9 +970,15 @@ const DxColor = createConfigurationComponent({
     base: String,
     fillId: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColorConfig);
+
+const DxColor = defineComponent(DxColorConfig);
+
 (DxColor as any).$_optionName = "color";
-const DxCommonAnnotationSettings = createConfigurationComponent({
+
+const DxCommonAnnotationSettingsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -921,9 +1047,15 @@ const DxCommonAnnotationSettings = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonAnnotationSettingsConfig);
+
+const DxCommonAnnotationSettings = defineComponent(DxCommonAnnotationSettingsConfig);
+
 (DxCommonAnnotationSettings as any).$_optionName = "commonAnnotationSettings";
-const DxCommonAxisSettings = createConfigurationComponent({
+
+const DxCommonAxisSettingsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -974,7 +1106,12 @@ const DxCommonAxisSettings = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonAxisSettingsConfig);
+
+const DxCommonAxisSettings = defineComponent(DxCommonAxisSettingsConfig);
+
 (DxCommonAxisSettings as any).$_optionName = "commonAxisSettings";
 (DxCommonAxisSettings as any).$_expectedChildren = {
   commonAxisSettingsConstantLineStyle: { isCollectionItem: false, optionName: "constantLineStyle" },
@@ -984,7 +1121,8 @@ const DxCommonAxisSettings = createConfigurationComponent({
   label: { isCollectionItem: false, optionName: "label" },
   title: { isCollectionItem: false, optionName: "title" }
 };
-const DxCommonAxisSettingsConstantLineStyle = createConfigurationComponent({
+
+const DxCommonAxisSettingsConstantLineStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1003,13 +1141,19 @@ const DxCommonAxisSettingsConstantLineStyle = createConfigurationComponent({
     paddingTopBottom: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonAxisSettingsConstantLineStyleConfig);
+
+const DxCommonAxisSettingsConstantLineStyle = defineComponent(DxCommonAxisSettingsConstantLineStyleConfig);
+
 (DxCommonAxisSettingsConstantLineStyle as any).$_optionName = "constantLineStyle";
 (DxCommonAxisSettingsConstantLineStyle as any).$_expectedChildren = {
   commonAxisSettingsConstantLineStyleLabel: { isCollectionItem: false, optionName: "label" },
   label: { isCollectionItem: false, optionName: "label" }
 };
-const DxCommonAxisSettingsConstantLineStyleLabel = createConfigurationComponent({
+
+const DxCommonAxisSettingsConstantLineStyleLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1022,9 +1166,15 @@ const DxCommonAxisSettingsConstantLineStyleLabel = createConfigurationComponent(
     position: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonAxisSettingsConstantLineStyleLabelConfig);
+
+const DxCommonAxisSettingsConstantLineStyleLabel = defineComponent(DxCommonAxisSettingsConstantLineStyleLabelConfig);
+
 (DxCommonAxisSettingsConstantLineStyleLabel as any).$_optionName = "label";
-const DxCommonAxisSettingsLabel = createConfigurationComponent({
+
+const DxCommonAxisSettingsLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1055,9 +1205,15 @@ const DxCommonAxisSettingsLabel = createConfigurationComponent({
     visible: Boolean,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonAxisSettingsLabelConfig);
+
+const DxCommonAxisSettingsLabel = defineComponent(DxCommonAxisSettingsLabelConfig);
+
 (DxCommonAxisSettingsLabel as any).$_optionName = "label";
-const DxCommonAxisSettingsTitle = createConfigurationComponent({
+
+const DxCommonAxisSettingsTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1074,9 +1230,15 @@ const DxCommonAxisSettingsTitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonAxisSettingsTitleConfig);
+
+const DxCommonAxisSettingsTitle = defineComponent(DxCommonAxisSettingsTitleConfig);
+
 (DxCommonAxisSettingsTitle as any).$_optionName = "title";
-const DxCommonPaneSettings = createConfigurationComponent({
+
+const DxCommonPaneSettingsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1087,14 +1249,20 @@ const DxCommonPaneSettings = createConfigurationComponent({
     backgroundColor: [Object, String],
     border: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonPaneSettingsConfig);
+
+const DxCommonPaneSettings = defineComponent(DxCommonPaneSettingsConfig);
+
 (DxCommonPaneSettings as any).$_optionName = "commonPaneSettings";
 (DxCommonPaneSettings as any).$_expectedChildren = {
   backgroundColor: { isCollectionItem: false, optionName: "backgroundColor" },
   border: { isCollectionItem: false, optionName: "border" },
   paneBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxCommonSeriesSettings = createConfigurationComponent({
+
+const DxCommonSeriesSettingsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1223,7 +1391,12 @@ const DxCommonSeriesSettings = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonSeriesSettingsConfig);
+
+const DxCommonSeriesSettings = defineComponent(DxCommonSeriesSettingsConfig);
+
 (DxCommonSeriesSettings as any).$_optionName = "commonSeriesSettings";
 (DxCommonSeriesSettings as any).$_expectedChildren = {
   aggregation: { isCollectionItem: false, optionName: "aggregation" },
@@ -1240,7 +1413,8 @@ const DxCommonSeriesSettings = createConfigurationComponent({
   seriesBorder: { isCollectionItem: false, optionName: "border" },
   valueErrorBar: { isCollectionItem: false, optionName: "valueErrorBar" }
 };
-const DxCommonSeriesSettingsHoverStyle = createConfigurationComponent({
+
+const DxCommonSeriesSettingsHoverStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1259,7 +1433,12 @@ const DxCommonSeriesSettingsHoverStyle = createConfigurationComponent({
     highlight: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonSeriesSettingsHoverStyleConfig);
+
+const DxCommonSeriesSettingsHoverStyle = defineComponent(DxCommonSeriesSettingsHoverStyleConfig);
+
 (DxCommonSeriesSettingsHoverStyle as any).$_optionName = "hoverStyle";
 (DxCommonSeriesSettingsHoverStyle as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -1267,7 +1446,8 @@ const DxCommonSeriesSettingsHoverStyle = createConfigurationComponent({
   hatching: { isCollectionItem: false, optionName: "hatching" },
   seriesBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxCommonSeriesSettingsLabel = createConfigurationComponent({
+
+const DxCommonSeriesSettingsLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1304,7 +1484,12 @@ const DxCommonSeriesSettingsLabel = createConfigurationComponent({
     verticalOffset: Number,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonSeriesSettingsLabelConfig);
+
+const DxCommonSeriesSettingsLabel = defineComponent(DxCommonSeriesSettingsLabelConfig);
+
 (DxCommonSeriesSettingsLabel as any).$_optionName = "label";
 (DxCommonSeriesSettingsLabel as any).$_expectedChildren = {
   argumentFormat: { isCollectionItem: false, optionName: "argumentFormat" },
@@ -1314,7 +1499,8 @@ const DxCommonSeriesSettingsLabel = createConfigurationComponent({
   format: { isCollectionItem: false, optionName: "format" },
   seriesBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxCommonSeriesSettingsSelectionStyle = createConfigurationComponent({
+
+const DxCommonSeriesSettingsSelectionStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1333,7 +1519,12 @@ const DxCommonSeriesSettingsSelectionStyle = createConfigurationComponent({
     highlight: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonSeriesSettingsSelectionStyleConfig);
+
+const DxCommonSeriesSettingsSelectionStyle = defineComponent(DxCommonSeriesSettingsSelectionStyleConfig);
+
 (DxCommonSeriesSettingsSelectionStyle as any).$_optionName = "selectionStyle";
 (DxCommonSeriesSettingsSelectionStyle as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -1341,7 +1532,8 @@ const DxCommonSeriesSettingsSelectionStyle = createConfigurationComponent({
   hatching: { isCollectionItem: false, optionName: "hatching" },
   seriesBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxConnector = createConfigurationComponent({
+
+const DxConnectorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1354,9 +1546,15 @@ const DxConnector = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxConnectorConfig);
+
+const DxConnector = defineComponent(DxConnectorConfig);
+
 (DxConnector as any).$_optionName = "connector";
-const DxConstantLine = createConfigurationComponent({
+
+const DxConstantLineConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1381,10 +1579,16 @@ const DxConstantLine = createConfigurationComponent({
     value: [Date, Number, String],
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxConstantLineConfig);
+
+const DxConstantLine = defineComponent(DxConstantLineConfig);
+
 (DxConstantLine as any).$_optionName = "constantLines";
 (DxConstantLine as any).$_isCollectionItem = true;
-const DxConstantLineLabel = createConfigurationComponent({
+
+const DxConstantLineLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1403,9 +1607,15 @@ const DxConstantLineLabel = createConfigurationComponent({
     verticalAlignment: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxConstantLineLabelConfig);
+
+const DxConstantLineLabel = defineComponent(DxConstantLineLabelConfig);
+
 (DxConstantLineLabel as any).$_optionName = "label";
-const DxConstantLineStyle = createConfigurationComponent({
+
+const DxConstantLineStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1424,9 +1634,15 @@ const DxConstantLineStyle = createConfigurationComponent({
     paddingTopBottom: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxConstantLineStyleConfig);
+
+const DxConstantLineStyle = defineComponent(DxConstantLineStyleConfig);
+
 (DxConstantLineStyle as any).$_optionName = "constantLineStyle";
-const DxCrosshair = createConfigurationComponent({
+
+const DxCrosshairConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1449,7 +1665,12 @@ const DxCrosshair = createConfigurationComponent({
     verticalLine: [Boolean, Object],
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCrosshairConfig);
+
+const DxCrosshair = defineComponent(DxCrosshairConfig);
+
 (DxCrosshair as any).$_optionName = "crosshair";
 (DxCrosshair as any).$_expectedChildren = {
   horizontalLine: { isCollectionItem: false, optionName: "horizontalLine" },
@@ -1457,7 +1678,8 @@ const DxCrosshair = createConfigurationComponent({
   label: { isCollectionItem: false, optionName: "label" },
   verticalLine: { isCollectionItem: false, optionName: "verticalLine" }
 };
-const DxDataPrepareSettings = createConfigurationComponent({
+
+const DxDataPrepareSettingsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1470,9 +1692,15 @@ const DxDataPrepareSettings = createConfigurationComponent({
     convertToAxisDataType: Boolean,
     sortingMethod: [Boolean, Function]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDataPrepareSettingsConfig);
+
+const DxDataPrepareSettings = defineComponent(DxDataPrepareSettingsConfig);
+
 (DxDataPrepareSettings as any).$_optionName = "dataPrepareSettings";
-const DxDragBoxStyle = createConfigurationComponent({
+
+const DxDragBoxStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1483,9 +1711,15 @@ const DxDragBoxStyle = createConfigurationComponent({
     color: String,
     opacity: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDragBoxStyleConfig);
+
+const DxDragBoxStyle = defineComponent(DxDragBoxStyleConfig);
+
 (DxDragBoxStyle as any).$_optionName = "dragBoxStyle";
-const DxExport = createConfigurationComponent({
+
+const DxExportConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1506,9 +1740,15 @@ const DxExport = createConfigurationComponent({
     printingEnabled: Boolean,
     svgToCanvas: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxExportConfig);
+
+const DxExport = defineComponent(DxExportConfig);
+
 (DxExport as any).$_optionName = "export";
-const DxFont = createConfigurationComponent({
+
+const DxFontConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1525,9 +1765,15 @@ const DxFont = createConfigurationComponent({
     size: [Number, String],
     weight: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFontConfig);
+
+const DxFont = defineComponent(DxFontConfig);
+
 (DxFont as any).$_optionName = "font";
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1546,9 +1792,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxGrid = createConfigurationComponent({
+
+const DxGridConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1563,9 +1815,15 @@ const DxGrid = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGridConfig);
+
+const DxGrid = defineComponent(DxGridConfig);
+
 (DxGrid as any).$_optionName = "grid";
-const DxHatching = createConfigurationComponent({
+
+const DxHatchingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1580,9 +1838,15 @@ const DxHatching = createConfigurationComponent({
     step: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHatchingConfig);
+
+const DxHatching = defineComponent(DxHatchingConfig);
+
 (DxHatching as any).$_optionName = "hatching";
-const DxHeight = createConfigurationComponent({
+
+const DxHeightConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1593,9 +1857,15 @@ const DxHeight = createConfigurationComponent({
     rangeMaxPoint: Number,
     rangeMinPoint: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHeightConfig);
+
+const DxHeight = defineComponent(DxHeightConfig);
+
 (DxHeight as any).$_optionName = "height";
-const DxHorizontalLine = createConfigurationComponent({
+
+const DxHorizontalLineConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1614,13 +1884,19 @@ const DxHorizontalLine = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHorizontalLineConfig);
+
+const DxHorizontalLine = defineComponent(DxHorizontalLineConfig);
+
 (DxHorizontalLine as any).$_optionName = "horizontalLine";
 (DxHorizontalLine as any).$_expectedChildren = {
   horizontalLineLabel: { isCollectionItem: false, optionName: "label" },
   label: { isCollectionItem: false, optionName: "label" }
 };
-const DxHorizontalLineLabel = createConfigurationComponent({
+
+const DxHorizontalLineLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1637,9 +1913,15 @@ const DxHorizontalLineLabel = createConfigurationComponent({
     format: [Object, Function, String],
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHorizontalLineLabelConfig);
+
+const DxHorizontalLineLabel = defineComponent(DxHorizontalLineLabelConfig);
+
 (DxHorizontalLineLabel as any).$_optionName = "label";
-const DxHoverStyle = createConfigurationComponent({
+
+const DxHoverStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1660,9 +1942,15 @@ const DxHoverStyle = createConfigurationComponent({
     size: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHoverStyleConfig);
+
+const DxHoverStyle = defineComponent(DxHoverStyleConfig);
+
 (DxHoverStyle as any).$_optionName = "hoverStyle";
-const DxImage = createConfigurationComponent({
+
+const DxImageConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1675,9 +1963,15 @@ const DxImage = createConfigurationComponent({
     url: [String, Object],
     width: [Number, Object]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxImageConfig);
+
+const DxImage = defineComponent(DxImageConfig);
+
 (DxImage as any).$_optionName = "image";
-const DxLabel = createConfigurationComponent({
+
+const DxLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1736,9 +2030,15 @@ const DxLabel = createConfigurationComponent({
     visible: Boolean,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelConfig);
+
+const DxLabel = defineComponent(DxLabelConfig);
+
 (DxLabel as any).$_optionName = "label";
-const DxLegend = createConfigurationComponent({
+
+const DxLegendConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1793,7 +2093,12 @@ const DxLegend = createConfigurationComponent({
     verticalAlignment: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendConfig);
+
+const DxLegend = defineComponent(DxLegendConfig);
+
 (DxLegend as any).$_optionName = "legend";
 (DxLegend as any).$_expectedChildren = {
   annotationBorder: { isCollectionItem: false, optionName: "border" },
@@ -1803,7 +2108,8 @@ const DxLegend = createConfigurationComponent({
   margin: { isCollectionItem: false, optionName: "margin" },
   title: { isCollectionItem: false, optionName: "title" }
 };
-const DxLegendTitle = createConfigurationComponent({
+
+const DxLegendTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1824,7 +2130,12 @@ const DxLegendTitle = createConfigurationComponent({
     text: String,
     verticalAlignment: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendTitleConfig);
+
+const DxLegendTitle = defineComponent(DxLegendTitleConfig);
+
 (DxLegendTitle as any).$_optionName = "title";
 (DxLegendTitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
@@ -1832,7 +2143,8 @@ const DxLegendTitle = createConfigurationComponent({
   margin: { isCollectionItem: false, optionName: "margin" },
   subtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxLegendTitleSubtitle = createConfigurationComponent({
+
+const DxLegendTitleSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1845,12 +2157,18 @@ const DxLegendTitleSubtitle = createConfigurationComponent({
     offset: Number,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendTitleSubtitleConfig);
+
+const DxLegendTitleSubtitle = defineComponent(DxLegendTitleSubtitleConfig);
+
 (DxLegendTitleSubtitle as any).$_optionName = "subtitle";
 (DxLegendTitleSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxLength = createConfigurationComponent({
+
+const DxLengthConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1875,9 +2193,15 @@ const DxLength = createConfigurationComponent({
     weeks: Number,
     years: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLengthConfig);
+
+const DxLength = defineComponent(DxLengthConfig);
+
 (DxLength as any).$_optionName = "length";
-const DxLoadingIndicator = createConfigurationComponent({
+
+const DxLoadingIndicatorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1894,12 +2218,18 @@ const DxLoadingIndicator = createConfigurationComponent({
     show: Boolean,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLoadingIndicatorConfig);
+
+const DxLoadingIndicator = defineComponent(DxLoadingIndicatorConfig);
+
 (DxLoadingIndicator as any).$_optionName = "loadingIndicator";
 (DxLoadingIndicator as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxMargin = createConfigurationComponent({
+
+const DxMarginConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1914,9 +2244,15 @@ const DxMargin = createConfigurationComponent({
     right: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMarginConfig);
+
+const DxMargin = defineComponent(DxMarginConfig);
+
 (DxMargin as any).$_optionName = "margin";
-const DxMinorGrid = createConfigurationComponent({
+
+const DxMinorGridConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1931,9 +2267,15 @@ const DxMinorGrid = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMinorGridConfig);
+
+const DxMinorGrid = defineComponent(DxMinorGridConfig);
+
 (DxMinorGrid as any).$_optionName = "minorGrid";
-const DxMinorTick = createConfigurationComponent({
+
+const DxMinorTickConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1952,9 +2294,15 @@ const DxMinorTick = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMinorTickConfig);
+
+const DxMinorTick = defineComponent(DxMinorTickConfig);
+
 (DxMinorTick as any).$_optionName = "minorTick";
-const DxMinorTickInterval = createConfigurationComponent({
+
+const DxMinorTickIntervalConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1979,9 +2327,15 @@ const DxMinorTickInterval = createConfigurationComponent({
     weeks: Number,
     years: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMinorTickIntervalConfig);
+
+const DxMinorTickInterval = defineComponent(DxMinorTickIntervalConfig);
+
 (DxMinorTickInterval as any).$_optionName = "minorTickInterval";
-const DxMinVisualRangeLength = createConfigurationComponent({
+
+const DxMinVisualRangeLengthConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2006,9 +2360,15 @@ const DxMinVisualRangeLength = createConfigurationComponent({
     weeks: Number,
     years: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMinVisualRangeLengthConfig);
+
+const DxMinVisualRangeLength = defineComponent(DxMinVisualRangeLengthConfig);
+
 (DxMinVisualRangeLength as any).$_optionName = "minVisualRangeLength";
-const DxPane = createConfigurationComponent({
+
+const DxPaneConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2023,10 +2383,16 @@ const DxPane = createConfigurationComponent({
     height: [Number, String],
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPaneConfig);
+
+const DxPane = defineComponent(DxPaneConfig);
+
 (DxPane as any).$_optionName = "panes";
 (DxPane as any).$_isCollectionItem = true;
-const DxPaneBorder = createConfigurationComponent({
+
+const DxPaneBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2051,9 +2417,15 @@ const DxPaneBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPaneBorderConfig);
+
+const DxPaneBorder = defineComponent(DxPaneBorderConfig);
+
 (DxPaneBorder as any).$_optionName = "border";
-const DxPoint = createConfigurationComponent({
+
+const DxPointConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2080,7 +2452,12 @@ const DxPoint = createConfigurationComponent({
     symbol: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPointConfig);
+
+const DxPoint = defineComponent(DxPointConfig);
+
 (DxPoint as any).$_optionName = "point";
 (DxPoint as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -2093,7 +2470,8 @@ const DxPoint = createConfigurationComponent({
   pointSelectionStyle: { isCollectionItem: false, optionName: "selectionStyle" },
   selectionStyle: { isCollectionItem: false, optionName: "selectionStyle" }
 };
-const DxPointBorder = createConfigurationComponent({
+
+const DxPointBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2106,9 +2484,15 @@ const DxPointBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPointBorderConfig);
+
+const DxPointBorder = defineComponent(DxPointBorderConfig);
+
 (DxPointBorder as any).$_optionName = "border";
-const DxPointHoverStyle = createConfigurationComponent({
+
+const DxPointHoverStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2121,14 +2505,20 @@ const DxPointHoverStyle = createConfigurationComponent({
     color: [Object, String],
     size: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPointHoverStyleConfig);
+
+const DxPointHoverStyle = defineComponent(DxPointHoverStyleConfig);
+
 (DxPointHoverStyle as any).$_optionName = "hoverStyle";
 (DxPointHoverStyle as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
   color: { isCollectionItem: false, optionName: "color" },
   pointBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxPointImage = createConfigurationComponent({
+
+const DxPointImageConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2141,14 +2531,20 @@ const DxPointImage = createConfigurationComponent({
     url: [Object, String],
     width: [Number, Object]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPointImageConfig);
+
+const DxPointImage = defineComponent(DxPointImageConfig);
+
 (DxPointImage as any).$_optionName = "image";
 (DxPointImage as any).$_expectedChildren = {
   height: { isCollectionItem: false, optionName: "height" },
   url: { isCollectionItem: false, optionName: "url" },
   width: { isCollectionItem: false, optionName: "width" }
 };
-const DxPointSelectionStyle = createConfigurationComponent({
+
+const DxPointSelectionStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2161,14 +2557,20 @@ const DxPointSelectionStyle = createConfigurationComponent({
     color: [Object, String],
     size: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPointSelectionStyleConfig);
+
+const DxPointSelectionStyle = defineComponent(DxPointSelectionStyleConfig);
+
 (DxPointSelectionStyle as any).$_optionName = "selectionStyle";
 (DxPointSelectionStyle as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
   color: { isCollectionItem: false, optionName: "color" },
   pointBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxReduction = createConfigurationComponent({
+
+const DxReductionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2179,9 +2581,15 @@ const DxReduction = createConfigurationComponent({
     color: String,
     level: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxReductionConfig);
+
+const DxReduction = defineComponent(DxReductionConfig);
+
 (DxReduction as any).$_optionName = "reduction";
-const DxScrollBar = createConfigurationComponent({
+
+const DxScrollBarConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2200,9 +2608,15 @@ const DxScrollBar = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxScrollBarConfig);
+
+const DxScrollBar = defineComponent(DxScrollBarConfig);
+
 (DxScrollBar as any).$_optionName = "scrollBar";
-const DxSelectionStyle = createConfigurationComponent({
+
+const DxSelectionStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2223,9 +2637,15 @@ const DxSelectionStyle = createConfigurationComponent({
     size: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSelectionStyleConfig);
+
+const DxSelectionStyle = defineComponent(DxSelectionStyleConfig);
+
 (DxSelectionStyle as any).$_optionName = "selectionStyle";
-const DxSeries = createConfigurationComponent({
+
+const DxSeriesConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2312,10 +2732,16 @@ const DxSeries = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSeriesConfig);
+
+const DxSeries = defineComponent(DxSeriesConfig);
+
 (DxSeries as any).$_optionName = "series";
 (DxSeries as any).$_isCollectionItem = true;
-const DxSeriesBorder = createConfigurationComponent({
+
+const DxSeriesBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2330,9 +2756,15 @@ const DxSeriesBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSeriesBorderConfig);
+
+const DxSeriesBorder = defineComponent(DxSeriesBorderConfig);
+
 (DxSeriesBorder as any).$_optionName = "border";
-const DxSeriesTemplate = createConfigurationComponent({
+
+const DxSeriesTemplateConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2343,9 +2775,15 @@ const DxSeriesTemplate = createConfigurationComponent({
     customizeSeries: Function,
     nameField: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSeriesTemplateConfig);
+
+const DxSeriesTemplate = defineComponent(DxSeriesTemplateConfig);
+
 (DxSeriesTemplate as any).$_optionName = "seriesTemplate";
-const DxShadow = createConfigurationComponent({
+
+const DxShadowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2362,9 +2800,15 @@ const DxShadow = createConfigurationComponent({
     offsetY: Number,
     opacity: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShadowConfig);
+
+const DxShadow = defineComponent(DxShadowConfig);
+
 (DxShadow as any).$_optionName = "shadow";
-const DxSize = createConfigurationComponent({
+
+const DxSizeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2375,9 +2819,15 @@ const DxSize = createConfigurationComponent({
     height: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSizeConfig);
+
+const DxSize = defineComponent(DxSizeConfig);
+
 (DxSize as any).$_optionName = "size";
-const DxStrip = createConfigurationComponent({
+
+const DxStripConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2396,10 +2846,16 @@ const DxStrip = createConfigurationComponent({
     paddingTopBottom: Number,
     startValue: [Date, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxStripConfig);
+
+const DxStrip = defineComponent(DxStripConfig);
+
 (DxStrip as any).$_optionName = "strips";
 (DxStrip as any).$_isCollectionItem = true;
-const DxStripLabel = createConfigurationComponent({
+
+const DxStripLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2414,9 +2870,15 @@ const DxStripLabel = createConfigurationComponent({
     text: String,
     verticalAlignment: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxStripLabelConfig);
+
+const DxStripLabel = defineComponent(DxStripLabelConfig);
+
 (DxStripLabel as any).$_optionName = "label";
-const DxStripStyle = createConfigurationComponent({
+
+const DxStripStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2429,13 +2891,19 @@ const DxStripStyle = createConfigurationComponent({
     paddingLeftRight: Number,
     paddingTopBottom: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxStripStyleConfig);
+
+const DxStripStyle = defineComponent(DxStripStyleConfig);
+
 (DxStripStyle as any).$_optionName = "stripStyle";
 (DxStripStyle as any).$_expectedChildren = {
   label: { isCollectionItem: false, optionName: "label" },
   stripStyleLabel: { isCollectionItem: false, optionName: "label" }
 };
-const DxStripStyleLabel = createConfigurationComponent({
+
+const DxStripStyleLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2448,9 +2916,15 @@ const DxStripStyleLabel = createConfigurationComponent({
     horizontalAlignment: String,
     verticalAlignment: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxStripStyleLabelConfig);
+
+const DxStripStyleLabel = defineComponent(DxStripStyleLabelConfig);
+
 (DxStripStyleLabel as any).$_optionName = "label";
-const DxSubtitle = createConfigurationComponent({
+
+const DxSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2467,9 +2941,15 @@ const DxSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSubtitleConfig);
+
+const DxSubtitle = defineComponent(DxSubtitleConfig);
+
 (DxSubtitle as any).$_optionName = "subtitle";
-const DxTick = createConfigurationComponent({
+
+const DxTickConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2488,9 +2968,15 @@ const DxTick = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTickConfig);
+
+const DxTick = defineComponent(DxTickConfig);
+
 (DxTick as any).$_optionName = "tick";
-const DxTickInterval = createConfigurationComponent({
+
+const DxTickIntervalConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2515,9 +3001,15 @@ const DxTickInterval = createConfigurationComponent({
     weeks: Number,
     years: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTickIntervalConfig);
+
+const DxTickInterval = defineComponent(DxTickIntervalConfig);
+
 (DxTickInterval as any).$_optionName = "tickInterval";
-const DxTitle = createConfigurationComponent({
+
+const DxTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2544,9 +3036,15 @@ const DxTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTitleConfig);
+
+const DxTitle = defineComponent(DxTitleConfig);
+
 (DxTitle as any).$_optionName = "title";
-const DxTooltip = createConfigurationComponent({
+
+const DxTooltipConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2591,7 +3089,12 @@ const DxTooltip = createConfigurationComponent({
     shared: Boolean,
     zIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipConfig);
+
+const DxTooltip = defineComponent(DxTooltipConfig);
+
 (DxTooltip as any).$_optionName = "tooltip";
 (DxTooltip as any).$_expectedChildren = {
   argumentFormat: { isCollectionItem: false, optionName: "argumentFormat" },
@@ -2601,7 +3104,8 @@ const DxTooltip = createConfigurationComponent({
   shadow: { isCollectionItem: false, optionName: "shadow" },
   tooltipBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxTooltipBorder = createConfigurationComponent({
+
+const DxTooltipBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2618,9 +3122,15 @@ const DxTooltipBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipBorderConfig);
+
+const DxTooltipBorder = defineComponent(DxTooltipBorderConfig);
+
 (DxTooltipBorder as any).$_optionName = "border";
-const DxUrl = createConfigurationComponent({
+
+const DxUrlConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2631,9 +3141,15 @@ const DxUrl = createConfigurationComponent({
     rangeMaxPoint: String,
     rangeMinPoint: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxUrlConfig);
+
+const DxUrl = defineComponent(DxUrlConfig);
+
 (DxUrl as any).$_optionName = "url";
-const DxValueAxis = createConfigurationComponent({
+
+const DxValueAxisConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2736,7 +3252,12 @@ const DxValueAxis = createConfigurationComponent({
     wholeRange: [Array, Object],
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxValueAxisConfig);
+
+const DxValueAxis = defineComponent(DxValueAxisConfig);
+
 (DxValueAxis as any).$_optionName = "valueAxis";
 (DxValueAxis as any).$_isCollectionItem = true;
 (DxValueAxis as any).$_expectedChildren = {
@@ -2755,7 +3276,8 @@ const DxValueAxis = createConfigurationComponent({
   visualRange: { isCollectionItem: false, optionName: "visualRange" },
   wholeRange: { isCollectionItem: false, optionName: "wholeRange" }
 };
-const DxValueErrorBar = createConfigurationComponent({
+
+const DxValueErrorBarConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2780,9 +3302,15 @@ const DxValueErrorBar = createConfigurationComponent({
     type: String,
     value: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxValueErrorBarConfig);
+
+const DxValueErrorBar = defineComponent(DxValueErrorBarConfig);
+
 (DxValueErrorBar as any).$_optionName = "valueErrorBar";
-const DxVerticalLine = createConfigurationComponent({
+
+const DxVerticalLineConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2801,13 +3329,19 @@ const DxVerticalLine = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxVerticalLineConfig);
+
+const DxVerticalLine = defineComponent(DxVerticalLineConfig);
+
 (DxVerticalLine as any).$_optionName = "verticalLine";
 (DxVerticalLine as any).$_expectedChildren = {
   horizontalLineLabel: { isCollectionItem: false, optionName: "label" },
   label: { isCollectionItem: false, optionName: "label" }
 };
-const DxVisualRange = createConfigurationComponent({
+
+const DxVisualRangeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2820,9 +3354,15 @@ const DxVisualRange = createConfigurationComponent({
     length: [Number, Object, String],
     startValue: [Date, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxVisualRangeConfig);
+
+const DxVisualRange = defineComponent(DxVisualRangeConfig);
+
 (DxVisualRange as any).$_optionName = "visualRange";
-const DxWholeRange = createConfigurationComponent({
+
+const DxWholeRangeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2835,9 +3375,15 @@ const DxWholeRange = createConfigurationComponent({
     length: [Number, Object, String],
     startValue: [Date, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxWholeRangeConfig);
+
+const DxWholeRange = defineComponent(DxWholeRangeConfig);
+
 (DxWholeRange as any).$_optionName = "wholeRange";
-const DxWidth = createConfigurationComponent({
+
+const DxWidthConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2848,9 +3394,15 @@ const DxWidth = createConfigurationComponent({
     rangeMaxPoint: Number,
     rangeMinPoint: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxWidthConfig);
+
+const DxWidth = defineComponent(DxWidthConfig);
+
 (DxWidth as any).$_optionName = "width";
-const DxZoomAndPan = createConfigurationComponent({
+
+const DxZoomAndPanConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2871,12 +3423,18 @@ const DxZoomAndPan = createConfigurationComponent({
     panKey: String,
     valueAxis: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxZoomAndPanConfig);
+
+const DxZoomAndPan = defineComponent(DxZoomAndPanConfig);
+
 (DxZoomAndPan as any).$_optionName = "zoomAndPan";
 (DxZoomAndPan as any).$_expectedChildren = {
   dragBoxStyle: { isCollectionItem: false, optionName: "dragBoxStyle" }
 };
 
+
 export default DxChart;
 export {
   DxChart,
diff --git a/packages/devextreme-vue/src/chat.ts b/packages/devextreme-vue/src/chat.ts
index 16964fd857a0..936b36bf1458 100644
--- a/packages/devextreme-vue/src/chat.ts
+++ b/packages/devextreme-vue/src/chat.ts
@@ -1,11 +1,10 @@
 import Chat, { Properties } from "devextreme/ui/chat";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
   "activeStateEnabled" |
-  "dataSource" |
   "disabled" |
   "elementAttr" |
   "focusStateEnabled" |
@@ -26,11 +25,11 @@ type AccessibleOptions = Pick<Properties,
 interface DxChat extends AccessibleOptions {
   readonly instance?: Chat;
 }
-const DxChat = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
-    dataSource: {},
     disabled: Boolean,
     elementAttr: Object,
     focusStateEnabled: Boolean,
@@ -52,7 +51,6 @@ const DxChat = createComponent({
     "update:hoveredElement": null,
     "update:accessKey": null,
     "update:activeStateEnabled": null,
-    "update:dataSource": null,
     "update:disabled": null,
     "update:elementAttr": null,
     "update:focusStateEnabled": null,
@@ -82,9 +80,14 @@ const DxChat = createComponent({
       user: { isCollectionItem: false, optionName: "user" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxChat = defineComponent(componentConfig);
+
 
-const DxAuthor = createConfigurationComponent({
+const DxAuthorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -97,9 +100,15 @@ const DxAuthor = createConfigurationComponent({
     id: [Number, String],
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAuthorConfig);
+
+const DxAuthor = defineComponent(DxAuthorConfig);
+
 (DxAuthor as any).$_optionName = "author";
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -111,16 +120,22 @@ const DxItem = createConfigurationComponent({
   props: {
     author: Object,
     text: String,
-    timestamp: [Date, Number, String],
+    timestamp: String,
     typing: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
 (DxItem as any).$_expectedChildren = {
   author: { isCollectionItem: false, optionName: "author" }
 };
-const DxUser = createConfigurationComponent({
+
+const DxUserConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -133,9 +148,15 @@ const DxUser = createConfigurationComponent({
     id: [Number, String],
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxUserConfig);
+
+const DxUser = defineComponent(DxUserConfig);
+
 (DxUser as any).$_optionName = "user";
 
+
 export default DxChat;
 export {
   DxChat,
diff --git a/packages/devextreme-vue/src/check-box.ts b/packages/devextreme-vue/src/check-box.ts
index ffc83a5a812d..8bd2d6279310 100644
--- a/packages/devextreme-vue/src/check-box.ts
+++ b/packages/devextreme-vue/src/check-box.ts
@@ -1,5 +1,6 @@
 import CheckBox, { Properties } from "devextreme/ui/check_box";
-import { createComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -37,7 +38,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxCheckBox extends AccessibleOptions {
   readonly instance?: CheckBox;
 }
-const DxCheckBox = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -114,7 +116,11 @@ const DxCheckBox = createComponent({
     (this as any).$_WidgetClass = CheckBox;
     (this as any).$_hasAsyncTemplate = true;
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxCheckBox = defineComponent(componentConfig);
 
 export default DxCheckBox;
 export {
diff --git a/packages/devextreme-vue/src/circular-gauge.ts b/packages/devextreme-vue/src/circular-gauge.ts
index 63c51a2e31ae..689e7e660988 100644
--- a/packages/devextreme-vue/src/circular-gauge.ts
+++ b/packages/devextreme-vue/src/circular-gauge.ts
@@ -1,6 +1,6 @@
 import CircularGauge, { Properties } from "devextreme/viz/circular_gauge";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "animation" |
@@ -40,7 +40,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxCircularGauge extends AccessibleOptions {
   readonly instance?: CircularGauge;
 }
-const DxCircularGauge = createComponent({
+
+const componentConfig = {
   props: {
     animation: Object,
     centerTemplate: {},
@@ -134,9 +135,14 @@ const DxCircularGauge = createComponent({
       valueIndicator: { isCollectionItem: false, optionName: "valueIndicator" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxCircularGauge = defineComponent(componentConfig);
 
-const DxAnimation = createConfigurationComponent({
+
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -149,9 +155,15 @@ const DxAnimation = createConfigurationComponent({
     easing: String,
     enabled: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
-const DxBackgroundColor = createConfigurationComponent({
+
+const DxBackgroundColorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -162,9 +174,15 @@ const DxBackgroundColor = createConfigurationComponent({
     base: String,
     fillId: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBackgroundColorConfig);
+
+const DxBackgroundColor = defineComponent(DxBackgroundColorConfig);
+
 (DxBackgroundColor as any).$_optionName = "backgroundColor";
-const DxBorder = createConfigurationComponent({
+
+const DxBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -181,9 +199,15 @@ const DxBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBorderConfig);
+
+const DxBorder = defineComponent(DxBorderConfig);
+
 (DxBorder as any).$_optionName = "border";
-const DxColor = createConfigurationComponent({
+
+const DxColorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -194,9 +218,15 @@ const DxColor = createConfigurationComponent({
     base: String,
     fillId: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColorConfig);
+
+const DxColor = defineComponent(DxColorConfig);
+
 (DxColor as any).$_optionName = "color";
-const DxExport = createConfigurationComponent({
+
+const DxExportConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -217,9 +247,15 @@ const DxExport = createConfigurationComponent({
     printingEnabled: Boolean,
     svgToCanvas: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxExportConfig);
+
+const DxExport = defineComponent(DxExportConfig);
+
 (DxExport as any).$_optionName = "export";
-const DxFont = createConfigurationComponent({
+
+const DxFontConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -236,9 +272,15 @@ const DxFont = createConfigurationComponent({
     size: [Number, String],
     weight: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFontConfig);
+
+const DxFont = defineComponent(DxFontConfig);
+
 (DxFont as any).$_optionName = "font";
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -257,9 +299,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxGeometry = createConfigurationComponent({
+
+const DxGeometryConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -270,9 +318,15 @@ const DxGeometry = createConfigurationComponent({
     endAngle: Number,
     startAngle: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGeometryConfig);
+
+const DxGeometry = defineComponent(DxGeometryConfig);
+
 (DxGeometry as any).$_optionName = "geometry";
-const DxLabel = createConfigurationComponent({
+
+const DxLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -295,13 +349,19 @@ const DxLabel = createConfigurationComponent({
     useRangeColors: Boolean,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelConfig);
+
+const DxLabel = defineComponent(DxLabelConfig);
+
 (DxLabel as any).$_optionName = "label";
 (DxLabel as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
   format: { isCollectionItem: false, optionName: "format" }
 };
-const DxLoadingIndicator = createConfigurationComponent({
+
+const DxLoadingIndicatorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -316,12 +376,18 @@ const DxLoadingIndicator = createConfigurationComponent({
     show: Boolean,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLoadingIndicatorConfig);
+
+const DxLoadingIndicator = defineComponent(DxLoadingIndicatorConfig);
+
 (DxLoadingIndicator as any).$_optionName = "loadingIndicator";
 (DxLoadingIndicator as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxMargin = createConfigurationComponent({
+
+const DxMarginConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -336,9 +402,15 @@ const DxMargin = createConfigurationComponent({
     right: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMarginConfig);
+
+const DxMargin = defineComponent(DxMarginConfig);
+
 (DxMargin as any).$_optionName = "margin";
-const DxMinorTick = createConfigurationComponent({
+
+const DxMinorTickConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -355,9 +427,15 @@ const DxMinorTick = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMinorTickConfig);
+
+const DxMinorTick = defineComponent(DxMinorTickConfig);
+
 (DxMinorTick as any).$_optionName = "minorTick";
-const DxRange = createConfigurationComponent({
+
+const DxRangeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -370,13 +448,19 @@ const DxRange = createConfigurationComponent({
     endValue: Number,
     startValue: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRangeConfig);
+
+const DxRange = defineComponent(DxRangeConfig);
+
 (DxRange as any).$_optionName = "ranges";
 (DxRange as any).$_isCollectionItem = true;
 (DxRange as any).$_expectedChildren = {
   color: { isCollectionItem: false, optionName: "color" }
 };
-const DxRangeContainer = createConfigurationComponent({
+
+const DxRangeContainerConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -397,13 +481,19 @@ const DxRangeContainer = createConfigurationComponent({
     ranges: Array,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRangeContainerConfig);
+
+const DxRangeContainer = defineComponent(DxRangeContainerConfig);
+
 (DxRangeContainer as any).$_optionName = "rangeContainer";
 (DxRangeContainer as any).$_expectedChildren = {
   backgroundColor: { isCollectionItem: false, optionName: "backgroundColor" },
   range: { isCollectionItem: true, optionName: "ranges" }
 };
-const DxScale = createConfigurationComponent({
+
+const DxScaleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -434,14 +524,20 @@ const DxScale = createConfigurationComponent({
     tick: Object,
     tickInterval: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxScaleConfig);
+
+const DxScale = defineComponent(DxScaleConfig);
+
 (DxScale as any).$_optionName = "scale";
 (DxScale as any).$_expectedChildren = {
   label: { isCollectionItem: false, optionName: "label" },
   minorTick: { isCollectionItem: false, optionName: "minorTick" },
   tick: { isCollectionItem: false, optionName: "tick" }
 };
-const DxShadow = createConfigurationComponent({
+
+const DxShadowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -458,9 +554,15 @@ const DxShadow = createConfigurationComponent({
     offsetY: Number,
     opacity: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShadowConfig);
+
+const DxShadow = defineComponent(DxShadowConfig);
+
 (DxShadow as any).$_optionName = "shadow";
-const DxSize = createConfigurationComponent({
+
+const DxSizeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -471,9 +573,15 @@ const DxSize = createConfigurationComponent({
     height: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSizeConfig);
+
+const DxSize = defineComponent(DxSizeConfig);
+
 (DxSize as any).$_optionName = "size";
-const DxSubtitle = createConfigurationComponent({
+
+const DxSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -490,12 +598,18 @@ const DxSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSubtitleConfig);
+
+const DxSubtitle = defineComponent(DxSubtitleConfig);
+
 (DxSubtitle as any).$_optionName = "subtitle";
 (DxSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxSubvalueIndicator = createConfigurationComponent({
+
+const DxSubvalueIndicatorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -540,13 +654,19 @@ const DxSubvalueIndicator = createConfigurationComponent({
     verticalOrientation: String,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSubvalueIndicatorConfig);
+
+const DxSubvalueIndicator = defineComponent(DxSubvalueIndicatorConfig);
+
 (DxSubvalueIndicator as any).$_optionName = "subvalueIndicator";
 (DxSubvalueIndicator as any).$_expectedChildren = {
   color: { isCollectionItem: false, optionName: "color" },
   text: { isCollectionItem: false, optionName: "text" }
 };
-const DxText = createConfigurationComponent({
+
+const DxTextConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -561,13 +681,19 @@ const DxText = createConfigurationComponent({
     format: [Object, Function, String],
     indent: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTextConfig);
+
+const DxText = defineComponent(DxTextConfig);
+
 (DxText as any).$_optionName = "text";
 (DxText as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
   format: { isCollectionItem: false, optionName: "format" }
 };
-const DxTick = createConfigurationComponent({
+
+const DxTickConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -584,9 +710,15 @@ const DxTick = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTickConfig);
+
+const DxTick = defineComponent(DxTickConfig);
+
 (DxTick as any).$_optionName = "tick";
-const DxTitle = createConfigurationComponent({
+
+const DxTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -611,14 +743,20 @@ const DxTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTitleConfig);
+
+const DxTitle = defineComponent(DxTitleConfig);
+
 (DxTitle as any).$_optionName = "title";
 (DxTitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
   margin: { isCollectionItem: false, optionName: "margin" },
   subtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxTooltip = createConfigurationComponent({
+
+const DxTooltipConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -657,7 +795,12 @@ const DxTooltip = createConfigurationComponent({
     shadow: Object,
     zIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipConfig);
+
+const DxTooltip = defineComponent(DxTooltipConfig);
+
 (DxTooltip as any).$_optionName = "tooltip";
 (DxTooltip as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -665,7 +808,8 @@ const DxTooltip = createConfigurationComponent({
   format: { isCollectionItem: false, optionName: "format" },
   shadow: { isCollectionItem: false, optionName: "shadow" }
 };
-const DxValueIndicator = createConfigurationComponent({
+
+const DxValueIndicatorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -710,9 +854,15 @@ const DxValueIndicator = createConfigurationComponent({
     verticalOrientation: String,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxValueIndicatorConfig);
+
+const DxValueIndicator = defineComponent(DxValueIndicatorConfig);
+
 (DxValueIndicator as any).$_optionName = "valueIndicator";
 
+
 export default DxCircularGauge;
 export {
   DxCircularGauge,
diff --git a/packages/devextreme-vue/src/color-box.ts b/packages/devextreme-vue/src/color-box.ts
index 2bedf865b17c..a43be440cca3 100644
--- a/packages/devextreme-vue/src/color-box.ts
+++ b/packages/devextreme-vue/src/color-box.ts
@@ -1,6 +1,6 @@
 import ColorBox, { Properties } from "devextreme/ui/color_box";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "acceptCustomValue" |
@@ -67,7 +67,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxColorBox extends AccessibleOptions {
   readonly instance?: ColorBox;
 }
-const DxColorBox = createComponent({
+
+const componentConfig = {
   props: {
     acceptCustomValue: Boolean,
     accessKey: String,
@@ -206,9 +207,14 @@ const DxColorBox = createComponent({
       dropDownOptions: { isCollectionItem: false, optionName: "dropDownOptions" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxColorBox = defineComponent(componentConfig);
+
 
-const DxAnimation = createConfigurationComponent({
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -219,13 +225,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -236,9 +248,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -249,9 +267,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxButton = createConfigurationComponent({
+
+const DxButtonConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -264,13 +288,19 @@ const DxButton = createConfigurationComponent({
     name: String,
     options: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxButtonConfig);
+
+const DxButton = defineComponent(DxButtonConfig);
+
 (DxButton as any).$_optionName = "buttons";
 (DxButton as any).$_isCollectionItem = true;
 (DxButton as any).$_expectedChildren = {
   options: { isCollectionItem: false, optionName: "options" }
 };
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -281,9 +311,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxDropDownOptions = createConfigurationComponent({
+
+const DxDropDownOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -390,14 +426,20 @@ const DxDropDownOptions = createConfigurationComponent({
     width: [Function, Number, String],
     wrapperAttr: {}
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDropDownOptionsConfig);
+
+const DxDropDownOptions = defineComponent(DxDropDownOptionsConfig);
+
 (DxDropDownOptions as any).$_optionName = "dropDownOptions";
 (DxDropDownOptions as any).$_expectedChildren = {
   animation: { isCollectionItem: false, optionName: "animation" },
   position: { isCollectionItem: false, optionName: "position" },
   toolbarItem: { isCollectionItem: true, optionName: "toolbarItems" }
 };
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -414,12 +456,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -446,13 +494,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -463,9 +517,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -476,9 +536,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxOptions = createConfigurationComponent({
+
+const DxOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -535,9 +601,15 @@ const DxOptions = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOptionsConfig);
+
+const DxOptions = defineComponent(DxOptionsConfig);
+
 (DxOptions as any).$_optionName = "options";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -558,9 +630,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -587,9 +665,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -606,9 +690,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
-const DxToolbarItem = createConfigurationComponent({
+
+const DxToolbarItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -641,10 +731,16 @@ const DxToolbarItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarItemConfig);
+
+const DxToolbarItem = defineComponent(DxToolbarItemConfig);
+
 (DxToolbarItem as any).$_optionName = "toolbarItems";
 (DxToolbarItem as any).$_isCollectionItem = true;
 
+
 export default DxColorBox;
 export {
   DxColorBox,
diff --git a/packages/devextreme-vue/src/common/grids.ts b/packages/devextreme-vue/src/common/grids.ts
index 6ccb67c5afa2..c996ac7cbf7c 100644
--- a/packages/devextreme-vue/src/common/grids.ts
+++ b/packages/devextreme-vue/src/common/grids.ts
@@ -30,7 +30,6 @@ export {
     FilterRow,
     FilterRowOperationDescriptions,
     FilterType,
-    FixedPosition,
     GridBase,
     GridBaseOptions,
     GridsEditMode,
diff --git a/packages/devextreme-vue/src/context-menu.ts b/packages/devextreme-vue/src/context-menu.ts
index 5aa0359798aa..6275b3aebed8 100644
--- a/packages/devextreme-vue/src/context-menu.ts
+++ b/packages/devextreme-vue/src/context-menu.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/context_menu";
 import ContextMenu, { Properties } from "devextreme/ui/context_menu";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -53,7 +53,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxContextMenu extends AccessibleOptions {
   readonly instance?: ContextMenu;
 }
-const DxContextMenu = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -164,9 +165,14 @@ const DxContextMenu = createComponent({
       showSubmenuMode: { isCollectionItem: false, optionName: "showSubmenuMode" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxContextMenu = defineComponent(componentConfig);
+
 
-const DxAnimation = createConfigurationComponent({
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -177,13 +183,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -194,9 +206,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -207,9 +225,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -220,9 +244,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxDelay = createConfigurationComponent({
+
+const DxDelayConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -233,9 +263,15 @@ const DxDelay = createConfigurationComponent({
     hide: Number,
     show: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDelayConfig);
+
+const DxDelay = defineComponent(DxDelayConfig);
+
 (DxDelay as any).$_optionName = "delay";
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -252,12 +288,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -284,13 +326,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -317,10 +365,16 @@ const DxItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -331,9 +385,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -344,9 +404,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -367,9 +433,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -396,9 +468,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxShowEvent = createConfigurationComponent({
+
+const DxShowEventConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -409,9 +487,15 @@ const DxShowEvent = createConfigurationComponent({
     delay: Number,
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowEventConfig);
+
+const DxShowEvent = defineComponent(DxShowEventConfig);
+
 (DxShowEvent as any).$_optionName = "showEvent";
-const DxShowSubmenuMode = createConfigurationComponent({
+
+const DxShowSubmenuModeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -422,12 +506,18 @@ const DxShowSubmenuMode = createConfigurationComponent({
     delay: [Number, Object],
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowSubmenuModeConfig);
+
+const DxShowSubmenuMode = defineComponent(DxShowSubmenuModeConfig);
+
 (DxShowSubmenuMode as any).$_optionName = "showSubmenuMode";
 (DxShowSubmenuMode as any).$_expectedChildren = {
   delay: { isCollectionItem: false, optionName: "delay" }
 };
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -444,9 +534,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
 
+
 export default DxContextMenu;
 export {
   DxContextMenu,
diff --git a/packages/devextreme-vue/src/data-grid.ts b/packages/devextreme-vue/src/data-grid.ts
index 752aee36edf5..55087f00ba53 100644
--- a/packages/devextreme-vue/src/data-grid.ts
+++ b/packages/devextreme-vue/src/data-grid.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/data_grid";
 import DataGrid, { Properties } from "devextreme/ui/data_grid";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -125,7 +125,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxDataGrid extends AccessibleOptions {
   readonly instance?: DataGrid;
 }
-const DxDataGrid = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -404,9 +405,14 @@ const DxDataGrid = createComponent({
       toolbar: { isCollectionItem: false, optionName: "toolbar" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxDataGrid = defineComponent(componentConfig);
 
-const DxAnimation = createConfigurationComponent({
+
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -417,13 +423,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAsyncRule = createConfigurationComponent({
+
+const DxAsyncRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -440,13 +452,19 @@ const DxAsyncRule = createConfigurationComponent({
     type: String,
     validationCallback: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAsyncRuleConfig);
+
+const DxAsyncRule = defineComponent(DxAsyncRuleConfig);
+
 (DxAsyncRule as any).$_optionName = "validationRules";
 (DxAsyncRule as any).$_isCollectionItem = true;
 (DxAsyncRule as any).$_predefinedProps = {
   type: "async"
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -457,9 +475,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -470,9 +494,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxButton = createConfigurationComponent({
+
+const DxButtonConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -497,10 +527,16 @@ const DxButton = createConfigurationComponent({
     text: String,
     visible: [Boolean, Function]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxButtonConfig);
+
+const DxButton = defineComponent(DxButtonConfig);
+
 (DxButton as any).$_optionName = "buttons";
 (DxButton as any).$_isCollectionItem = true;
-const DxChange = createConfigurationComponent({
+
+const DxChangeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -515,10 +551,16 @@ const DxChange = createConfigurationComponent({
     insertBeforeKey: {},
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxChangeConfig);
+
+const DxChange = defineComponent(DxChangeConfig);
+
 (DxChange as any).$_optionName = "changes";
 (DxChange as any).$_isCollectionItem = true;
-const DxColCountByScreen = createConfigurationComponent({
+
+const DxColCountByScreenConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -533,9 +575,15 @@ const DxColCountByScreen = createConfigurationComponent({
     sm: Number,
     xs: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColCountByScreenConfig);
+
+const DxColCountByScreen = defineComponent(DxColCountByScreenConfig);
+
 (DxColCountByScreen as any).$_optionName = "colCountByScreen";
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -546,9 +594,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxColumn = createConfigurationComponent({
+
+const DxColumnConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -681,7 +735,12 @@ const DxColumn = createConfigurationComponent({
     visibleIndex: Number,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnConfig);
+
+const DxColumn = defineComponent(DxColumnConfig);
+
 (DxColumn as any).$_optionName = "columns";
 (DxColumn as any).$_isCollectionItem = true;
 (DxColumn as any).$_expectedChildren = {
@@ -703,7 +762,8 @@ const DxColumn = createConfigurationComponent({
   StringLengthRule: { isCollectionItem: true, optionName: "validationRules" },
   validationRule: { isCollectionItem: true, optionName: "validationRules" }
 };
-const DxColumnChooser = createConfigurationComponent({
+
+const DxColumnChooserConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -736,7 +796,12 @@ const DxColumnChooser = createConfigurationComponent({
     title: String,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnChooserConfig);
+
+const DxColumnChooser = defineComponent(DxColumnChooserConfig);
+
 (DxColumnChooser as any).$_optionName = "columnChooser";
 (DxColumnChooser as any).$_expectedChildren = {
   columnChooserSearch: { isCollectionItem: false, optionName: "search" },
@@ -745,7 +810,8 @@ const DxColumnChooser = createConfigurationComponent({
   search: { isCollectionItem: false, optionName: "search" },
   selection: { isCollectionItem: false, optionName: "selection" }
 };
-const DxColumnChooserSearch = createConfigurationComponent({
+
+const DxColumnChooserSearchConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -758,9 +824,15 @@ const DxColumnChooserSearch = createConfigurationComponent({
     enabled: Boolean,
     timeout: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnChooserSearchConfig);
+
+const DxColumnChooserSearch = defineComponent(DxColumnChooserSearchConfig);
+
 (DxColumnChooserSearch as any).$_optionName = "search";
-const DxColumnChooserSelection = createConfigurationComponent({
+
+const DxColumnChooserSelectionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -773,9 +845,15 @@ const DxColumnChooserSelection = createConfigurationComponent({
     recursive: Boolean,
     selectByClick: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnChooserSelectionConfig);
+
+const DxColumnChooserSelection = defineComponent(DxColumnChooserSelectionConfig);
+
 (DxColumnChooserSelection as any).$_optionName = "selection";
-const DxColumnFixing = createConfigurationComponent({
+
+const DxColumnFixingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -786,13 +864,19 @@ const DxColumnFixing = createConfigurationComponent({
     enabled: Boolean,
     texts: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnFixingConfig);
+
+const DxColumnFixing = defineComponent(DxColumnFixingConfig);
+
 (DxColumnFixing as any).$_optionName = "columnFixing";
 (DxColumnFixing as any).$_expectedChildren = {
   columnFixingTexts: { isCollectionItem: false, optionName: "texts" },
   texts: { isCollectionItem: false, optionName: "texts" }
 };
-const DxColumnFixingTexts = createConfigurationComponent({
+
+const DxColumnFixingTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -807,9 +891,15 @@ const DxColumnFixingTexts = createConfigurationComponent({
     rightPosition: String,
     unfix: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnFixingTextsConfig);
+
+const DxColumnFixingTexts = defineComponent(DxColumnFixingTextsConfig);
+
 (DxColumnFixingTexts as any).$_optionName = "texts";
-const DxColumnHeaderFilter = createConfigurationComponent({
+
+const DxColumnHeaderFilterConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -832,13 +922,19 @@ const DxColumnHeaderFilter = createConfigurationComponent({
     searchMode: String,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnHeaderFilterConfig);
+
+const DxColumnHeaderFilter = defineComponent(DxColumnHeaderFilterConfig);
+
 (DxColumnHeaderFilter as any).$_optionName = "headerFilter";
 (DxColumnHeaderFilter as any).$_expectedChildren = {
   columnHeaderFilterSearch: { isCollectionItem: false, optionName: "search" },
   search: { isCollectionItem: false, optionName: "search" }
 };
-const DxColumnHeaderFilterSearch = createConfigurationComponent({
+
+const DxColumnHeaderFilterSearchConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -855,9 +951,15 @@ const DxColumnHeaderFilterSearch = createConfigurationComponent({
     searchExpr: [Array, Function, String],
     timeout: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnHeaderFilterSearchConfig);
+
+const DxColumnHeaderFilterSearch = defineComponent(DxColumnHeaderFilterSearchConfig);
+
 (DxColumnHeaderFilterSearch as any).$_optionName = "search";
-const DxColumnLookup = createConfigurationComponent({
+
+const DxColumnLookupConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -874,9 +976,15 @@ const DxColumnLookup = createConfigurationComponent({
     displayExpr: [Function, String],
     valueExpr: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnLookupConfig);
+
+const DxColumnLookup = defineComponent(DxColumnLookupConfig);
+
 (DxColumnLookup as any).$_optionName = "lookup";
-const DxCompareRule = createConfigurationComponent({
+
+const DxCompareRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -893,13 +1001,19 @@ const DxCompareRule = createConfigurationComponent({
     message: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCompareRuleConfig);
+
+const DxCompareRule = defineComponent(DxCompareRuleConfig);
+
 (DxCompareRule as any).$_optionName = "validationRules";
 (DxCompareRule as any).$_isCollectionItem = true;
 (DxCompareRule as any).$_predefinedProps = {
   type: "compare"
 };
-const DxCursorOffset = createConfigurationComponent({
+
+const DxCursorOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -910,9 +1024,15 @@ const DxCursorOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCursorOffsetConfig);
+
+const DxCursorOffset = defineComponent(DxCursorOffsetConfig);
+
 (DxCursorOffset as any).$_optionName = "cursorOffset";
-const DxCustomOperation = createConfigurationComponent({
+
+const DxCustomOperationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -935,10 +1055,16 @@ const DxCustomOperation = createConfigurationComponent({
     icon: String,
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCustomOperationConfig);
+
+const DxCustomOperation = defineComponent(DxCustomOperationConfig);
+
 (DxCustomOperation as any).$_optionName = "customOperations";
 (DxCustomOperation as any).$_isCollectionItem = true;
-const DxCustomRule = createConfigurationComponent({
+
+const DxCustomRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -955,13 +1081,19 @@ const DxCustomRule = createConfigurationComponent({
     type: String,
     validationCallback: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCustomRuleConfig);
+
+const DxCustomRule = defineComponent(DxCustomRuleConfig);
+
 (DxCustomRule as any).$_optionName = "validationRules";
 (DxCustomRule as any).$_isCollectionItem = true;
 (DxCustomRule as any).$_predefinedProps = {
   type: "custom"
 };
-const DxDataGridHeaderFilter = createConfigurationComponent({
+
+const DxDataGridHeaderFilterConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -984,7 +1116,12 @@ const DxDataGridHeaderFilter = createConfigurationComponent({
     visible: Boolean,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDataGridHeaderFilterConfig);
+
+const DxDataGridHeaderFilter = defineComponent(DxDataGridHeaderFilterConfig);
+
 (DxDataGridHeaderFilter as any).$_optionName = "headerFilter";
 (DxDataGridHeaderFilter as any).$_expectedChildren = {
   dataGridHeaderFilterSearch: { isCollectionItem: false, optionName: "search" },
@@ -992,7 +1129,8 @@ const DxDataGridHeaderFilter = createConfigurationComponent({
   search: { isCollectionItem: false, optionName: "search" },
   texts: { isCollectionItem: false, optionName: "texts" }
 };
-const DxDataGridHeaderFilterSearch = createConfigurationComponent({
+
+const DxDataGridHeaderFilterSearchConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1007,9 +1145,15 @@ const DxDataGridHeaderFilterSearch = createConfigurationComponent({
     mode: String,
     timeout: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDataGridHeaderFilterSearchConfig);
+
+const DxDataGridHeaderFilterSearch = defineComponent(DxDataGridHeaderFilterSearchConfig);
+
 (DxDataGridHeaderFilterSearch as any).$_optionName = "search";
-const DxDataGridHeaderFilterTexts = createConfigurationComponent({
+
+const DxDataGridHeaderFilterTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1022,9 +1166,15 @@ const DxDataGridHeaderFilterTexts = createConfigurationComponent({
     emptyValue: String,
     ok: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDataGridHeaderFilterTextsConfig);
+
+const DxDataGridHeaderFilterTexts = defineComponent(DxDataGridHeaderFilterTextsConfig);
+
 (DxDataGridHeaderFilterTexts as any).$_optionName = "texts";
-const DxDataGridSelection = createConfigurationComponent({
+
+const DxDataGridSelectionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1043,9 +1193,15 @@ const DxDataGridSelection = createConfigurationComponent({
     sensitivity: String,
     showCheckBoxesMode: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDataGridSelectionConfig);
+
+const DxDataGridSelection = defineComponent(DxDataGridSelectionConfig);
+
 (DxDataGridSelection as any).$_optionName = "selection";
-const DxEditing = createConfigurationComponent({
+
+const DxEditingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1084,7 +1240,12 @@ const DxEditing = createConfigurationComponent({
     texts: {},
     useIcons: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxEditingConfig);
+
+const DxEditing = defineComponent(DxEditingConfig);
+
 (DxEditing as any).$_optionName = "editing";
 (DxEditing as any).$_expectedChildren = {
   change: { isCollectionItem: true, optionName: "changes" },
@@ -1093,7 +1254,8 @@ const DxEditing = createConfigurationComponent({
   popup: { isCollectionItem: false, optionName: "popup" },
   texts: { isCollectionItem: false, optionName: "texts" }
 };
-const DxEditingTexts = createConfigurationComponent({
+
+const DxEditingTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1122,9 +1284,15 @@ const DxEditingTexts = createConfigurationComponent({
     undeleteRow: String,
     validationCancelChanges: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxEditingTextsConfig);
+
+const DxEditingTexts = defineComponent(DxEditingTextsConfig);
+
 (DxEditingTexts as any).$_optionName = "texts";
-const DxEmailRule = createConfigurationComponent({
+
+const DxEmailRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1137,13 +1305,19 @@ const DxEmailRule = createConfigurationComponent({
     message: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxEmailRuleConfig);
+
+const DxEmailRule = defineComponent(DxEmailRuleConfig);
+
 (DxEmailRule as any).$_optionName = "validationRules";
 (DxEmailRule as any).$_isCollectionItem = true;
 (DxEmailRule as any).$_predefinedProps = {
   type: "email"
 };
-const DxExport = createConfigurationComponent({
+
+const DxExportConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1158,13 +1332,19 @@ const DxExport = createConfigurationComponent({
     formats: Array,
     texts: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxExportConfig);
+
+const DxExport = defineComponent(DxExportConfig);
+
 (DxExport as any).$_optionName = "export";
 (DxExport as any).$_expectedChildren = {
   exportTexts: { isCollectionItem: false, optionName: "texts" },
   texts: { isCollectionItem: false, optionName: "texts" }
 };
-const DxExportTexts = createConfigurationComponent({
+
+const DxExportTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1177,9 +1357,15 @@ const DxExportTexts = createConfigurationComponent({
     exportSelectedRows: String,
     exportTo: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxExportTextsConfig);
+
+const DxExportTexts = defineComponent(DxExportTextsConfig);
+
 (DxExportTexts as any).$_optionName = "texts";
-const DxField = createConfigurationComponent({
+
+const DxFieldConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1212,7 +1398,12 @@ const DxField = createConfigurationComponent({
     name: String,
     trueText: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFieldConfig);
+
+const DxField = defineComponent(DxFieldConfig);
+
 (DxField as any).$_optionName = "fields";
 (DxField as any).$_isCollectionItem = true;
 (DxField as any).$_expectedChildren = {
@@ -1220,7 +1411,8 @@ const DxField = createConfigurationComponent({
   format: { isCollectionItem: false, optionName: "format" },
   lookup: { isCollectionItem: false, optionName: "lookup" }
 };
-const DxFieldLookup = createConfigurationComponent({
+
+const DxFieldLookupConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1235,9 +1427,15 @@ const DxFieldLookup = createConfigurationComponent({
     displayExpr: [Function, String],
     valueExpr: [Function, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFieldLookupConfig);
+
+const DxFieldLookup = defineComponent(DxFieldLookupConfig);
+
 (DxFieldLookup as any).$_optionName = "lookup";
-const DxFilterBuilder = createConfigurationComponent({
+
+const DxFilterBuilderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1300,7 +1498,12 @@ const DxFilterBuilder = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFilterBuilderConfig);
+
+const DxFilterBuilder = defineComponent(DxFilterBuilderConfig);
+
 (DxFilterBuilder as any).$_optionName = "filterBuilder";
 (DxFilterBuilder as any).$_expectedChildren = {
   customOperation: { isCollectionItem: true, optionName: "customOperations" },
@@ -1308,7 +1511,8 @@ const DxFilterBuilder = createConfigurationComponent({
   filterOperationDescriptions: { isCollectionItem: false, optionName: "filterOperationDescriptions" },
   groupOperationDescriptions: { isCollectionItem: false, optionName: "groupOperationDescriptions" }
 };
-const DxFilterBuilderPopup = createConfigurationComponent({
+
+const DxFilterBuilderPopupConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1415,9 +1619,15 @@ const DxFilterBuilderPopup = createConfigurationComponent({
     width: [Function, Number, String],
     wrapperAttr: {}
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFilterBuilderPopupConfig);
+
+const DxFilterBuilderPopup = defineComponent(DxFilterBuilderPopupConfig);
+
 (DxFilterBuilderPopup as any).$_optionName = "filterBuilderPopup";
-const DxFilterOperationDescriptions = createConfigurationComponent({
+
+const DxFilterOperationDescriptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1450,9 +1660,15 @@ const DxFilterOperationDescriptions = createConfigurationComponent({
     notEqual: String,
     startsWith: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFilterOperationDescriptionsConfig);
+
+const DxFilterOperationDescriptions = defineComponent(DxFilterOperationDescriptionsConfig);
+
 (DxFilterOperationDescriptions as any).$_optionName = "filterOperationDescriptions";
-const DxFilterPanel = createConfigurationComponent({
+
+const DxFilterPanelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1467,13 +1683,19 @@ const DxFilterPanel = createConfigurationComponent({
     texts: Object,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFilterPanelConfig);
+
+const DxFilterPanel = defineComponent(DxFilterPanelConfig);
+
 (DxFilterPanel as any).$_optionName = "filterPanel";
 (DxFilterPanel as any).$_expectedChildren = {
   filterPanelTexts: { isCollectionItem: false, optionName: "texts" },
   texts: { isCollectionItem: false, optionName: "texts" }
 };
-const DxFilterPanelTexts = createConfigurationComponent({
+
+const DxFilterPanelTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1486,9 +1708,15 @@ const DxFilterPanelTexts = createConfigurationComponent({
     createFilter: String,
     filterEnabledHint: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFilterPanelTextsConfig);
+
+const DxFilterPanelTexts = defineComponent(DxFilterPanelTextsConfig);
+
 (DxFilterPanelTexts as any).$_optionName = "texts";
-const DxFilterRow = createConfigurationComponent({
+
+const DxFilterRowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1513,12 +1741,18 @@ const DxFilterRow = createConfigurationComponent({
     showOperationChooser: Boolean,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFilterRowConfig);
+
+const DxFilterRow = defineComponent(DxFilterRowConfig);
+
 (DxFilterRow as any).$_optionName = "filterRow";
 (DxFilterRow as any).$_expectedChildren = {
   operationDescriptions: { isCollectionItem: false, optionName: "operationDescriptions" }
 };
-const DxForm = createConfigurationComponent({
+
+const DxFormConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1607,12 +1841,18 @@ const DxForm = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormConfig);
+
+const DxForm = defineComponent(DxFormConfig);
+
 (DxForm as any).$_optionName = "form";
 (DxForm as any).$_expectedChildren = {
   colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" }
 };
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1631,9 +1871,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxFormItem = createConfigurationComponent({
+
+const DxFormItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1668,7 +1914,12 @@ const DxFormItem = createConfigurationComponent({
     visible: Boolean,
     visibleIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormItemConfig);
+
+const DxFormItem = defineComponent(DxFormItemConfig);
+
 (DxFormItem as any).$_optionName = "formItem";
 (DxFormItem as any).$_expectedChildren = {
   AsyncRule: { isCollectionItem: true, optionName: "validationRules" },
@@ -1683,7 +1934,8 @@ const DxFormItem = createConfigurationComponent({
   StringLengthRule: { isCollectionItem: true, optionName: "validationRules" },
   validationRule: { isCollectionItem: true, optionName: "validationRules" }
 };
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1700,12 +1952,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxGrouping = createConfigurationComponent({
+
+const DxGroupingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1722,13 +1980,19 @@ const DxGrouping = createConfigurationComponent({
     expandMode: String,
     texts: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGroupingConfig);
+
+const DxGrouping = defineComponent(DxGroupingConfig);
+
 (DxGrouping as any).$_optionName = "grouping";
 (DxGrouping as any).$_expectedChildren = {
   groupingTexts: { isCollectionItem: false, optionName: "texts" },
   texts: { isCollectionItem: false, optionName: "texts" }
 };
-const DxGroupingTexts = createConfigurationComponent({
+
+const DxGroupingTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1745,9 +2009,15 @@ const DxGroupingTexts = createConfigurationComponent({
     ungroup: String,
     ungroupAll: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGroupingTextsConfig);
+
+const DxGroupingTexts = defineComponent(DxGroupingTextsConfig);
+
 (DxGroupingTexts as any).$_optionName = "texts";
-const DxGroupItem = createConfigurationComponent({
+
+const DxGroupItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1774,13 +2044,19 @@ const DxGroupItem = createConfigurationComponent({
     summaryType: String,
     valueFormat: [Object, Function, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGroupItemConfig);
+
+const DxGroupItem = defineComponent(DxGroupItemConfig);
+
 (DxGroupItem as any).$_optionName = "groupItems";
 (DxGroupItem as any).$_isCollectionItem = true;
 (DxGroupItem as any).$_expectedChildren = {
   valueFormat: { isCollectionItem: false, optionName: "valueFormat" }
 };
-const DxGroupOperationDescriptions = createConfigurationComponent({
+
+const DxGroupOperationDescriptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1795,9 +2071,15 @@ const DxGroupOperationDescriptions = createConfigurationComponent({
     notOr: String,
     or: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGroupOperationDescriptionsConfig);
+
+const DxGroupOperationDescriptions = defineComponent(DxGroupOperationDescriptionsConfig);
+
 (DxGroupOperationDescriptions as any).$_optionName = "groupOperationDescriptions";
-const DxGroupPanel = createConfigurationComponent({
+
+const DxGroupPanelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1810,9 +2092,15 @@ const DxGroupPanel = createConfigurationComponent({
     emptyPanelText: String,
     visible: [Boolean, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGroupPanelConfig);
+
+const DxGroupPanel = defineComponent(DxGroupPanelConfig);
+
 (DxGroupPanel as any).$_optionName = "groupPanel";
-const DxHeaderFilter = createConfigurationComponent({
+
+const DxHeaderFilterConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1841,9 +2129,15 @@ const DxHeaderFilter = createConfigurationComponent({
     visible: Boolean,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHeaderFilterConfig);
+
+const DxHeaderFilter = defineComponent(DxHeaderFilterConfig);
+
 (DxHeaderFilter as any).$_optionName = "headerFilter";
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1870,13 +2164,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1909,10 +2209,16 @@ const DxItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
-const DxKeyboardNavigation = createConfigurationComponent({
+
+const DxKeyboardNavigationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1927,9 +2233,15 @@ const DxKeyboardNavigation = createConfigurationComponent({
     enterKeyAction: String,
     enterKeyDirection: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxKeyboardNavigationConfig);
+
+const DxKeyboardNavigation = defineComponent(DxKeyboardNavigationConfig);
+
 (DxKeyboardNavigation as any).$_optionName = "keyboardNavigation";
-const DxLabel = createConfigurationComponent({
+
+const DxLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1948,9 +2260,15 @@ const DxLabel = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelConfig);
+
+const DxLabel = defineComponent(DxLabelConfig);
+
 (DxLabel as any).$_optionName = "label";
-const DxLoadPanel = createConfigurationComponent({
+
+const DxLoadPanelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1975,9 +2293,15 @@ const DxLoadPanel = createConfigurationComponent({
     text: String,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLoadPanelConfig);
+
+const DxLoadPanel = defineComponent(DxLoadPanelConfig);
+
 (DxLoadPanel as any).$_optionName = "loadPanel";
-const DxLookup = createConfigurationComponent({
+
+const DxLookupConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1994,9 +2318,15 @@ const DxLookup = createConfigurationComponent({
     displayExpr: [Function, String],
     valueExpr: [String, Function]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLookupConfig);
+
+const DxLookup = defineComponent(DxLookupConfig);
+
 (DxLookup as any).$_optionName = "lookup";
-const DxMasterDetail = createConfigurationComponent({
+
+const DxMasterDetailConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2009,9 +2339,15 @@ const DxMasterDetail = createConfigurationComponent({
     enabled: Boolean,
     template: {}
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMasterDetailConfig);
+
+const DxMasterDetail = defineComponent(DxMasterDetailConfig);
+
 (DxMasterDetail as any).$_optionName = "masterDetail";
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2022,9 +2358,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxNumericRule = createConfigurationComponent({
+
+const DxNumericRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2037,13 +2379,19 @@ const DxNumericRule = createConfigurationComponent({
     message: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxNumericRuleConfig);
+
+const DxNumericRule = defineComponent(DxNumericRuleConfig);
+
 (DxNumericRule as any).$_optionName = "validationRules";
 (DxNumericRule as any).$_isCollectionItem = true;
 (DxNumericRule as any).$_predefinedProps = {
   type: "numeric"
 };
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2054,9 +2402,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxOperationDescriptions = createConfigurationComponent({
+
+const DxOperationDescriptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2085,9 +2439,15 @@ const DxOperationDescriptions = createConfigurationComponent({
     notEqual: String,
     startsWith: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOperationDescriptionsConfig);
+
+const DxOperationDescriptions = defineComponent(DxOperationDescriptionsConfig);
+
 (DxOperationDescriptions as any).$_optionName = "operationDescriptions";
-const DxPager = createConfigurationComponent({
+
+const DxPagerConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2110,9 +2470,15 @@ const DxPager = createConfigurationComponent({
     showPageSizeSelector: Boolean,
     visible: [Boolean, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPagerConfig);
+
+const DxPager = defineComponent(DxPagerConfig);
+
 (DxPager as any).$_optionName = "pager";
-const DxPaging = createConfigurationComponent({
+
+const DxPagingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2125,9 +2491,15 @@ const DxPaging = createConfigurationComponent({
     pageIndex: Number,
     pageSize: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPagingConfig);
+
+const DxPaging = defineComponent(DxPagingConfig);
+
 (DxPaging as any).$_optionName = "paging";
-const DxPatternRule = createConfigurationComponent({
+
+const DxPatternRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2142,13 +2514,19 @@ const DxPatternRule = createConfigurationComponent({
     pattern: [RegExp, String],
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPatternRuleConfig);
+
+const DxPatternRule = defineComponent(DxPatternRuleConfig);
+
 (DxPatternRule as any).$_optionName = "validationRules";
 (DxPatternRule as any).$_isCollectionItem = true;
 (DxPatternRule as any).$_predefinedProps = {
   type: "pattern"
 };
-const DxPopup = createConfigurationComponent({
+
+const DxPopupConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2255,14 +2633,20 @@ const DxPopup = createConfigurationComponent({
     width: [Function, Number, String],
     wrapperAttr: {}
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPopupConfig);
+
+const DxPopup = defineComponent(DxPopupConfig);
+
 (DxPopup as any).$_optionName = "popup";
 (DxPopup as any).$_expectedChildren = {
   animation: { isCollectionItem: false, optionName: "animation" },
   position: { isCollectionItem: false, optionName: "position" },
   toolbarItem: { isCollectionItem: true, optionName: "toolbarItems" }
 };
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2283,9 +2667,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxRangeRule = createConfigurationComponent({
+
+const DxRangeRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2304,13 +2694,19 @@ const DxRangeRule = createConfigurationComponent({
     reevaluate: Boolean,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRangeRuleConfig);
+
+const DxRangeRule = defineComponent(DxRangeRuleConfig);
+
 (DxRangeRule as any).$_optionName = "validationRules";
 (DxRangeRule as any).$_isCollectionItem = true;
 (DxRangeRule as any).$_predefinedProps = {
   type: "range"
 };
-const DxRemoteOperations = createConfigurationComponent({
+
+const DxRemoteOperationsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2329,9 +2725,15 @@ const DxRemoteOperations = createConfigurationComponent({
     sorting: Boolean,
     summary: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRemoteOperationsConfig);
+
+const DxRemoteOperations = defineComponent(DxRemoteOperationsConfig);
+
 (DxRemoteOperations as any).$_optionName = "remoteOperations";
-const DxRequiredRule = createConfigurationComponent({
+
+const DxRequiredRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2344,13 +2746,19 @@ const DxRequiredRule = createConfigurationComponent({
     trim: Boolean,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRequiredRuleConfig);
+
+const DxRequiredRule = defineComponent(DxRequiredRuleConfig);
+
 (DxRequiredRule as any).$_optionName = "validationRules";
 (DxRequiredRule as any).$_isCollectionItem = true;
 (DxRequiredRule as any).$_predefinedProps = {
   type: "required"
 };
-const DxRowDragging = createConfigurationComponent({
+
+const DxRowDraggingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2403,12 +2811,18 @@ const DxRowDragging = createConfigurationComponent({
     scrollSpeed: Number,
     showDragIcons: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRowDraggingConfig);
+
+const DxRowDragging = defineComponent(DxRowDraggingConfig);
+
 (DxRowDragging as any).$_optionName = "rowDragging";
 (DxRowDragging as any).$_expectedChildren = {
   cursorOffset: { isCollectionItem: false, optionName: "cursorOffset" }
 };
-const DxScrolling = createConfigurationComponent({
+
+const DxScrollingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2433,9 +2847,15 @@ const DxScrolling = createConfigurationComponent({
     showScrollbar: String,
     useNative: [Boolean, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxScrollingConfig);
+
+const DxScrolling = defineComponent(DxScrollingConfig);
+
 (DxScrolling as any).$_optionName = "scrolling";
-const DxSearch = createConfigurationComponent({
+
+const DxSearchConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2452,9 +2872,15 @@ const DxSearch = createConfigurationComponent({
     searchExpr: [Array, Function, String],
     timeout: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSearchConfig);
+
+const DxSearch = defineComponent(DxSearchConfig);
+
 (DxSearch as any).$_optionName = "search";
-const DxSearchPanel = createConfigurationComponent({
+
+const DxSearchPanelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2475,9 +2901,15 @@ const DxSearchPanel = createConfigurationComponent({
     visible: Boolean,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSearchPanelConfig);
+
+const DxSearchPanel = defineComponent(DxSearchPanelConfig);
+
 (DxSearchPanel as any).$_optionName = "searchPanel";
-const DxSelection = createConfigurationComponent({
+
+const DxSelectionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2500,9 +2932,15 @@ const DxSelection = createConfigurationComponent({
     sensitivity: String,
     showCheckBoxesMode: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSelectionConfig);
+
+const DxSelection = defineComponent(DxSelectionConfig);
+
 (DxSelection as any).$_optionName = "selection";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2529,9 +2967,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxSortByGroupSummaryInfo = createConfigurationComponent({
+
+const DxSortByGroupSummaryInfoConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2544,10 +2988,16 @@ const DxSortByGroupSummaryInfo = createConfigurationComponent({
     sortOrder: String,
     summaryItem: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSortByGroupSummaryInfoConfig);
+
+const DxSortByGroupSummaryInfo = defineComponent(DxSortByGroupSummaryInfoConfig);
+
 (DxSortByGroupSummaryInfo as any).$_optionName = "sortByGroupSummaryInfo";
 (DxSortByGroupSummaryInfo as any).$_isCollectionItem = true;
-const DxSorting = createConfigurationComponent({
+
+const DxSortingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2564,9 +3014,15 @@ const DxSorting = createConfigurationComponent({
     mode: String,
     showSortIndexes: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSortingConfig);
+
+const DxSorting = defineComponent(DxSortingConfig);
+
 (DxSorting as any).$_optionName = "sorting";
-const DxStateStoring = createConfigurationComponent({
+
+const DxStateStoringConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2585,9 +3041,15 @@ const DxStateStoring = createConfigurationComponent({
     storageKey: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxStateStoringConfig);
+
+const DxStateStoring = defineComponent(DxStateStoringConfig);
+
 (DxStateStoring as any).$_optionName = "stateStoring";
-const DxStringLengthRule = createConfigurationComponent({
+
+const DxStringLengthRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2606,13 +3068,19 @@ const DxStringLengthRule = createConfigurationComponent({
     trim: Boolean,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxStringLengthRuleConfig);
+
+const DxStringLengthRule = defineComponent(DxStringLengthRuleConfig);
+
 (DxStringLengthRule as any).$_optionName = "validationRules";
 (DxStringLengthRule as any).$_isCollectionItem = true;
 (DxStringLengthRule as any).$_predefinedProps = {
   type: "stringLength"
 };
-const DxSummary = createConfigurationComponent({
+
+const DxSummaryConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2631,7 +3099,12 @@ const DxSummary = createConfigurationComponent({
     texts: Object,
     totalItems: Array
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSummaryConfig);
+
+const DxSummary = defineComponent(DxSummaryConfig);
+
 (DxSummary as any).$_optionName = "summary";
 (DxSummary as any).$_expectedChildren = {
   groupItem: { isCollectionItem: true, optionName: "groupItems" },
@@ -2639,7 +3112,8 @@ const DxSummary = createConfigurationComponent({
   texts: { isCollectionItem: false, optionName: "texts" },
   totalItem: { isCollectionItem: true, optionName: "totalItems" }
 };
-const DxSummaryTexts = createConfigurationComponent({
+
+const DxSummaryTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2664,9 +3138,15 @@ const DxSummaryTexts = createConfigurationComponent({
     sum: String,
     sumOtherColumn: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSummaryTextsConfig);
+
+const DxSummaryTexts = defineComponent(DxSummaryTextsConfig);
+
 (DxSummaryTexts as any).$_optionName = "texts";
-const DxTexts = createConfigurationComponent({
+
+const DxTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2749,9 +3229,15 @@ const DxTexts = createConfigurationComponent({
     ungroupAll: String,
     validationCancelChanges: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTextsConfig);
+
+const DxTexts = defineComponent(DxTextsConfig);
+
 (DxTexts as any).$_optionName = "texts";
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2768,9 +3254,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
-const DxToolbar = createConfigurationComponent({
+
+const DxToolbarConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2783,12 +3275,18 @@ const DxToolbar = createConfigurationComponent({
     items: Array,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarConfig);
+
+const DxToolbar = defineComponent(DxToolbarConfig);
+
 (DxToolbar as any).$_optionName = "toolbar";
 (DxToolbar as any).$_expectedChildren = {
   item: { isCollectionItem: true, optionName: "items" }
 };
-const DxToolbarItem = createConfigurationComponent({
+
+const DxToolbarItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2821,10 +3319,16 @@ const DxToolbarItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarItemConfig);
+
+const DxToolbarItem = defineComponent(DxToolbarItemConfig);
+
 (DxToolbarItem as any).$_optionName = "toolbarItems";
 (DxToolbarItem as any).$_isCollectionItem = true;
-const DxTotalItem = createConfigurationComponent({
+
+const DxTotalItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2851,13 +3355,19 @@ const DxTotalItem = createConfigurationComponent({
     summaryType: String,
     valueFormat: [Object, Function, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTotalItemConfig);
+
+const DxTotalItem = defineComponent(DxTotalItemConfig);
+
 (DxTotalItem as any).$_optionName = "totalItems";
 (DxTotalItem as any).$_isCollectionItem = true;
 (DxTotalItem as any).$_expectedChildren = {
   valueFormat: { isCollectionItem: false, optionName: "valueFormat" }
 };
-const DxValidationRule = createConfigurationComponent({
+
+const DxValidationRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2886,13 +3396,19 @@ const DxValidationRule = createConfigurationComponent({
     type: String,
     validationCallback: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxValidationRuleConfig);
+
+const DxValidationRule = defineComponent(DxValidationRuleConfig);
+
 (DxValidationRule as any).$_optionName = "validationRules";
 (DxValidationRule as any).$_isCollectionItem = true;
 (DxValidationRule as any).$_predefinedProps = {
   type: "required"
 };
-const DxValueFormat = createConfigurationComponent({
+
+const DxValueFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2911,9 +3427,15 @@ const DxValueFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxValueFormatConfig);
+
+const DxValueFormat = defineComponent(DxValueFormatConfig);
+
 (DxValueFormat as any).$_optionName = "valueFormat";
 
+
 export default DxDataGrid;
 export {
   DxDataGrid,
diff --git a/packages/devextreme-vue/src/date-box.ts b/packages/devextreme-vue/src/date-box.ts
index 77b0e29e4259..45db9a5197fd 100644
--- a/packages/devextreme-vue/src/date-box.ts
+++ b/packages/devextreme-vue/src/date-box.ts
@@ -1,6 +1,6 @@
 import DateBox, { Properties } from "devextreme/ui/date_box";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "acceptCustomValue" |
@@ -83,7 +83,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxDateBox extends AccessibleOptions {
   readonly instance?: DateBox;
 }
-const DxDateBox = createComponent({
+
+const componentConfig = {
   props: {
     acceptCustomValue: Boolean,
     accessKey: String,
@@ -256,9 +257,14 @@ const DxDateBox = createComponent({
       dropDownOptions: { isCollectionItem: false, optionName: "dropDownOptions" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
 
-const DxAnimation = createConfigurationComponent({
+const DxDateBox = defineComponent(componentConfig);
+
+
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -269,13 +275,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -286,9 +298,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -299,9 +317,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxButton = createConfigurationComponent({
+
+const DxButtonConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -314,13 +338,19 @@ const DxButton = createConfigurationComponent({
     name: String,
     options: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxButtonConfig);
+
+const DxButton = defineComponent(DxButtonConfig);
+
 (DxButton as any).$_optionName = "buttons";
 (DxButton as any).$_isCollectionItem = true;
 (DxButton as any).$_expectedChildren = {
   options: { isCollectionItem: false, optionName: "options" }
 };
-const DxCalendarOptions = createConfigurationComponent({
+
+const DxCalendarOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -420,9 +450,15 @@ const DxCalendarOptions = createConfigurationComponent({
     width: [Function, Number, String],
     zoomLevel: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCalendarOptionsConfig);
+
+const DxCalendarOptions = defineComponent(DxCalendarOptionsConfig);
+
 (DxCalendarOptions as any).$_optionName = "calendarOptions";
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -433,9 +469,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxDisplayFormat = createConfigurationComponent({
+
+const DxDisplayFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -454,9 +496,15 @@ const DxDisplayFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDisplayFormatConfig);
+
+const DxDisplayFormat = defineComponent(DxDisplayFormatConfig);
+
 (DxDisplayFormat as any).$_optionName = "displayFormat";
-const DxDropDownOptions = createConfigurationComponent({
+
+const DxDropDownOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -563,14 +611,20 @@ const DxDropDownOptions = createConfigurationComponent({
     width: [Function, Number, String],
     wrapperAttr: {}
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDropDownOptionsConfig);
+
+const DxDropDownOptions = defineComponent(DxDropDownOptionsConfig);
+
 (DxDropDownOptions as any).$_optionName = "dropDownOptions";
 (DxDropDownOptions as any).$_expectedChildren = {
   animation: { isCollectionItem: false, optionName: "animation" },
   position: { isCollectionItem: false, optionName: "position" },
   toolbarItem: { isCollectionItem: true, optionName: "toolbarItems" }
 };
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -587,12 +641,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -619,13 +679,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -636,9 +702,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -649,9 +721,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxOptions = createConfigurationComponent({
+
+const DxOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -708,9 +786,15 @@ const DxOptions = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOptionsConfig);
+
+const DxOptions = defineComponent(DxOptionsConfig);
+
 (DxOptions as any).$_optionName = "options";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -731,9 +815,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -760,9 +850,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -779,9 +875,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
-const DxToolbarItem = createConfigurationComponent({
+
+const DxToolbarItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -814,10 +916,16 @@ const DxToolbarItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarItemConfig);
+
+const DxToolbarItem = defineComponent(DxToolbarItemConfig);
+
 (DxToolbarItem as any).$_optionName = "toolbarItems";
 (DxToolbarItem as any).$_isCollectionItem = true;
 
+
 export default DxDateBox;
 export {
   DxDateBox,
diff --git a/packages/devextreme-vue/src/date-range-box.ts b/packages/devextreme-vue/src/date-range-box.ts
index 21bdb6261a92..d680ecb0b767 100644
--- a/packages/devextreme-vue/src/date-range-box.ts
+++ b/packages/devextreme-vue/src/date-range-box.ts
@@ -1,6 +1,6 @@
 import DateRangeBox, { Properties } from "devextreme/ui/date_range_box";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "acceptCustomValue" |
@@ -87,7 +87,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxDateRangeBox extends AccessibleOptions {
   readonly instance?: DateRangeBox;
 }
-const DxDateRangeBox = createComponent({
+
+const componentConfig = {
   props: {
     acceptCustomValue: Boolean,
     accessKey: String,
@@ -268,9 +269,14 @@ const DxDateRangeBox = createComponent({
       dropDownOptions: { isCollectionItem: false, optionName: "dropDownOptions" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
 
-const DxAnimation = createConfigurationComponent({
+const DxDateRangeBox = defineComponent(componentConfig);
+
+
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -281,13 +287,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -298,9 +310,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -311,9 +329,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxButton = createConfigurationComponent({
+
+const DxButtonConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -326,13 +350,19 @@ const DxButton = createConfigurationComponent({
     name: String,
     options: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxButtonConfig);
+
+const DxButton = defineComponent(DxButtonConfig);
+
 (DxButton as any).$_optionName = "buttons";
 (DxButton as any).$_isCollectionItem = true;
 (DxButton as any).$_expectedChildren = {
   options: { isCollectionItem: false, optionName: "options" }
 };
-const DxCalendarOptions = createConfigurationComponent({
+
+const DxCalendarOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -432,9 +462,15 @@ const DxCalendarOptions = createConfigurationComponent({
     width: [Function, Number, String],
     zoomLevel: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCalendarOptionsConfig);
+
+const DxCalendarOptions = defineComponent(DxCalendarOptionsConfig);
+
 (DxCalendarOptions as any).$_optionName = "calendarOptions";
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -445,9 +481,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxDisplayFormat = createConfigurationComponent({
+
+const DxDisplayFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -466,9 +508,15 @@ const DxDisplayFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDisplayFormatConfig);
+
+const DxDisplayFormat = defineComponent(DxDisplayFormatConfig);
+
 (DxDisplayFormat as any).$_optionName = "displayFormat";
-const DxDropDownOptions = createConfigurationComponent({
+
+const DxDropDownOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -575,14 +623,20 @@ const DxDropDownOptions = createConfigurationComponent({
     width: [Function, Number, String],
     wrapperAttr: {}
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDropDownOptionsConfig);
+
+const DxDropDownOptions = defineComponent(DxDropDownOptionsConfig);
+
 (DxDropDownOptions as any).$_optionName = "dropDownOptions";
 (DxDropDownOptions as any).$_expectedChildren = {
   animation: { isCollectionItem: false, optionName: "animation" },
   position: { isCollectionItem: false, optionName: "position" },
   toolbarItem: { isCollectionItem: true, optionName: "toolbarItems" }
 };
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -599,12 +653,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -631,13 +691,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -648,9 +714,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -661,9 +733,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxOptions = createConfigurationComponent({
+
+const DxOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -720,9 +798,15 @@ const DxOptions = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOptionsConfig);
+
+const DxOptions = defineComponent(DxOptionsConfig);
+
 (DxOptions as any).$_optionName = "options";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -743,9 +827,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -772,9 +862,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -791,9 +887,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
-const DxToolbarItem = createConfigurationComponent({
+
+const DxToolbarItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -826,10 +928,16 @@ const DxToolbarItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarItemConfig);
+
+const DxToolbarItem = defineComponent(DxToolbarItemConfig);
+
 (DxToolbarItem as any).$_optionName = "toolbarItems";
 (DxToolbarItem as any).$_isCollectionItem = true;
 
+
 export default DxDateRangeBox;
 export {
   DxDateRangeBox,
diff --git a/packages/devextreme-vue/src/defer-rendering.ts b/packages/devextreme-vue/src/defer-rendering.ts
index 7882bca2b1ff..422aeb7c8022 100644
--- a/packages/devextreme-vue/src/defer-rendering.ts
+++ b/packages/devextreme-vue/src/defer-rendering.ts
@@ -1,6 +1,6 @@
 import DeferRendering, { Properties } from "devextreme/ui/defer_rendering";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -30,7 +30,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxDeferRendering extends AccessibleOptions {
   readonly instance?: DeferRendering;
 }
-const DxDeferRendering = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -93,9 +94,14 @@ const DxDeferRendering = createComponent({
       animation: { isCollectionItem: false, optionName: "animation" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxDeferRendering = defineComponent(componentConfig);
 
-const DxAnimation = createConfigurationComponent({
+
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -122,13 +128,19 @@ const DxAnimation = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -139,9 +151,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -152,9 +170,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -165,9 +189,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -184,12 +214,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -200,9 +236,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -213,9 +255,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -236,7 +284,12 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
 (DxPosition as any).$_expectedChildren = {
   at: { isCollectionItem: false, optionName: "at" },
@@ -245,7 +298,8 @@ const DxPosition = createConfigurationComponent({
   my: { isCollectionItem: false, optionName: "my" },
   offset: { isCollectionItem: false, optionName: "offset" }
 };
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -262,9 +316,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
 
+
 export default DxDeferRendering;
 export {
   DxDeferRendering,
diff --git a/packages/devextreme-vue/src/diagram.ts b/packages/devextreme-vue/src/diagram.ts
index 1d059798aca2..7d4b3bf49e4d 100644
--- a/packages/devextreme-vue/src/diagram.ts
+++ b/packages/devextreme-vue/src/diagram.ts
@@ -1,6 +1,6 @@
 import Diagram, { Properties } from "devextreme/ui/diagram";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "autoZoomMode" |
@@ -54,7 +54,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxDiagram extends AccessibleOptions {
   readonly instance?: Diagram;
 }
-const DxDiagram = createComponent({
+
+const componentConfig = {
   props: {
     autoZoomMode: String,
     contextMenu: Object,
@@ -180,9 +181,14 @@ const DxDiagram = createComponent({
       zoomLevel: { isCollectionItem: false, optionName: "zoomLevel" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxDiagram = defineComponent(componentConfig);
+
 
-const DxAutoLayout = createConfigurationComponent({
+const DxAutoLayoutConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -193,9 +199,15 @@ const DxAutoLayout = createConfigurationComponent({
     orientation: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAutoLayoutConfig);
+
+const DxAutoLayout = defineComponent(DxAutoLayoutConfig);
+
 (DxAutoLayout as any).$_optionName = "autoLayout";
-const DxCommand = createConfigurationComponent({
+
+const DxCommandConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -212,10 +224,16 @@ const DxCommand = createConfigurationComponent({
     name: String,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommandConfig);
+
+const DxCommand = defineComponent(DxCommandConfig);
+
 (DxCommand as any).$_optionName = "commands";
 (DxCommand as any).$_isCollectionItem = true;
-const DxCommandItem = createConfigurationComponent({
+
+const DxCommandItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -232,10 +250,16 @@ const DxCommandItem = createConfigurationComponent({
     name: String,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommandItemConfig);
+
+const DxCommandItem = defineComponent(DxCommandItemConfig);
+
 (DxCommandItem as any).$_optionName = "items";
 (DxCommandItem as any).$_isCollectionItem = true;
-const DxConnectionPoint = createConfigurationComponent({
+
+const DxConnectionPointConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -246,10 +270,16 @@ const DxConnectionPoint = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxConnectionPointConfig);
+
+const DxConnectionPoint = defineComponent(DxConnectionPointConfig);
+
 (DxConnectionPoint as any).$_optionName = "connectionPoints";
 (DxConnectionPoint as any).$_isCollectionItem = true;
-const DxContextMenu = createConfigurationComponent({
+
+const DxContextMenuConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -260,12 +290,18 @@ const DxContextMenu = createConfigurationComponent({
     commands: Array,
     enabled: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxContextMenuConfig);
+
+const DxContextMenu = defineComponent(DxContextMenuConfig);
+
 (DxContextMenu as any).$_optionName = "contextMenu";
 (DxContextMenu as any).$_expectedChildren = {
   command: { isCollectionItem: true, optionName: "commands" }
 };
-const DxContextToolbox = createConfigurationComponent({
+
+const DxContextToolboxConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -284,9 +320,15 @@ const DxContextToolbox = createConfigurationComponent({
     shapes: Array,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxContextToolboxConfig);
+
+const DxContextToolbox = defineComponent(DxContextToolboxConfig);
+
 (DxContextToolbox as any).$_optionName = "contextToolbox";
-const DxCustomShape = createConfigurationComponent({
+
+const DxCustomShapeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -369,13 +411,19 @@ const DxCustomShape = createConfigurationComponent({
     toolboxWidthToHeightRatio: Number,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCustomShapeConfig);
+
+const DxCustomShape = defineComponent(DxCustomShapeConfig);
+
 (DxCustomShape as any).$_optionName = "customShapes";
 (DxCustomShape as any).$_isCollectionItem = true;
 (DxCustomShape as any).$_expectedChildren = {
   connectionPoint: { isCollectionItem: true, optionName: "connectionPoints" }
 };
-const DxDefaultItemProperties = createConfigurationComponent({
+
+const DxDefaultItemPropertiesConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -400,9 +448,15 @@ const DxDefaultItemProperties = createConfigurationComponent({
     style: Object,
     textStyle: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDefaultItemPropertiesConfig);
+
+const DxDefaultItemProperties = defineComponent(DxDefaultItemPropertiesConfig);
+
 (DxDefaultItemProperties as any).$_optionName = "defaultItemProperties";
-const DxEdges = createConfigurationComponent({
+
+const DxEdgesConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -441,9 +495,15 @@ const DxEdges = createConfigurationComponent({
     toPointIndexExpr: [Function, String],
     zIndexExpr: [Function, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxEdgesConfig);
+
+const DxEdges = defineComponent(DxEdgesConfig);
+
 (DxEdges as any).$_optionName = "edges";
-const DxEditing = createConfigurationComponent({
+
+const DxEditingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -468,9 +528,15 @@ const DxEditing = createConfigurationComponent({
     allowMoveShape: Boolean,
     allowResizeShape: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxEditingConfig);
+
+const DxEditing = defineComponent(DxEditingConfig);
+
 (DxEditing as any).$_optionName = "editing";
-const DxExport = createConfigurationComponent({
+
+const DxExportConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -479,9 +545,15 @@ const DxExport = createConfigurationComponent({
   props: {
     fileName: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxExportConfig);
+
+const DxExport = defineComponent(DxExportConfig);
+
 (DxExport as any).$_optionName = "export";
-const DxGridSize = createConfigurationComponent({
+
+const DxGridSizeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -492,9 +564,15 @@ const DxGridSize = createConfigurationComponent({
     items: Array,
     value: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGridSizeConfig);
+
+const DxGridSize = defineComponent(DxGridSizeConfig);
+
 (DxGridSize as any).$_optionName = "gridSize";
-const DxGroup = createConfigurationComponent({
+
+const DxGroupConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -513,10 +591,16 @@ const DxGroup = createConfigurationComponent({
     shapes: Array,
     title: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGroupConfig);
+
+const DxGroup = defineComponent(DxGroupConfig);
+
 (DxGroup as any).$_optionName = "groups";
 (DxGroup as any).$_isCollectionItem = true;
-const DxHistoryToolbar = createConfigurationComponent({
+
+const DxHistoryToolbarConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -527,12 +611,18 @@ const DxHistoryToolbar = createConfigurationComponent({
     commands: Array,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHistoryToolbarConfig);
+
+const DxHistoryToolbar = defineComponent(DxHistoryToolbarConfig);
+
 (DxHistoryToolbar as any).$_optionName = "historyToolbar";
 (DxHistoryToolbar as any).$_expectedChildren = {
   command: { isCollectionItem: true, optionName: "commands" }
 };
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -553,10 +643,16 @@ const DxItem = createConfigurationComponent({
     text: String,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
-const DxMainToolbar = createConfigurationComponent({
+
+const DxMainToolbarConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -567,12 +663,18 @@ const DxMainToolbar = createConfigurationComponent({
     commands: Array,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMainToolbarConfig);
+
+const DxMainToolbar = defineComponent(DxMainToolbarConfig);
+
 (DxMainToolbar as any).$_optionName = "mainToolbar";
 (DxMainToolbar as any).$_expectedChildren = {
   command: { isCollectionItem: true, optionName: "commands" }
 };
-const DxNodes = createConfigurationComponent({
+
+const DxNodesConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -619,12 +721,18 @@ const DxNodes = createConfigurationComponent({
     widthExpr: [Function, String],
     zIndexExpr: [Function, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxNodesConfig);
+
+const DxNodes = defineComponent(DxNodesConfig);
+
 (DxNodes as any).$_optionName = "nodes";
 (DxNodes as any).$_expectedChildren = {
   autoLayout: { isCollectionItem: false, optionName: "autoLayout" }
 };
-const DxPageSize = createConfigurationComponent({
+
+const DxPageSizeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -637,13 +745,19 @@ const DxPageSize = createConfigurationComponent({
     items: Array,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPageSizeConfig);
+
+const DxPageSize = defineComponent(DxPageSizeConfig);
+
 (DxPageSize as any).$_optionName = "pageSize";
 (DxPageSize as any).$_expectedChildren = {
   item: { isCollectionItem: true, optionName: "items" },
   pageSizeItem: { isCollectionItem: true, optionName: "items" }
 };
-const DxPageSizeItem = createConfigurationComponent({
+
+const DxPageSizeItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -656,10 +770,16 @@ const DxPageSizeItem = createConfigurationComponent({
     text: String,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPageSizeItemConfig);
+
+const DxPageSizeItem = defineComponent(DxPageSizeItemConfig);
+
 (DxPageSizeItem as any).$_optionName = "items";
 (DxPageSizeItem as any).$_isCollectionItem = true;
-const DxPropertiesPanel = createConfigurationComponent({
+
+const DxPropertiesPanelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -670,12 +790,18 @@ const DxPropertiesPanel = createConfigurationComponent({
     tabs: Array,
     visibility: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPropertiesPanelConfig);
+
+const DxPropertiesPanel = defineComponent(DxPropertiesPanelConfig);
+
 (DxPropertiesPanel as any).$_optionName = "propertiesPanel";
 (DxPropertiesPanel as any).$_expectedChildren = {
   tab: { isCollectionItem: true, optionName: "tabs" }
 };
-const DxTab = createConfigurationComponent({
+
+const DxTabConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -688,7 +814,12 @@ const DxTab = createConfigurationComponent({
     groups: Array,
     title: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTabConfig);
+
+const DxTab = defineComponent(DxTabConfig);
+
 (DxTab as any).$_optionName = "tabs";
 (DxTab as any).$_isCollectionItem = true;
 (DxTab as any).$_expectedChildren = {
@@ -696,7 +827,8 @@ const DxTab = createConfigurationComponent({
   group: { isCollectionItem: true, optionName: "groups" },
   tabGroup: { isCollectionItem: true, optionName: "groups" }
 };
-const DxTabGroup = createConfigurationComponent({
+
+const DxTabGroupConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -707,13 +839,19 @@ const DxTabGroup = createConfigurationComponent({
     commands: Array,
     title: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTabGroupConfig);
+
+const DxTabGroup = defineComponent(DxTabGroupConfig);
+
 (DxTabGroup as any).$_optionName = "groups";
 (DxTabGroup as any).$_isCollectionItem = true;
 (DxTabGroup as any).$_expectedChildren = {
   command: { isCollectionItem: true, optionName: "commands" }
 };
-const DxToolbox = createConfigurationComponent({
+
+const DxToolboxConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -730,13 +868,19 @@ const DxToolbox = createConfigurationComponent({
     visibility: String,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolboxConfig);
+
+const DxToolbox = defineComponent(DxToolboxConfig);
+
 (DxToolbox as any).$_optionName = "toolbox";
 (DxToolbox as any).$_expectedChildren = {
   group: { isCollectionItem: true, optionName: "groups" },
   toolboxGroup: { isCollectionItem: true, optionName: "groups" }
 };
-const DxToolboxGroup = createConfigurationComponent({
+
+const DxToolboxGroupConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -753,10 +897,16 @@ const DxToolboxGroup = createConfigurationComponent({
     shapes: Array,
     title: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolboxGroupConfig);
+
+const DxToolboxGroup = defineComponent(DxToolboxGroupConfig);
+
 (DxToolboxGroup as any).$_optionName = "groups";
 (DxToolboxGroup as any).$_isCollectionItem = true;
-const DxViewToolbar = createConfigurationComponent({
+
+const DxViewToolbarConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -767,12 +917,18 @@ const DxViewToolbar = createConfigurationComponent({
     commands: Array,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxViewToolbarConfig);
+
+const DxViewToolbar = defineComponent(DxViewToolbarConfig);
+
 (DxViewToolbar as any).$_optionName = "viewToolbar";
 (DxViewToolbar as any).$_expectedChildren = {
   command: { isCollectionItem: true, optionName: "commands" }
 };
-const DxZoomLevel = createConfigurationComponent({
+
+const DxZoomLevelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -783,9 +939,15 @@ const DxZoomLevel = createConfigurationComponent({
     items: Array,
     value: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxZoomLevelConfig);
+
+const DxZoomLevel = defineComponent(DxZoomLevelConfig);
+
 (DxZoomLevel as any).$_optionName = "zoomLevel";
 
+
 export default DxDiagram;
 export {
   DxDiagram,
diff --git a/packages/devextreme-vue/src/draggable.ts b/packages/devextreme-vue/src/draggable.ts
index 3820416da68a..9aaa0e4c38af 100644
--- a/packages/devextreme-vue/src/draggable.ts
+++ b/packages/devextreme-vue/src/draggable.ts
@@ -1,6 +1,6 @@
 import Draggable, { Properties } from "devextreme/ui/draggable";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "autoScroll" |
@@ -30,7 +30,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxDraggable extends AccessibleOptions {
   readonly instance?: Draggable;
 }
-const DxDraggable = createComponent({
+
+const componentConfig = {
   props: {
     autoScroll: Boolean,
     boundary: {},
@@ -93,9 +94,14 @@ const DxDraggable = createComponent({
       cursorOffset: { isCollectionItem: false, optionName: "cursorOffset" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxDraggable = defineComponent(componentConfig);
+
 
-const DxCursorOffset = createConfigurationComponent({
+const DxCursorOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -106,9 +112,15 @@ const DxCursorOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCursorOffsetConfig);
+
+const DxCursorOffset = defineComponent(DxCursorOffsetConfig);
+
 (DxCursorOffset as any).$_optionName = "cursorOffset";
 
+
 export default DxDraggable;
 export {
   DxDraggable,
diff --git a/packages/devextreme-vue/src/drawer.ts b/packages/devextreme-vue/src/drawer.ts
index d0f5e669906e..45ab2429287a 100644
--- a/packages/devextreme-vue/src/drawer.ts
+++ b/packages/devextreme-vue/src/drawer.ts
@@ -1,5 +1,6 @@
 import Drawer, { Properties } from "devextreme/ui/drawer";
-import { createComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "activeStateEnabled" |
@@ -30,7 +31,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxDrawer extends AccessibleOptions {
   readonly instance?: Drawer;
 }
-const DxDrawer = createComponent({
+
+const componentConfig = {
   props: {
     activeStateEnabled: Boolean,
     animationDuration: Number,
@@ -92,7 +94,11 @@ const DxDrawer = createComponent({
     (this as any).$_WidgetClass = Drawer;
     (this as any).$_hasAsyncTemplate = true;
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxDrawer = defineComponent(componentConfig);
 
 export default DxDrawer;
 export {
diff --git a/packages/devextreme-vue/src/drop-down-box.ts b/packages/devextreme-vue/src/drop-down-box.ts
index c2ce77c7670b..1df994bd3b0e 100644
--- a/packages/devextreme-vue/src/drop-down-box.ts
+++ b/packages/devextreme-vue/src/drop-down-box.ts
@@ -1,6 +1,6 @@
 import DropDownBox, { Properties } from "devextreme/ui/drop_down_box";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "acceptCustomValue" |
@@ -70,7 +70,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxDropDownBox extends AccessibleOptions {
   readonly instance?: DropDownBox;
 }
-const DxDropDownBox = createComponent({
+
+const componentConfig = {
   props: {
     acceptCustomValue: Boolean,
     accessKey: String,
@@ -215,9 +216,14 @@ const DxDropDownBox = createComponent({
       dropDownOptions: { isCollectionItem: false, optionName: "dropDownOptions" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxDropDownBox = defineComponent(componentConfig);
+
 
-const DxAnimation = createConfigurationComponent({
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -228,13 +234,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -245,9 +257,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -258,9 +276,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxButton = createConfigurationComponent({
+
+const DxButtonConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -273,13 +297,19 @@ const DxButton = createConfigurationComponent({
     name: String,
     options: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxButtonConfig);
+
+const DxButton = defineComponent(DxButtonConfig);
+
 (DxButton as any).$_optionName = "buttons";
 (DxButton as any).$_isCollectionItem = true;
 (DxButton as any).$_expectedChildren = {
   options: { isCollectionItem: false, optionName: "options" }
 };
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -290,9 +320,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxDropDownOptions = createConfigurationComponent({
+
+const DxDropDownOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -399,14 +435,20 @@ const DxDropDownOptions = createConfigurationComponent({
     width: [Function, Number, String],
     wrapperAttr: {}
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDropDownOptionsConfig);
+
+const DxDropDownOptions = defineComponent(DxDropDownOptionsConfig);
+
 (DxDropDownOptions as any).$_optionName = "dropDownOptions";
 (DxDropDownOptions as any).$_expectedChildren = {
   animation: { isCollectionItem: false, optionName: "animation" },
   position: { isCollectionItem: false, optionName: "position" },
   toolbarItem: { isCollectionItem: true, optionName: "toolbarItems" }
 };
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -423,12 +465,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -455,13 +503,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -472,9 +526,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -485,9 +545,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxOptions = createConfigurationComponent({
+
+const DxOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -544,9 +610,15 @@ const DxOptions = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOptionsConfig);
+
+const DxOptions = defineComponent(DxOptionsConfig);
+
 (DxOptions as any).$_optionName = "options";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -567,9 +639,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -596,9 +674,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -615,9 +699,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
-const DxToolbarItem = createConfigurationComponent({
+
+const DxToolbarItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -650,10 +740,16 @@ const DxToolbarItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarItemConfig);
+
+const DxToolbarItem = defineComponent(DxToolbarItemConfig);
+
 (DxToolbarItem as any).$_optionName = "toolbarItems";
 (DxToolbarItem as any).$_isCollectionItem = true;
 
+
 export default DxDropDownBox;
 export {
   DxDropDownBox,
diff --git a/packages/devextreme-vue/src/drop-down-button.ts b/packages/devextreme-vue/src/drop-down-button.ts
index f885d3544b56..de0be808cc6f 100644
--- a/packages/devextreme-vue/src/drop-down-button.ts
+++ b/packages/devextreme-vue/src/drop-down-button.ts
@@ -1,6 +1,6 @@
 import DropDownButton, { Properties } from "devextreme/ui/drop_down_button";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -49,7 +49,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxDropDownButton extends AccessibleOptions {
   readonly instance?: DropDownButton;
 }
-const DxDropDownButton = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -151,9 +152,14 @@ const DxDropDownButton = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxDropDownButton = defineComponent(componentConfig);
+
 
-const DxAnimation = createConfigurationComponent({
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -164,13 +170,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -181,9 +193,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -194,9 +212,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -207,9 +231,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxDropDownOptions = createConfigurationComponent({
+
+const DxDropDownOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -316,14 +346,20 @@ const DxDropDownOptions = createConfigurationComponent({
     width: [Function, Number, String],
     wrapperAttr: {}
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDropDownOptionsConfig);
+
+const DxDropDownOptions = defineComponent(DxDropDownOptionsConfig);
+
 (DxDropDownOptions as any).$_optionName = "dropDownOptions";
 (DxDropDownOptions as any).$_expectedChildren = {
   animation: { isCollectionItem: false, optionName: "animation" },
   position: { isCollectionItem: false, optionName: "position" },
   toolbarItem: { isCollectionItem: true, optionName: "toolbarItems" }
 };
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -340,12 +376,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -372,13 +414,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -401,10 +449,16 @@ const DxItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -415,9 +469,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -428,9 +488,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -451,9 +517,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -480,9 +552,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -499,9 +577,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
-const DxToolbarItem = createConfigurationComponent({
+
+const DxToolbarItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -534,10 +618,16 @@ const DxToolbarItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarItemConfig);
+
+const DxToolbarItem = defineComponent(DxToolbarItemConfig);
+
 (DxToolbarItem as any).$_optionName = "toolbarItems";
 (DxToolbarItem as any).$_isCollectionItem = true;
 
+
 export default DxDropDownButton;
 export {
   DxDropDownButton,
diff --git a/packages/devextreme-vue/src/file-manager.ts b/packages/devextreme-vue/src/file-manager.ts
index c9c6c51a2467..ccedee750dfa 100644
--- a/packages/devextreme-vue/src/file-manager.ts
+++ b/packages/devextreme-vue/src/file-manager.ts
@@ -1,6 +1,6 @@
 import FileManager, { Properties } from "devextreme/ui/file_manager";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -61,7 +61,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxFileManager extends AccessibleOptions {
   readonly instance?: FileManager;
 }
-const DxFileManager = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -191,9 +192,14 @@ const DxFileManager = createComponent({
       upload: { isCollectionItem: false, optionName: "upload" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxFileManager = defineComponent(componentConfig);
+
 
-const DxColumn = createConfigurationComponent({
+const DxColumnConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -222,10 +228,16 @@ const DxColumn = createConfigurationComponent({
     visibleIndex: Number,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnConfig);
+
+const DxColumn = defineComponent(DxColumnConfig);
+
 (DxColumn as any).$_optionName = "columns";
 (DxColumn as any).$_isCollectionItem = true;
-const DxContextMenu = createConfigurationComponent({
+
+const DxContextMenuConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -234,13 +246,19 @@ const DxContextMenu = createConfigurationComponent({
   props: {
     items: Array
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxContextMenuConfig);
+
+const DxContextMenu = defineComponent(DxContextMenuConfig);
+
 (DxContextMenu as any).$_optionName = "contextMenu";
 (DxContextMenu as any).$_expectedChildren = {
   contextMenuItem: { isCollectionItem: true, optionName: "items" },
   item: { isCollectionItem: true, optionName: "items" }
 };
-const DxContextMenuItem = createConfigurationComponent({
+
+const DxContextMenuItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -267,10 +285,16 @@ const DxContextMenuItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxContextMenuItemConfig);
+
+const DxContextMenuItem = defineComponent(DxContextMenuItemConfig);
+
 (DxContextMenuItem as any).$_optionName = "items";
 (DxContextMenuItem as any).$_isCollectionItem = true;
-const DxDetails = createConfigurationComponent({
+
+const DxDetailsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -279,12 +303,18 @@ const DxDetails = createConfigurationComponent({
   props: {
     columns: Array
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDetailsConfig);
+
+const DxDetails = defineComponent(DxDetailsConfig);
+
 (DxDetails as any).$_optionName = "details";
 (DxDetails as any).$_expectedChildren = {
   column: { isCollectionItem: true, optionName: "columns" }
 };
-const DxFileSelectionItem = createConfigurationComponent({
+
+const DxFileSelectionItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -313,10 +343,16 @@ const DxFileSelectionItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFileSelectionItemConfig);
+
+const DxFileSelectionItem = defineComponent(DxFileSelectionItemConfig);
+
 (DxFileSelectionItem as any).$_optionName = "fileSelectionItems";
 (DxFileSelectionItem as any).$_isCollectionItem = true;
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -355,10 +391,16 @@ const DxItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
-const DxItemView = createConfigurationComponent({
+
+const DxItemViewConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -373,12 +415,18 @@ const DxItemView = createConfigurationComponent({
     showFolders: Boolean,
     showParentFolder: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemViewConfig);
+
+const DxItemView = defineComponent(DxItemViewConfig);
+
 (DxItemView as any).$_optionName = "itemView";
 (DxItemView as any).$_expectedChildren = {
   details: { isCollectionItem: false, optionName: "details" }
 };
-const DxNotifications = createConfigurationComponent({
+
+const DxNotificationsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -389,9 +437,15 @@ const DxNotifications = createConfigurationComponent({
     showPanel: Boolean,
     showPopup: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxNotificationsConfig);
+
+const DxNotifications = defineComponent(DxNotificationsConfig);
+
 (DxNotifications as any).$_optionName = "notifications";
-const DxPermissions = createConfigurationComponent({
+
+const DxPermissionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -412,9 +466,15 @@ const DxPermissions = createConfigurationComponent({
     rename: Boolean,
     upload: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPermissionsConfig);
+
+const DxPermissions = defineComponent(DxPermissionsConfig);
+
 (DxPermissions as any).$_optionName = "permissions";
-const DxToolbar = createConfigurationComponent({
+
+const DxToolbarConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -425,14 +485,20 @@ const DxToolbar = createConfigurationComponent({
     fileSelectionItems: Array,
     items: Array
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarConfig);
+
+const DxToolbar = defineComponent(DxToolbarConfig);
+
 (DxToolbar as any).$_optionName = "toolbar";
 (DxToolbar as any).$_expectedChildren = {
   fileSelectionItem: { isCollectionItem: true, optionName: "fileSelectionItems" },
   item: { isCollectionItem: true, optionName: "items" },
   toolbarItem: { isCollectionItem: true, optionName: "items" }
 };
-const DxToolbarItem = createConfigurationComponent({
+
+const DxToolbarItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -461,10 +527,16 @@ const DxToolbarItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarItemConfig);
+
+const DxToolbarItem = defineComponent(DxToolbarItemConfig);
+
 (DxToolbarItem as any).$_optionName = "items";
 (DxToolbarItem as any).$_isCollectionItem = true;
-const DxUpload = createConfigurationComponent({
+
+const DxUploadConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -475,9 +547,15 @@ const DxUpload = createConfigurationComponent({
     chunkSize: Number,
     maxFileSize: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxUploadConfig);
+
+const DxUpload = defineComponent(DxUploadConfig);
+
 (DxUpload as any).$_optionName = "upload";
 
+
 export default DxFileManager;
 export {
   DxFileManager,
diff --git a/packages/devextreme-vue/src/file-uploader.ts b/packages/devextreme-vue/src/file-uploader.ts
index 0fb465ff2cc7..c9f42dded683 100644
--- a/packages/devextreme-vue/src/file-uploader.ts
+++ b/packages/devextreme-vue/src/file-uploader.ts
@@ -1,5 +1,6 @@
 import FileUploader, { Properties } from "devextreme/ui/file_uploader";
-import { createComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "abortUpload" |
@@ -71,7 +72,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxFileUploader extends AccessibleOptions {
   readonly instance?: FileUploader;
 }
-const DxFileUploader = createComponent({
+
+const componentConfig = {
   props: {
     abortUpload: Function,
     accept: String,
@@ -215,7 +217,11 @@ const DxFileUploader = createComponent({
     (this as any).$_WidgetClass = FileUploader;
     (this as any).$_hasAsyncTemplate = true;
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxFileUploader = defineComponent(componentConfig);
 
 export default DxFileUploader;
 export {
diff --git a/packages/devextreme-vue/src/filter-builder.ts b/packages/devextreme-vue/src/filter-builder.ts
index 1b4a1accf725..31f6596070f2 100644
--- a/packages/devextreme-vue/src/filter-builder.ts
+++ b/packages/devextreme-vue/src/filter-builder.ts
@@ -1,6 +1,6 @@
 import FilterBuilder, { Properties } from "devextreme/ui/filter_builder";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -35,7 +35,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxFilterBuilder extends AccessibleOptions {
   readonly instance?: FilterBuilder;
 }
-const DxFilterBuilder = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -111,9 +112,14 @@ const DxFilterBuilder = createComponent({
       groupOperationDescriptions: { isCollectionItem: false, optionName: "groupOperationDescriptions" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxFilterBuilder = defineComponent(componentConfig);
+
 
-const DxCustomOperation = createConfigurationComponent({
+const DxCustomOperationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -136,10 +142,16 @@ const DxCustomOperation = createConfigurationComponent({
     icon: String,
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCustomOperationConfig);
+
+const DxCustomOperation = defineComponent(DxCustomOperationConfig);
+
 (DxCustomOperation as any).$_optionName = "customOperations";
 (DxCustomOperation as any).$_isCollectionItem = true;
-const DxField = createConfigurationComponent({
+
+const DxFieldConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -172,14 +184,20 @@ const DxField = createConfigurationComponent({
     name: String,
     trueText: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFieldConfig);
+
+const DxField = defineComponent(DxFieldConfig);
+
 (DxField as any).$_optionName = "fields";
 (DxField as any).$_isCollectionItem = true;
 (DxField as any).$_expectedChildren = {
   format: { isCollectionItem: false, optionName: "format" },
   lookup: { isCollectionItem: false, optionName: "lookup" }
 };
-const DxFilterOperationDescriptions = createConfigurationComponent({
+
+const DxFilterOperationDescriptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -212,9 +230,15 @@ const DxFilterOperationDescriptions = createConfigurationComponent({
     notEqual: String,
     startsWith: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFilterOperationDescriptionsConfig);
+
+const DxFilterOperationDescriptions = defineComponent(DxFilterOperationDescriptionsConfig);
+
 (DxFilterOperationDescriptions as any).$_optionName = "filterOperationDescriptions";
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -233,9 +257,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxGroupOperationDescriptions = createConfigurationComponent({
+
+const DxGroupOperationDescriptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -250,9 +280,15 @@ const DxGroupOperationDescriptions = createConfigurationComponent({
     notOr: String,
     or: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGroupOperationDescriptionsConfig);
+
+const DxGroupOperationDescriptions = defineComponent(DxGroupOperationDescriptionsConfig);
+
 (DxGroupOperationDescriptions as any).$_optionName = "groupOperationDescriptions";
-const DxLookup = createConfigurationComponent({
+
+const DxLookupConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -267,9 +303,15 @@ const DxLookup = createConfigurationComponent({
     displayExpr: [Function, String],
     valueExpr: [Function, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLookupConfig);
+
+const DxLookup = defineComponent(DxLookupConfig);
+
 (DxLookup as any).$_optionName = "lookup";
 
+
 export default DxFilterBuilder;
 export {
   DxFilterBuilder,
diff --git a/packages/devextreme-vue/src/form.ts b/packages/devextreme-vue/src/form.ts
index 991bdf7ff070..4290086d52cc 100644
--- a/packages/devextreme-vue/src/form.ts
+++ b/packages/devextreme-vue/src/form.ts
@@ -1,6 +1,6 @@
 import Form, { Properties } from "devextreme/ui/form";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -48,7 +48,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxForm extends AccessibleOptions {
   readonly instance?: Form;
 }
-const DxForm = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -153,9 +154,14 @@ const DxForm = createComponent({
       TabbedItem: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxForm = defineComponent(componentConfig);
 
-const DxAsyncRule = createConfigurationComponent({
+
+const DxAsyncRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -172,13 +178,19 @@ const DxAsyncRule = createConfigurationComponent({
     type: String,
     validationCallback: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAsyncRuleConfig);
+
+const DxAsyncRule = defineComponent(DxAsyncRuleConfig);
+
 (DxAsyncRule as any).$_optionName = "validationRules";
 (DxAsyncRule as any).$_isCollectionItem = true;
 (DxAsyncRule as any).$_predefinedProps = {
   type: "async"
 };
-const DxButtonItem = createConfigurationComponent({
+
+const DxButtonItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -203,7 +215,12 @@ const DxButtonItem = createConfigurationComponent({
     visible: Boolean,
     visibleIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxButtonItemConfig);
+
+const DxButtonItem = defineComponent(DxButtonItemConfig);
+
 (DxButtonItem as any).$_optionName = "items";
 (DxButtonItem as any).$_isCollectionItem = true;
 (DxButtonItem as any).$_predefinedProps = {
@@ -212,7 +229,8 @@ const DxButtonItem = createConfigurationComponent({
 (DxButtonItem as any).$_expectedChildren = {
   buttonOptions: { isCollectionItem: false, optionName: "buttonOptions" }
 };
-const DxButtonOptions = createConfigurationComponent({
+
+const DxButtonOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -269,9 +287,15 @@ const DxButtonOptions = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxButtonOptionsConfig);
+
+const DxButtonOptions = defineComponent(DxButtonOptionsConfig);
+
 (DxButtonOptions as any).$_optionName = "buttonOptions";
-const DxColCountByScreen = createConfigurationComponent({
+
+const DxColCountByScreenConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -286,9 +310,15 @@ const DxColCountByScreen = createConfigurationComponent({
     sm: Number,
     xs: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColCountByScreenConfig);
+
+const DxColCountByScreen = defineComponent(DxColCountByScreenConfig);
+
 (DxColCountByScreen as any).$_optionName = "colCountByScreen";
-const DxCompareRule = createConfigurationComponent({
+
+const DxCompareRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -305,13 +335,19 @@ const DxCompareRule = createConfigurationComponent({
     message: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCompareRuleConfig);
+
+const DxCompareRule = defineComponent(DxCompareRuleConfig);
+
 (DxCompareRule as any).$_optionName = "validationRules";
 (DxCompareRule as any).$_isCollectionItem = true;
 (DxCompareRule as any).$_predefinedProps = {
   type: "compare"
 };
-const DxCustomRule = createConfigurationComponent({
+
+const DxCustomRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -328,13 +364,19 @@ const DxCustomRule = createConfigurationComponent({
     type: String,
     validationCallback: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCustomRuleConfig);
+
+const DxCustomRule = defineComponent(DxCustomRuleConfig);
+
 (DxCustomRule as any).$_optionName = "validationRules";
 (DxCustomRule as any).$_isCollectionItem = true;
 (DxCustomRule as any).$_predefinedProps = {
   type: "custom"
 };
-const DxEmailRule = createConfigurationComponent({
+
+const DxEmailRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -347,13 +389,19 @@ const DxEmailRule = createConfigurationComponent({
     message: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxEmailRuleConfig);
+
+const DxEmailRule = defineComponent(DxEmailRuleConfig);
+
 (DxEmailRule as any).$_optionName = "validationRules";
 (DxEmailRule as any).$_isCollectionItem = true;
 (DxEmailRule as any).$_predefinedProps = {
   type: "email"
 };
-const DxEmptyItem = createConfigurationComponent({
+
+const DxEmptyItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -372,13 +420,19 @@ const DxEmptyItem = createConfigurationComponent({
     visible: Boolean,
     visibleIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxEmptyItemConfig);
+
+const DxEmptyItem = defineComponent(DxEmptyItemConfig);
+
 (DxEmptyItem as any).$_optionName = "items";
 (DxEmptyItem as any).$_isCollectionItem = true;
 (DxEmptyItem as any).$_predefinedProps = {
   itemType: "empty"
 };
-const DxGroupItem = createConfigurationComponent({
+
+const DxGroupItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -411,7 +465,12 @@ const DxGroupItem = createConfigurationComponent({
     visible: Boolean,
     visibleIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGroupItemConfig);
+
+const DxGroupItem = defineComponent(DxGroupItemConfig);
+
 (DxGroupItem as any).$_optionName = "items";
 (DxGroupItem as any).$_isCollectionItem = true;
 (DxGroupItem as any).$_predefinedProps = {
@@ -420,7 +479,8 @@ const DxGroupItem = createConfigurationComponent({
 (DxGroupItem as any).$_expectedChildren = {
   colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" }
 };
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -491,10 +551,16 @@ const DxItem = createConfigurationComponent({
     visible: Boolean,
     visibleIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
-const DxLabel = createConfigurationComponent({
+
+const DxLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -513,9 +579,15 @@ const DxLabel = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelConfig);
+
+const DxLabel = defineComponent(DxLabelConfig);
+
 (DxLabel as any).$_optionName = "label";
-const DxNumericRule = createConfigurationComponent({
+
+const DxNumericRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -528,13 +600,19 @@ const DxNumericRule = createConfigurationComponent({
     message: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxNumericRuleConfig);
+
+const DxNumericRule = defineComponent(DxNumericRuleConfig);
+
 (DxNumericRule as any).$_optionName = "validationRules";
 (DxNumericRule as any).$_isCollectionItem = true;
 (DxNumericRule as any).$_predefinedProps = {
   type: "numeric"
 };
-const DxPatternRule = createConfigurationComponent({
+
+const DxPatternRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -549,13 +627,19 @@ const DxPatternRule = createConfigurationComponent({
     pattern: [RegExp, String],
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPatternRuleConfig);
+
+const DxPatternRule = defineComponent(DxPatternRuleConfig);
+
 (DxPatternRule as any).$_optionName = "validationRules";
 (DxPatternRule as any).$_isCollectionItem = true;
 (DxPatternRule as any).$_predefinedProps = {
   type: "pattern"
 };
-const DxRangeRule = createConfigurationComponent({
+
+const DxRangeRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -574,13 +658,19 @@ const DxRangeRule = createConfigurationComponent({
     reevaluate: Boolean,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRangeRuleConfig);
+
+const DxRangeRule = defineComponent(DxRangeRuleConfig);
+
 (DxRangeRule as any).$_optionName = "validationRules";
 (DxRangeRule as any).$_isCollectionItem = true;
 (DxRangeRule as any).$_predefinedProps = {
   type: "range"
 };
-const DxRequiredRule = createConfigurationComponent({
+
+const DxRequiredRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -593,13 +683,19 @@ const DxRequiredRule = createConfigurationComponent({
     trim: Boolean,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRequiredRuleConfig);
+
+const DxRequiredRule = defineComponent(DxRequiredRuleConfig);
+
 (DxRequiredRule as any).$_optionName = "validationRules";
 (DxRequiredRule as any).$_isCollectionItem = true;
 (DxRequiredRule as any).$_predefinedProps = {
   type: "required"
 };
-const DxSimpleItem = createConfigurationComponent({
+
+const DxSimpleItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -634,7 +730,12 @@ const DxSimpleItem = createConfigurationComponent({
     visible: Boolean,
     visibleIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSimpleItemConfig);
+
+const DxSimpleItem = defineComponent(DxSimpleItemConfig);
+
 (DxSimpleItem as any).$_optionName = "items";
 (DxSimpleItem as any).$_isCollectionItem = true;
 (DxSimpleItem as any).$_predefinedProps = {
@@ -653,7 +754,8 @@ const DxSimpleItem = createConfigurationComponent({
   StringLengthRule: { isCollectionItem: true, optionName: "validationRules" },
   validationRule: { isCollectionItem: true, optionName: "validationRules" }
 };
-const DxStringLengthRule = createConfigurationComponent({
+
+const DxStringLengthRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -672,13 +774,19 @@ const DxStringLengthRule = createConfigurationComponent({
     trim: Boolean,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxStringLengthRuleConfig);
+
+const DxStringLengthRule = defineComponent(DxStringLengthRuleConfig);
+
 (DxStringLengthRule as any).$_optionName = "validationRules";
 (DxStringLengthRule as any).$_isCollectionItem = true;
 (DxStringLengthRule as any).$_predefinedProps = {
   type: "stringLength"
 };
-const DxTab = createConfigurationComponent({
+
+const DxTabConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -705,13 +813,19 @@ const DxTab = createConfigurationComponent({
     template: {},
     title: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTabConfig);
+
+const DxTab = defineComponent(DxTabConfig);
+
 (DxTab as any).$_optionName = "tabs";
 (DxTab as any).$_isCollectionItem = true;
 (DxTab as any).$_expectedChildren = {
   colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" }
 };
-const DxTabbedItem = createConfigurationComponent({
+
+const DxTabbedItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -734,7 +848,12 @@ const DxTabbedItem = createConfigurationComponent({
     visible: Boolean,
     visibleIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTabbedItemConfig);
+
+const DxTabbedItem = defineComponent(DxTabbedItemConfig);
+
 (DxTabbedItem as any).$_optionName = "items";
 (DxTabbedItem as any).$_isCollectionItem = true;
 (DxTabbedItem as any).$_predefinedProps = {
@@ -744,7 +863,8 @@ const DxTabbedItem = createConfigurationComponent({
   tab: { isCollectionItem: true, optionName: "tabs" },
   tabPanelOptions: { isCollectionItem: false, optionName: "tabPanelOptions" }
 };
-const DxTabPanelOptions = createConfigurationComponent({
+
+const DxTabPanelOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -841,13 +961,19 @@ const DxTabPanelOptions = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTabPanelOptionsConfig);
+
+const DxTabPanelOptions = defineComponent(DxTabPanelOptionsConfig);
+
 (DxTabPanelOptions as any).$_optionName = "tabPanelOptions";
 (DxTabPanelOptions as any).$_expectedChildren = {
   item: { isCollectionItem: true, optionName: "items" },
   tabPanelOptionsItem: { isCollectionItem: true, optionName: "items" }
 };
-const DxTabPanelOptionsItem = createConfigurationComponent({
+
+const DxTabPanelOptionsItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -872,10 +998,16 @@ const DxTabPanelOptionsItem = createConfigurationComponent({
     title: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTabPanelOptionsItemConfig);
+
+const DxTabPanelOptionsItem = defineComponent(DxTabPanelOptionsItemConfig);
+
 (DxTabPanelOptionsItem as any).$_optionName = "items";
 (DxTabPanelOptionsItem as any).$_isCollectionItem = true;
-const DxValidationRule = createConfigurationComponent({
+
+const DxValidationRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -904,13 +1036,19 @@ const DxValidationRule = createConfigurationComponent({
     type: String,
     validationCallback: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxValidationRuleConfig);
+
+const DxValidationRule = defineComponent(DxValidationRuleConfig);
+
 (DxValidationRule as any).$_optionName = "validationRules";
 (DxValidationRule as any).$_isCollectionItem = true;
 (DxValidationRule as any).$_predefinedProps = {
   type: "required"
 };
 
+
 export default DxForm;
 export {
   DxForm,
diff --git a/packages/devextreme-vue/src/funnel.ts b/packages/devextreme-vue/src/funnel.ts
index 47132d23bb61..07a30c4a0599 100644
--- a/packages/devextreme-vue/src/funnel.ts
+++ b/packages/devextreme-vue/src/funnel.ts
@@ -1,6 +1,6 @@
 import Funnel, { Properties } from "devextreme/viz/funnel";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "adaptiveLayout" |
@@ -50,7 +50,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxFunnel extends AccessibleOptions {
   readonly instance?: Funnel;
 }
-const DxFunnel = createComponent({
+
+const componentConfig = {
   props: {
     adaptiveLayout: Object,
     algorithm: String,
@@ -163,9 +164,14 @@ const DxFunnel = createComponent({
       tooltip: { isCollectionItem: false, optionName: "tooltip" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxFunnel = defineComponent(componentConfig);
+
 
-const DxAdaptiveLayout = createConfigurationComponent({
+const DxAdaptiveLayoutConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -178,9 +184,15 @@ const DxAdaptiveLayout = createConfigurationComponent({
     keepLabels: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAdaptiveLayoutConfig);
+
+const DxAdaptiveLayout = defineComponent(DxAdaptiveLayoutConfig);
+
 (DxAdaptiveLayout as any).$_optionName = "adaptiveLayout";
-const DxBorder = createConfigurationComponent({
+
+const DxBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -199,9 +211,15 @@ const DxBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBorderConfig);
+
+const DxBorder = defineComponent(DxBorderConfig);
+
 (DxBorder as any).$_optionName = "border";
-const DxConnector = createConfigurationComponent({
+
+const DxConnectorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -216,9 +234,15 @@ const DxConnector = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxConnectorConfig);
+
+const DxConnector = defineComponent(DxConnectorConfig);
+
 (DxConnector as any).$_optionName = "connector";
-const DxExport = createConfigurationComponent({
+
+const DxExportConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -239,9 +263,15 @@ const DxExport = createConfigurationComponent({
     printingEnabled: Boolean,
     svgToCanvas: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxExportConfig);
+
+const DxExport = defineComponent(DxExportConfig);
+
 (DxExport as any).$_optionName = "export";
-const DxFont = createConfigurationComponent({
+
+const DxFontConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -258,9 +288,15 @@ const DxFont = createConfigurationComponent({
     size: [Number, String],
     weight: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFontConfig);
+
+const DxFont = defineComponent(DxFontConfig);
+
 (DxFont as any).$_optionName = "font";
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -279,9 +315,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxFunnelTitle = createConfigurationComponent({
+
+const DxFunnelTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -306,7 +348,12 @@ const DxFunnelTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFunnelTitleConfig);
+
+const DxFunnelTitle = defineComponent(DxFunnelTitleConfig);
+
 (DxFunnelTitle as any).$_optionName = "title";
 (DxFunnelTitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
@@ -314,7 +361,8 @@ const DxFunnelTitle = createConfigurationComponent({
   margin: { isCollectionItem: false, optionName: "margin" },
   subtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxFunnelTitleSubtitle = createConfigurationComponent({
+
+const DxFunnelTitleSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -331,12 +379,18 @@ const DxFunnelTitleSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFunnelTitleSubtitleConfig);
+
+const DxFunnelTitleSubtitle = defineComponent(DxFunnelTitleSubtitleConfig);
+
 (DxFunnelTitleSubtitle as any).$_optionName = "subtitle";
 (DxFunnelTitleSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxHatching = createConfigurationComponent({
+
+const DxHatchingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -351,9 +405,15 @@ const DxHatching = createConfigurationComponent({
     step: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHatchingConfig);
+
+const DxHatching = defineComponent(DxHatchingConfig);
+
 (DxHatching as any).$_optionName = "hatching";
-const DxHoverStyle = createConfigurationComponent({
+
+const DxHoverStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -364,14 +424,20 @@ const DxHoverStyle = createConfigurationComponent({
     border: Object,
     hatching: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHoverStyleConfig);
+
+const DxHoverStyle = defineComponent(DxHoverStyleConfig);
+
 (DxHoverStyle as any).$_optionName = "hoverStyle";
 (DxHoverStyle as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
   hatching: { isCollectionItem: false, optionName: "hatching" },
   itemBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -384,7 +450,12 @@ const DxItem = createConfigurationComponent({
     hoverStyle: Object,
     selectionStyle: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "item";
 (DxItem as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -392,7 +463,8 @@ const DxItem = createConfigurationComponent({
   itemBorder: { isCollectionItem: false, optionName: "border" },
   selectionStyle: { isCollectionItem: false, optionName: "selectionStyle" }
 };
-const DxItemBorder = createConfigurationComponent({
+
+const DxItemBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -405,9 +477,15 @@ const DxItemBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemBorderConfig);
+
+const DxItemBorder = defineComponent(DxItemBorderConfig);
+
 (DxItemBorder as any).$_optionName = "border";
-const DxLabel = createConfigurationComponent({
+
+const DxLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -440,7 +518,12 @@ const DxLabel = createConfigurationComponent({
     visible: Boolean,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelConfig);
+
+const DxLabel = defineComponent(DxLabelConfig);
+
 (DxLabel as any).$_optionName = "label";
 (DxLabel as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -449,7 +532,8 @@ const DxLabel = createConfigurationComponent({
   format: { isCollectionItem: false, optionName: "format" },
   labelBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxLabelBorder = createConfigurationComponent({
+
+const DxLabelBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -464,9 +548,15 @@ const DxLabelBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelBorderConfig);
+
+const DxLabelBorder = defineComponent(DxLabelBorderConfig);
+
 (DxLabelBorder as any).$_optionName = "border";
-const DxLegend = createConfigurationComponent({
+
+const DxLegendConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -517,7 +607,12 @@ const DxLegend = createConfigurationComponent({
     verticalAlignment: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendConfig);
+
+const DxLegend = defineComponent(DxLegendConfig);
+
 (DxLegend as any).$_optionName = "legend";
 (DxLegend as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -527,7 +622,8 @@ const DxLegend = createConfigurationComponent({
   margin: { isCollectionItem: false, optionName: "margin" },
   title: { isCollectionItem: false, optionName: "title" }
 };
-const DxLegendBorder = createConfigurationComponent({
+
+const DxLegendBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -546,9 +642,15 @@ const DxLegendBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendBorderConfig);
+
+const DxLegendBorder = defineComponent(DxLegendBorderConfig);
+
 (DxLegendBorder as any).$_optionName = "border";
-const DxLegendTitle = createConfigurationComponent({
+
+const DxLegendTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -569,7 +671,12 @@ const DxLegendTitle = createConfigurationComponent({
     text: String,
     verticalAlignment: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendTitleConfig);
+
+const DxLegendTitle = defineComponent(DxLegendTitleConfig);
+
 (DxLegendTitle as any).$_optionName = "title";
 (DxLegendTitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
@@ -577,7 +684,8 @@ const DxLegendTitle = createConfigurationComponent({
   margin: { isCollectionItem: false, optionName: "margin" },
   subtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxLegendTitleSubtitle = createConfigurationComponent({
+
+const DxLegendTitleSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -590,12 +698,18 @@ const DxLegendTitleSubtitle = createConfigurationComponent({
     offset: Number,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendTitleSubtitleConfig);
+
+const DxLegendTitleSubtitle = defineComponent(DxLegendTitleSubtitleConfig);
+
 (DxLegendTitleSubtitle as any).$_optionName = "subtitle";
 (DxLegendTitleSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxLoadingIndicator = createConfigurationComponent({
+
+const DxLoadingIndicatorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -612,12 +726,18 @@ const DxLoadingIndicator = createConfigurationComponent({
     show: Boolean,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLoadingIndicatorConfig);
+
+const DxLoadingIndicator = defineComponent(DxLoadingIndicatorConfig);
+
 (DxLoadingIndicator as any).$_optionName = "loadingIndicator";
 (DxLoadingIndicator as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxMargin = createConfigurationComponent({
+
+const DxMarginConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -632,9 +752,15 @@ const DxMargin = createConfigurationComponent({
     right: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMarginConfig);
+
+const DxMargin = defineComponent(DxMarginConfig);
+
 (DxMargin as any).$_optionName = "margin";
-const DxSelectionStyle = createConfigurationComponent({
+
+const DxSelectionStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -645,14 +771,20 @@ const DxSelectionStyle = createConfigurationComponent({
     border: Object,
     hatching: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSelectionStyleConfig);
+
+const DxSelectionStyle = defineComponent(DxSelectionStyleConfig);
+
 (DxSelectionStyle as any).$_optionName = "selectionStyle";
 (DxSelectionStyle as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
   hatching: { isCollectionItem: false, optionName: "hatching" },
   itemBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxShadow = createConfigurationComponent({
+
+const DxShadowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -669,9 +801,15 @@ const DxShadow = createConfigurationComponent({
     offsetY: Number,
     opacity: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShadowConfig);
+
+const DxShadow = defineComponent(DxShadowConfig);
+
 (DxShadow as any).$_optionName = "shadow";
-const DxSize = createConfigurationComponent({
+
+const DxSizeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -682,9 +820,15 @@ const DxSize = createConfigurationComponent({
     height: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSizeConfig);
+
+const DxSize = defineComponent(DxSizeConfig);
+
 (DxSize as any).$_optionName = "size";
-const DxSubtitle = createConfigurationComponent({
+
+const DxSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -701,9 +845,15 @@ const DxSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSubtitleConfig);
+
+const DxSubtitle = defineComponent(DxSubtitleConfig);
+
 (DxSubtitle as any).$_optionName = "subtitle";
-const DxTitle = createConfigurationComponent({
+
+const DxTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -728,9 +878,15 @@ const DxTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTitleConfig);
+
+const DxTitle = defineComponent(DxTitleConfig);
+
 (DxTitle as any).$_optionName = "title";
-const DxTooltip = createConfigurationComponent({
+
+const DxTooltipConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -767,7 +923,12 @@ const DxTooltip = createConfigurationComponent({
     shadow: Object,
     zIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipConfig);
+
+const DxTooltip = defineComponent(DxTooltipConfig);
+
 (DxTooltip as any).$_optionName = "tooltip";
 (DxTooltip as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -776,7 +937,8 @@ const DxTooltip = createConfigurationComponent({
   shadow: { isCollectionItem: false, optionName: "shadow" },
   tooltipBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxTooltipBorder = createConfigurationComponent({
+
+const DxTooltipBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -793,9 +955,15 @@ const DxTooltipBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipBorderConfig);
+
+const DxTooltipBorder = defineComponent(DxTooltipBorderConfig);
+
 (DxTooltipBorder as any).$_optionName = "border";
 
+
 export default DxFunnel;
 export {
   DxFunnel,
diff --git a/packages/devextreme-vue/src/gallery.ts b/packages/devextreme-vue/src/gallery.ts
index c42f0e8d4f8e..01849ba8cbb5 100644
--- a/packages/devextreme-vue/src/gallery.ts
+++ b/packages/devextreme-vue/src/gallery.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/gallery";
 import Gallery, { Properties } from "devextreme/ui/gallery";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -47,7 +47,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxGallery extends AccessibleOptions {
   readonly instance?: Gallery;
 }
-const DxGallery = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     animationDuration: Number,
@@ -142,9 +143,14 @@ const DxGallery = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxGallery = defineComponent(componentConfig);
+
 
-const DxItem = createConfigurationComponent({
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -163,10 +169,16 @@ const DxItem = createConfigurationComponent({
     template: {},
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
 
+
 export default DxGallery;
 export {
   DxGallery,
diff --git a/packages/devextreme-vue/src/gantt.ts b/packages/devextreme-vue/src/gantt.ts
index c03dd518df67..1836d77cb0ff 100644
--- a/packages/devextreme-vue/src/gantt.ts
+++ b/packages/devextreme-vue/src/gantt.ts
@@ -1,6 +1,6 @@
 import Gantt, { Properties } from "devextreme/ui/gantt";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -80,7 +80,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxGantt extends AccessibleOptions {
   readonly instance?: Gantt;
 }
-const DxGantt = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -268,9 +269,14 @@ const DxGantt = createComponent({
       validation: { isCollectionItem: false, optionName: "validation" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxGantt = defineComponent(componentConfig);
+
 
-const DxColumn = createConfigurationComponent({
+const DxColumnConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -341,7 +347,12 @@ const DxColumn = createConfigurationComponent({
     visibleIndex: Number,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnConfig);
+
+const DxColumn = defineComponent(DxColumnConfig);
+
 (DxColumn as any).$_optionName = "columns";
 (DxColumn as any).$_isCollectionItem = true;
 (DxColumn as any).$_expectedChildren = {
@@ -349,7 +360,8 @@ const DxColumn = createConfigurationComponent({
   format: { isCollectionItem: false, optionName: "format" },
   headerFilter: { isCollectionItem: false, optionName: "headerFilter" }
 };
-const DxColumnHeaderFilter = createConfigurationComponent({
+
+const DxColumnHeaderFilterConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -372,13 +384,19 @@ const DxColumnHeaderFilter = createConfigurationComponent({
     searchMode: String,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnHeaderFilterConfig);
+
+const DxColumnHeaderFilter = defineComponent(DxColumnHeaderFilterConfig);
+
 (DxColumnHeaderFilter as any).$_optionName = "headerFilter";
 (DxColumnHeaderFilter as any).$_expectedChildren = {
   columnHeaderFilterSearch: { isCollectionItem: false, optionName: "search" },
   search: { isCollectionItem: false, optionName: "search" }
 };
-const DxColumnHeaderFilterSearch = createConfigurationComponent({
+
+const DxColumnHeaderFilterSearchConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -395,9 +413,15 @@ const DxColumnHeaderFilterSearch = createConfigurationComponent({
     searchExpr: [Array, Function, String],
     timeout: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnHeaderFilterSearchConfig);
+
+const DxColumnHeaderFilterSearch = defineComponent(DxColumnHeaderFilterSearchConfig);
+
 (DxColumnHeaderFilterSearch as any).$_optionName = "search";
-const DxContextMenu = createConfigurationComponent({
+
+const DxContextMenuConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -408,13 +432,19 @@ const DxContextMenu = createConfigurationComponent({
     enabled: Boolean,
     items: Array
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxContextMenuConfig);
+
+const DxContextMenu = defineComponent(DxContextMenuConfig);
+
 (DxContextMenu as any).$_optionName = "contextMenu";
 (DxContextMenu as any).$_expectedChildren = {
   contextMenuItem: { isCollectionItem: true, optionName: "items" },
   item: { isCollectionItem: true, optionName: "items" }
 };
-const DxContextMenuItem = createConfigurationComponent({
+
+const DxContextMenuItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -443,10 +473,16 @@ const DxContextMenuItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxContextMenuItemConfig);
+
+const DxContextMenuItem = defineComponent(DxContextMenuItemConfig);
+
 (DxContextMenuItem as any).$_optionName = "items";
 (DxContextMenuItem as any).$_isCollectionItem = true;
-const DxDependencies = createConfigurationComponent({
+
+const DxDependenciesConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -463,9 +499,15 @@ const DxDependencies = createConfigurationComponent({
     successorIdExpr: [Function, String],
     typeExpr: [Function, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDependenciesConfig);
+
+const DxDependencies = defineComponent(DxDependenciesConfig);
+
 (DxDependencies as any).$_optionName = "dependencies";
-const DxEditing = createConfigurationComponent({
+
+const DxEditingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -492,9 +534,15 @@ const DxEditing = createConfigurationComponent({
     allowTaskUpdating: Boolean,
     enabled: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxEditingConfig);
+
+const DxEditing = defineComponent(DxEditingConfig);
+
 (DxEditing as any).$_optionName = "editing";
-const DxFilterRow = createConfigurationComponent({
+
+const DxFilterRowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -515,12 +563,18 @@ const DxFilterRow = createConfigurationComponent({
     showOperationChooser: Boolean,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFilterRowConfig);
+
+const DxFilterRow = defineComponent(DxFilterRowConfig);
+
 (DxFilterRow as any).$_optionName = "filterRow";
 (DxFilterRow as any).$_expectedChildren = {
   operationDescriptions: { isCollectionItem: false, optionName: "operationDescriptions" }
 };
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -539,9 +593,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxGanttHeaderFilter = createConfigurationComponent({
+
+const DxGanttHeaderFilterConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -564,14 +624,20 @@ const DxGanttHeaderFilter = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGanttHeaderFilterConfig);
+
+const DxGanttHeaderFilter = defineComponent(DxGanttHeaderFilterConfig);
+
 (DxGanttHeaderFilter as any).$_optionName = "headerFilter";
 (DxGanttHeaderFilter as any).$_expectedChildren = {
   ganttHeaderFilterSearch: { isCollectionItem: false, optionName: "search" },
   search: { isCollectionItem: false, optionName: "search" },
   texts: { isCollectionItem: false, optionName: "texts" }
 };
-const DxGanttHeaderFilterSearch = createConfigurationComponent({
+
+const DxGanttHeaderFilterSearchConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -586,9 +652,15 @@ const DxGanttHeaderFilterSearch = createConfigurationComponent({
     mode: String,
     timeout: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGanttHeaderFilterSearchConfig);
+
+const DxGanttHeaderFilterSearch = defineComponent(DxGanttHeaderFilterSearchConfig);
+
 (DxGanttHeaderFilterSearch as any).$_optionName = "search";
-const DxHeaderFilter = createConfigurationComponent({
+
+const DxHeaderFilterConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -617,9 +689,15 @@ const DxHeaderFilter = createConfigurationComponent({
     visible: Boolean,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHeaderFilterConfig);
+
+const DxHeaderFilter = defineComponent(DxHeaderFilterConfig);
+
 (DxHeaderFilter as any).$_optionName = "headerFilter";
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -664,10 +742,16 @@ const DxItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
-const DxOperationDescriptions = createConfigurationComponent({
+
+const DxOperationDescriptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -696,9 +780,15 @@ const DxOperationDescriptions = createConfigurationComponent({
     notEqual: String,
     startsWith: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOperationDescriptionsConfig);
+
+const DxOperationDescriptions = defineComponent(DxOperationDescriptionsConfig);
+
 (DxOperationDescriptions as any).$_optionName = "operationDescriptions";
-const DxResourceAssignments = createConfigurationComponent({
+
+const DxResourceAssignmentsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -713,9 +803,15 @@ const DxResourceAssignments = createConfigurationComponent({
     resourceIdExpr: [Function, String],
     taskIdExpr: [Function, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxResourceAssignmentsConfig);
+
+const DxResourceAssignments = defineComponent(DxResourceAssignmentsConfig);
+
 (DxResourceAssignments as any).$_optionName = "resourceAssignments";
-const DxResources = createConfigurationComponent({
+
+const DxResourcesConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -730,9 +826,15 @@ const DxResources = createConfigurationComponent({
     keyExpr: [Function, String],
     textExpr: [Function, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxResourcesConfig);
+
+const DxResources = defineComponent(DxResourcesConfig);
+
 (DxResources as any).$_optionName = "resources";
-const DxScaleTypeRange = createConfigurationComponent({
+
+const DxScaleTypeRangeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -743,9 +845,15 @@ const DxScaleTypeRange = createConfigurationComponent({
     max: String,
     min: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxScaleTypeRangeConfig);
+
+const DxScaleTypeRange = defineComponent(DxScaleTypeRangeConfig);
+
 (DxScaleTypeRange as any).$_optionName = "scaleTypeRange";
-const DxSearch = createConfigurationComponent({
+
+const DxSearchConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -762,9 +870,15 @@ const DxSearch = createConfigurationComponent({
     searchExpr: [Array, Function, String],
     timeout: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSearchConfig);
+
+const DxSearch = defineComponent(DxSearchConfig);
+
 (DxSearch as any).$_optionName = "search";
-const DxSorting = createConfigurationComponent({
+
+const DxSortingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -781,9 +895,15 @@ const DxSorting = createConfigurationComponent({
     mode: String,
     showSortIndexes: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSortingConfig);
+
+const DxSorting = defineComponent(DxSortingConfig);
+
 (DxSorting as any).$_optionName = "sorting";
-const DxStripLine = createConfigurationComponent({
+
+const DxStripLineConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -798,10 +918,16 @@ const DxStripLine = createConfigurationComponent({
     start: [Date, Function, Number, String],
     title: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxStripLineConfig);
+
+const DxStripLine = defineComponent(DxStripLineConfig);
+
 (DxStripLine as any).$_optionName = "stripLines";
 (DxStripLine as any).$_isCollectionItem = true;
-const DxTasks = createConfigurationComponent({
+
+const DxTasksConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -824,9 +950,15 @@ const DxTasks = createConfigurationComponent({
     startExpr: [Function, String],
     titleExpr: [Function, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTasksConfig);
+
+const DxTasks = defineComponent(DxTasksConfig);
+
 (DxTasks as any).$_optionName = "tasks";
-const DxTexts = createConfigurationComponent({
+
+const DxTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -839,9 +971,15 @@ const DxTexts = createConfigurationComponent({
     emptyValue: String,
     ok: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTextsConfig);
+
+const DxTexts = defineComponent(DxTextsConfig);
+
 (DxTexts as any).$_optionName = "texts";
-const DxToolbar = createConfigurationComponent({
+
+const DxToolbarConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -850,13 +988,19 @@ const DxToolbar = createConfigurationComponent({
   props: {
     items: Array
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarConfig);
+
+const DxToolbar = defineComponent(DxToolbarConfig);
+
 (DxToolbar as any).$_optionName = "toolbar";
 (DxToolbar as any).$_expectedChildren = {
   item: { isCollectionItem: true, optionName: "items" },
   toolbarItem: { isCollectionItem: true, optionName: "items" }
 };
-const DxToolbarItem = createConfigurationComponent({
+
+const DxToolbarItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -889,10 +1033,16 @@ const DxToolbarItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarItemConfig);
+
+const DxToolbarItem = defineComponent(DxToolbarItemConfig);
+
 (DxToolbarItem as any).$_optionName = "items";
 (DxToolbarItem as any).$_isCollectionItem = true;
-const DxValidation = createConfigurationComponent({
+
+const DxValidationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -905,9 +1055,15 @@ const DxValidation = createConfigurationComponent({
     enablePredecessorGap: Boolean,
     validateDependencies: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxValidationConfig);
+
+const DxValidation = defineComponent(DxValidationConfig);
+
 (DxValidation as any).$_optionName = "validation";
 
+
 export default DxGantt;
 export {
   DxGantt,
diff --git a/packages/devextreme-vue/src/html-editor.ts b/packages/devextreme-vue/src/html-editor.ts
index b243b0305ca2..f9196bfd50bf 100644
--- a/packages/devextreme-vue/src/html-editor.ts
+++ b/packages/devextreme-vue/src/html-editor.ts
@@ -1,6 +1,6 @@
 import HtmlEditor, { Properties } from "devextreme/ui/html_editor";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -49,7 +49,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxHtmlEditor extends AccessibleOptions {
   readonly instance?: HtmlEditor;
 }
-const DxHtmlEditor = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -157,9 +158,14 @@ const DxHtmlEditor = createComponent({
       variables: { isCollectionItem: false, optionName: "variables" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxHtmlEditor = defineComponent(componentConfig);
+
 
-const DxFileUploaderOptions = createConfigurationComponent({
+const DxFileUploaderOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -296,9 +302,15 @@ const DxFileUploaderOptions = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFileUploaderOptionsConfig);
+
+const DxFileUploaderOptions = defineComponent(DxFileUploaderOptionsConfig);
+
 (DxFileUploaderOptions as any).$_optionName = "fileUploaderOptions";
-const DxImageUpload = createConfigurationComponent({
+
+const DxImageUploadConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -315,13 +327,19 @@ const DxImageUpload = createConfigurationComponent({
     uploadDirectory: String,
     uploadUrl: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxImageUploadConfig);
+
+const DxImageUpload = defineComponent(DxImageUploadConfig);
+
 (DxImageUpload as any).$_optionName = "imageUpload";
 (DxImageUpload as any).$_expectedChildren = {
   fileUploaderOptions: { isCollectionItem: false, optionName: "fileUploaderOptions" },
   tab: { isCollectionItem: true, optionName: "tabs" }
 };
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -372,10 +390,16 @@ const DxItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
-const DxMediaResizing = createConfigurationComponent({
+
+const DxMediaResizingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -386,9 +410,15 @@ const DxMediaResizing = createConfigurationComponent({
     allowedTargets: Array,
     enabled: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMediaResizingConfig);
+
+const DxMediaResizing = defineComponent(DxMediaResizingConfig);
+
 (DxMediaResizing as any).$_optionName = "mediaResizing";
-const DxMention = createConfigurationComponent({
+
+const DxMentionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -413,10 +443,16 @@ const DxMention = createConfigurationComponent({
     template: {},
     valueExpr: [Function, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMentionConfig);
+
+const DxMention = defineComponent(DxMentionConfig);
+
 (DxMention as any).$_optionName = "mentions";
 (DxMention as any).$_isCollectionItem = true;
-const DxTab = createConfigurationComponent({
+
+const DxTabConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -425,10 +461,16 @@ const DxTab = createConfigurationComponent({
   props: {
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTabConfig);
+
+const DxTab = defineComponent(DxTabConfig);
+
 (DxTab as any).$_optionName = "tabs";
 (DxTab as any).$_isCollectionItem = true;
-const DxTableContextMenu = createConfigurationComponent({
+
+const DxTableContextMenuConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -439,13 +481,19 @@ const DxTableContextMenu = createConfigurationComponent({
     enabled: Boolean,
     items: Array
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTableContextMenuConfig);
+
+const DxTableContextMenu = defineComponent(DxTableContextMenuConfig);
+
 (DxTableContextMenu as any).$_optionName = "tableContextMenu";
 (DxTableContextMenu as any).$_expectedChildren = {
   item: { isCollectionItem: true, optionName: "items" },
   tableContextMenuItem: { isCollectionItem: true, optionName: "items" }
 };
-const DxTableContextMenuItem = createConfigurationComponent({
+
+const DxTableContextMenuItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -474,10 +522,16 @@ const DxTableContextMenuItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTableContextMenuItemConfig);
+
+const DxTableContextMenuItem = defineComponent(DxTableContextMenuItemConfig);
+
 (DxTableContextMenuItem as any).$_optionName = "items";
 (DxTableContextMenuItem as any).$_isCollectionItem = true;
-const DxTableResizing = createConfigurationComponent({
+
+const DxTableResizingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -490,9 +544,15 @@ const DxTableResizing = createConfigurationComponent({
     minColumnWidth: Number,
     minRowHeight: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTableResizingConfig);
+
+const DxTableResizing = defineComponent(DxTableResizingConfig);
+
 (DxTableResizing as any).$_optionName = "tableResizing";
-const DxToolbar = createConfigurationComponent({
+
+const DxToolbarConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -505,13 +565,19 @@ const DxToolbar = createConfigurationComponent({
     items: Array,
     multiline: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarConfig);
+
+const DxToolbar = defineComponent(DxToolbarConfig);
+
 (DxToolbar as any).$_optionName = "toolbar";
 (DxToolbar as any).$_expectedChildren = {
   item: { isCollectionItem: true, optionName: "items" },
   toolbarItem: { isCollectionItem: true, optionName: "items" }
 };
-const DxToolbarItem = createConfigurationComponent({
+
+const DxToolbarItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -550,10 +616,16 @@ const DxToolbarItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarItemConfig);
+
+const DxToolbarItem = defineComponent(DxToolbarItemConfig);
+
 (DxToolbarItem as any).$_optionName = "items";
 (DxToolbarItem as any).$_isCollectionItem = true;
-const DxVariables = createConfigurationComponent({
+
+const DxVariablesConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -564,9 +636,15 @@ const DxVariables = createConfigurationComponent({
     dataSource: {},
     escapeChar: [Array, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxVariablesConfig);
+
+const DxVariables = defineComponent(DxVariablesConfig);
+
 (DxVariables as any).$_optionName = "variables";
 
+
 export default DxHtmlEditor;
 export {
   DxHtmlEditor,
diff --git a/packages/devextreme-vue/src/linear-gauge.ts b/packages/devextreme-vue/src/linear-gauge.ts
index 40c6947bbd3b..4cbad0d12604 100644
--- a/packages/devextreme-vue/src/linear-gauge.ts
+++ b/packages/devextreme-vue/src/linear-gauge.ts
@@ -1,6 +1,6 @@
 import LinearGauge, { Properties } from "devextreme/viz/linear_gauge";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "animation" |
@@ -39,7 +39,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxLinearGauge extends AccessibleOptions {
   readonly instance?: LinearGauge;
 }
-const DxLinearGauge = createComponent({
+
+const componentConfig = {
   props: {
     animation: Object,
     containerBackgroundColor: String,
@@ -131,9 +132,14 @@ const DxLinearGauge = createComponent({
       valueIndicator: { isCollectionItem: false, optionName: "valueIndicator" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxLinearGauge = defineComponent(componentConfig);
+
 
-const DxAnimation = createConfigurationComponent({
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -146,9 +152,15 @@ const DxAnimation = createConfigurationComponent({
     easing: String,
     enabled: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
-const DxBackgroundColor = createConfigurationComponent({
+
+const DxBackgroundColorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -159,9 +171,15 @@ const DxBackgroundColor = createConfigurationComponent({
     base: String,
     fillId: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBackgroundColorConfig);
+
+const DxBackgroundColor = defineComponent(DxBackgroundColorConfig);
+
 (DxBackgroundColor as any).$_optionName = "backgroundColor";
-const DxBorder = createConfigurationComponent({
+
+const DxBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -178,9 +196,15 @@ const DxBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBorderConfig);
+
+const DxBorder = defineComponent(DxBorderConfig);
+
 (DxBorder as any).$_optionName = "border";
-const DxColor = createConfigurationComponent({
+
+const DxColorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -191,9 +215,15 @@ const DxColor = createConfigurationComponent({
     base: String,
     fillId: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColorConfig);
+
+const DxColor = defineComponent(DxColorConfig);
+
 (DxColor as any).$_optionName = "color";
-const DxExport = createConfigurationComponent({
+
+const DxExportConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -214,9 +244,15 @@ const DxExport = createConfigurationComponent({
     printingEnabled: Boolean,
     svgToCanvas: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxExportConfig);
+
+const DxExport = defineComponent(DxExportConfig);
+
 (DxExport as any).$_optionName = "export";
-const DxFont = createConfigurationComponent({
+
+const DxFontConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -233,9 +269,15 @@ const DxFont = createConfigurationComponent({
     size: [Number, String],
     weight: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFontConfig);
+
+const DxFont = defineComponent(DxFontConfig);
+
 (DxFont as any).$_optionName = "font";
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -254,9 +296,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxGeometry = createConfigurationComponent({
+
+const DxGeometryConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -265,9 +313,15 @@ const DxGeometry = createConfigurationComponent({
   props: {
     orientation: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGeometryConfig);
+
+const DxGeometry = defineComponent(DxGeometryConfig);
+
 (DxGeometry as any).$_optionName = "geometry";
-const DxLabel = createConfigurationComponent({
+
+const DxLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -288,13 +342,19 @@ const DxLabel = createConfigurationComponent({
     useRangeColors: Boolean,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelConfig);
+
+const DxLabel = defineComponent(DxLabelConfig);
+
 (DxLabel as any).$_optionName = "label";
 (DxLabel as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
   format: { isCollectionItem: false, optionName: "format" }
 };
-const DxLoadingIndicator = createConfigurationComponent({
+
+const DxLoadingIndicatorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -309,12 +369,18 @@ const DxLoadingIndicator = createConfigurationComponent({
     show: Boolean,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLoadingIndicatorConfig);
+
+const DxLoadingIndicator = defineComponent(DxLoadingIndicatorConfig);
+
 (DxLoadingIndicator as any).$_optionName = "loadingIndicator";
 (DxLoadingIndicator as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxMargin = createConfigurationComponent({
+
+const DxMarginConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -329,9 +395,15 @@ const DxMargin = createConfigurationComponent({
     right: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMarginConfig);
+
+const DxMargin = defineComponent(DxMarginConfig);
+
 (DxMargin as any).$_optionName = "margin";
-const DxMinorTick = createConfigurationComponent({
+
+const DxMinorTickConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -348,9 +420,15 @@ const DxMinorTick = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMinorTickConfig);
+
+const DxMinorTick = defineComponent(DxMinorTickConfig);
+
 (DxMinorTick as any).$_optionName = "minorTick";
-const DxRange = createConfigurationComponent({
+
+const DxRangeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -363,13 +441,19 @@ const DxRange = createConfigurationComponent({
     endValue: Number,
     startValue: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRangeConfig);
+
+const DxRange = defineComponent(DxRangeConfig);
+
 (DxRange as any).$_optionName = "ranges";
 (DxRange as any).$_isCollectionItem = true;
 (DxRange as any).$_expectedChildren = {
   color: { isCollectionItem: false, optionName: "color" }
 };
-const DxRangeContainer = createConfigurationComponent({
+
+const DxRangeContainerConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -392,14 +476,20 @@ const DxRangeContainer = createConfigurationComponent({
     verticalOrientation: String,
     width: [Number, Object]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRangeContainerConfig);
+
+const DxRangeContainer = defineComponent(DxRangeContainerConfig);
+
 (DxRangeContainer as any).$_optionName = "rangeContainer";
 (DxRangeContainer as any).$_expectedChildren = {
   backgroundColor: { isCollectionItem: false, optionName: "backgroundColor" },
   range: { isCollectionItem: true, optionName: "ranges" },
   width: { isCollectionItem: false, optionName: "width" }
 };
-const DxScale = createConfigurationComponent({
+
+const DxScaleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -432,14 +522,20 @@ const DxScale = createConfigurationComponent({
     tickInterval: Number,
     verticalOrientation: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxScaleConfig);
+
+const DxScale = defineComponent(DxScaleConfig);
+
 (DxScale as any).$_optionName = "scale";
 (DxScale as any).$_expectedChildren = {
   label: { isCollectionItem: false, optionName: "label" },
   minorTick: { isCollectionItem: false, optionName: "minorTick" },
   tick: { isCollectionItem: false, optionName: "tick" }
 };
-const DxShadow = createConfigurationComponent({
+
+const DxShadowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -456,9 +552,15 @@ const DxShadow = createConfigurationComponent({
     offsetY: Number,
     opacity: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShadowConfig);
+
+const DxShadow = defineComponent(DxShadowConfig);
+
 (DxShadow as any).$_optionName = "shadow";
-const DxSize = createConfigurationComponent({
+
+const DxSizeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -469,9 +571,15 @@ const DxSize = createConfigurationComponent({
     height: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSizeConfig);
+
+const DxSize = defineComponent(DxSizeConfig);
+
 (DxSize as any).$_optionName = "size";
-const DxSubtitle = createConfigurationComponent({
+
+const DxSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -488,12 +596,18 @@ const DxSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSubtitleConfig);
+
+const DxSubtitle = defineComponent(DxSubtitleConfig);
+
 (DxSubtitle as any).$_optionName = "subtitle";
 (DxSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxSubvalueIndicator = createConfigurationComponent({
+
+const DxSubvalueIndicatorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -538,13 +652,19 @@ const DxSubvalueIndicator = createConfigurationComponent({
     verticalOrientation: String,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSubvalueIndicatorConfig);
+
+const DxSubvalueIndicator = defineComponent(DxSubvalueIndicatorConfig);
+
 (DxSubvalueIndicator as any).$_optionName = "subvalueIndicator";
 (DxSubvalueIndicator as any).$_expectedChildren = {
   color: { isCollectionItem: false, optionName: "color" },
   text: { isCollectionItem: false, optionName: "text" }
 };
-const DxText = createConfigurationComponent({
+
+const DxTextConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -559,13 +679,19 @@ const DxText = createConfigurationComponent({
     format: [Object, Function, String],
     indent: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTextConfig);
+
+const DxText = defineComponent(DxTextConfig);
+
 (DxText as any).$_optionName = "text";
 (DxText as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
   format: { isCollectionItem: false, optionName: "format" }
 };
-const DxTick = createConfigurationComponent({
+
+const DxTickConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -582,9 +708,15 @@ const DxTick = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTickConfig);
+
+const DxTick = defineComponent(DxTickConfig);
+
 (DxTick as any).$_optionName = "tick";
-const DxTitle = createConfigurationComponent({
+
+const DxTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -609,14 +741,20 @@ const DxTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTitleConfig);
+
+const DxTitle = defineComponent(DxTitleConfig);
+
 (DxTitle as any).$_optionName = "title";
 (DxTitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
   margin: { isCollectionItem: false, optionName: "margin" },
   subtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxTooltip = createConfigurationComponent({
+
+const DxTooltipConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -655,7 +793,12 @@ const DxTooltip = createConfigurationComponent({
     shadow: Object,
     zIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipConfig);
+
+const DxTooltip = defineComponent(DxTooltipConfig);
+
 (DxTooltip as any).$_optionName = "tooltip";
 (DxTooltip as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -663,7 +806,8 @@ const DxTooltip = createConfigurationComponent({
   format: { isCollectionItem: false, optionName: "format" },
   shadow: { isCollectionItem: false, optionName: "shadow" }
 };
-const DxValueIndicator = createConfigurationComponent({
+
+const DxValueIndicatorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -708,9 +852,15 @@ const DxValueIndicator = createConfigurationComponent({
     verticalOrientation: String,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxValueIndicatorConfig);
+
+const DxValueIndicator = defineComponent(DxValueIndicatorConfig);
+
 (DxValueIndicator as any).$_optionName = "valueIndicator";
-const DxWidth = createConfigurationComponent({
+
+const DxWidthConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -721,9 +871,15 @@ const DxWidth = createConfigurationComponent({
     end: Number,
     start: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxWidthConfig);
+
+const DxWidth = defineComponent(DxWidthConfig);
+
 (DxWidth as any).$_optionName = "width";
 
+
 export default DxLinearGauge;
 export {
   DxLinearGauge,
diff --git a/packages/devextreme-vue/src/list.ts b/packages/devextreme-vue/src/list.ts
index 73796f11b50e..290bfdd83b37 100644
--- a/packages/devextreme-vue/src/list.ts
+++ b/packages/devextreme-vue/src/list.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/list";
 import List, { Properties } from "devextreme/ui/list";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -83,7 +83,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxList extends AccessibleOptions {
   readonly instance?: List;
 }
-const DxList = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -253,9 +254,14 @@ const DxList = createComponent({
       searchEditorOptions: { isCollectionItem: false, optionName: "searchEditorOptions" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxList = defineComponent(componentConfig);
+
 
-const DxButton = createConfigurationComponent({
+const DxButtonConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -268,13 +274,19 @@ const DxButton = createConfigurationComponent({
     name: String,
     options: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxButtonConfig);
+
+const DxButton = defineComponent(DxButtonConfig);
+
 (DxButton as any).$_optionName = "buttons";
 (DxButton as any).$_isCollectionItem = true;
 (DxButton as any).$_expectedChildren = {
   options: { isCollectionItem: false, optionName: "options" }
 };
-const DxCursorOffset = createConfigurationComponent({
+
+const DxCursorOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -285,9 +297,15 @@ const DxCursorOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCursorOffsetConfig);
+
+const DxCursorOffset = defineComponent(DxCursorOffsetConfig);
+
 (DxCursorOffset as any).$_optionName = "cursorOffset";
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -310,10 +328,16 @@ const DxItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
-const DxItemDragging = createConfigurationComponent({
+
+const DxItemDraggingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -384,12 +408,18 @@ const DxItemDragging = createConfigurationComponent({
     scrollSpeed: Number,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemDraggingConfig);
+
+const DxItemDragging = defineComponent(DxItemDraggingConfig);
+
 (DxItemDragging as any).$_optionName = "itemDragging";
 (DxItemDragging as any).$_expectedChildren = {
   cursorOffset: { isCollectionItem: false, optionName: "cursorOffset" }
 };
-const DxMenuItem = createConfigurationComponent({
+
+const DxMenuItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -400,10 +430,16 @@ const DxMenuItem = createConfigurationComponent({
     action: Function,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMenuItemConfig);
+
+const DxMenuItem = defineComponent(DxMenuItemConfig);
+
 (DxMenuItem as any).$_optionName = "menuItems";
 (DxMenuItem as any).$_isCollectionItem = true;
-const DxOptions = createConfigurationComponent({
+
+const DxOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -460,9 +496,15 @@ const DxOptions = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOptionsConfig);
+
+const DxOptions = defineComponent(DxOptionsConfig);
+
 (DxOptions as any).$_optionName = "options";
-const DxSearchEditorOptions = createConfigurationComponent({
+
+const DxSearchEditorOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -581,12 +623,18 @@ const DxSearchEditorOptions = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSearchEditorOptionsConfig);
+
+const DxSearchEditorOptions = defineComponent(DxSearchEditorOptionsConfig);
+
 (DxSearchEditorOptions as any).$_optionName = "searchEditorOptions";
 (DxSearchEditorOptions as any).$_expectedChildren = {
   button: { isCollectionItem: true, optionName: "buttons" }
 };
 
+
 export default DxList;
 export {
   DxList,
diff --git a/packages/devextreme-vue/src/load-indicator.ts b/packages/devextreme-vue/src/load-indicator.ts
index 3a4c64f1d177..5a9cd8bac4b8 100644
--- a/packages/devextreme-vue/src/load-indicator.ts
+++ b/packages/devextreme-vue/src/load-indicator.ts
@@ -1,5 +1,6 @@
 import LoadIndicator, { Properties } from "devextreme/ui/load_indicator";
-import { createComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "elementAttr" |
@@ -18,7 +19,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxLoadIndicator extends AccessibleOptions {
   readonly instance?: LoadIndicator;
 }
-const DxLoadIndicator = createComponent({
+
+const componentConfig = {
   props: {
     elementAttr: Object,
     height: [Function, Number, String],
@@ -56,7 +58,11 @@ const DxLoadIndicator = createComponent({
     (this as any).$_WidgetClass = LoadIndicator;
     (this as any).$_hasAsyncTemplate = true;
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxLoadIndicator = defineComponent(componentConfig);
 
 export default DxLoadIndicator;
 export {
diff --git a/packages/devextreme-vue/src/load-panel.ts b/packages/devextreme-vue/src/load-panel.ts
index 6590fa9e450c..36f2cae3ea50 100644
--- a/packages/devextreme-vue/src/load-panel.ts
+++ b/packages/devextreme-vue/src/load-panel.ts
@@ -1,6 +1,6 @@
 import LoadPanel, { Properties } from "devextreme/ui/load_panel";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "animation" |
@@ -42,7 +42,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxLoadPanel extends AccessibleOptions {
   readonly instance?: LoadPanel;
 }
-const DxLoadPanel = createComponent({
+
+const componentConfig = {
   props: {
     animation: Object,
     closeOnOutsideClick: [Boolean, Function],
@@ -130,9 +131,14 @@ const DxLoadPanel = createComponent({
       position: { isCollectionItem: false, optionName: "position" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxLoadPanel = defineComponent(componentConfig);
 
-const DxAnimation = createConfigurationComponent({
+
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -143,13 +149,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -160,9 +172,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -173,9 +191,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -186,9 +210,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -205,12 +235,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -237,13 +273,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -254,9 +296,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -267,9 +315,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -290,9 +344,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -319,9 +379,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -338,9 +404,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
 
+
 export default DxLoadPanel;
 export {
   DxLoadPanel,
diff --git a/packages/devextreme-vue/src/lookup.ts b/packages/devextreme-vue/src/lookup.ts
index 0837ea56edf1..503624cb3945 100644
--- a/packages/devextreme-vue/src/lookup.ts
+++ b/packages/devextreme-vue/src/lookup.ts
@@ -1,6 +1,6 @@
 import Lookup, { Properties } from "devextreme/ui/lookup";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -91,7 +91,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxLookup extends AccessibleOptions {
   readonly instance?: Lookup;
 }
-const DxLookup = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -278,9 +279,14 @@ const DxLookup = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
 
-const DxAnimation = createConfigurationComponent({
+const DxLookup = defineComponent(componentConfig);
+
+
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -291,13 +297,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -308,9 +320,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -321,9 +339,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -334,9 +358,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxDropDownOptions = createConfigurationComponent({
+
+const DxDropDownOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -425,7 +455,12 @@ const DxDropDownOptions = createConfigurationComponent({
     width: [Function, Number, String],
     wrapperAttr: {}
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDropDownOptionsConfig);
+
+const DxDropDownOptions = defineComponent(DxDropDownOptionsConfig);
+
 (DxDropDownOptions as any).$_optionName = "dropDownOptions";
 (DxDropDownOptions as any).$_expectedChildren = {
   animation: { isCollectionItem: false, optionName: "animation" },
@@ -434,7 +469,8 @@ const DxDropDownOptions = createConfigurationComponent({
   showEvent: { isCollectionItem: false, optionName: "showEvent" },
   toolbarItem: { isCollectionItem: true, optionName: "toolbarItems" }
 };
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -451,12 +487,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -483,13 +525,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxHideEvent = createConfigurationComponent({
+
+const DxHideEventConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -500,9 +548,15 @@ const DxHideEvent = createConfigurationComponent({
     delay: Number,
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideEventConfig);
+
+const DxHideEvent = defineComponent(DxHideEventConfig);
+
 (DxHideEvent as any).$_optionName = "hideEvent";
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -519,10 +573,16 @@ const DxItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -533,9 +593,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -546,9 +612,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -569,9 +641,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -598,9 +676,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxShowEvent = createConfigurationComponent({
+
+const DxShowEventConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -611,9 +695,15 @@ const DxShowEvent = createConfigurationComponent({
     delay: Number,
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowEventConfig);
+
+const DxShowEvent = defineComponent(DxShowEventConfig);
+
 (DxShowEvent as any).$_optionName = "showEvent";
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -630,9 +720,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
-const DxToolbarItem = createConfigurationComponent({
+
+const DxToolbarItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -665,10 +761,16 @@ const DxToolbarItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarItemConfig);
+
+const DxToolbarItem = defineComponent(DxToolbarItemConfig);
+
 (DxToolbarItem as any).$_optionName = "toolbarItems";
 (DxToolbarItem as any).$_isCollectionItem = true;
 
+
 export default DxLookup;
 export {
   DxLookup,
diff --git a/packages/devextreme-vue/src/map.ts b/packages/devextreme-vue/src/map.ts
index 18cb412740f4..1511fe08d64d 100644
--- a/packages/devextreme-vue/src/map.ts
+++ b/packages/devextreme-vue/src/map.ts
@@ -1,6 +1,6 @@
 import Map, { Properties } from "devextreme/ui/map";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -39,7 +39,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxMap extends AccessibleOptions {
   readonly instance?: Map;
 }
-const DxMap = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -123,9 +124,14 @@ const DxMap = createComponent({
       route: { isCollectionItem: true, optionName: "routes" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxMap = defineComponent(componentConfig);
+
 
-const DxApiKey = createConfigurationComponent({
+const DxApiKeyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -138,9 +144,15 @@ const DxApiKey = createConfigurationComponent({
     google: String,
     googleStatic: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxApiKeyConfig);
+
+const DxApiKey = defineComponent(DxApiKeyConfig);
+
 (DxApiKey as any).$_optionName = "apiKey";
-const DxCenter = createConfigurationComponent({
+
+const DxCenterConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -151,9 +163,15 @@ const DxCenter = createConfigurationComponent({
     lat: Number,
     lng: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCenterConfig);
+
+const DxCenter = defineComponent(DxCenterConfig);
+
 (DxCenter as any).$_optionName = "center";
-const DxLocation = createConfigurationComponent({
+
+const DxLocationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -164,9 +182,15 @@ const DxLocation = createConfigurationComponent({
     lat: Number,
     lng: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLocationConfig);
+
+const DxLocation = defineComponent(DxLocationConfig);
+
 (DxLocation as any).$_optionName = "location";
-const DxMarker = createConfigurationComponent({
+
+const DxMarkerConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -181,14 +205,20 @@ const DxMarker = createConfigurationComponent({
     onClick: Function,
     tooltip: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMarkerConfig);
+
+const DxMarker = defineComponent(DxMarkerConfig);
+
 (DxMarker as any).$_optionName = "markers";
 (DxMarker as any).$_isCollectionItem = true;
 (DxMarker as any).$_expectedChildren = {
   location: { isCollectionItem: false, optionName: "location" },
   tooltip: { isCollectionItem: false, optionName: "tooltip" }
 };
-const DxRoute = createConfigurationComponent({
+
+const DxRouteConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -205,13 +235,19 @@ const DxRoute = createConfigurationComponent({
     opacity: Number,
     weight: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRouteConfig);
+
+const DxRoute = defineComponent(DxRouteConfig);
+
 (DxRoute as any).$_optionName = "routes";
 (DxRoute as any).$_isCollectionItem = true;
 (DxRoute as any).$_expectedChildren = {
   location: { isCollectionItem: true, optionName: "locations" }
 };
-const DxTooltip = createConfigurationComponent({
+
+const DxTooltipConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -222,9 +258,15 @@ const DxTooltip = createConfigurationComponent({
     isShown: Boolean,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipConfig);
+
+const DxTooltip = defineComponent(DxTooltipConfig);
+
 (DxTooltip as any).$_optionName = "tooltip";
 
+
 export default DxMap;
 export {
   DxMap,
diff --git a/packages/devextreme-vue/src/menu.ts b/packages/devextreme-vue/src/menu.ts
index 81dae9b94de7..03d88d820872 100644
--- a/packages/devextreme-vue/src/menu.ts
+++ b/packages/devextreme-vue/src/menu.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/menu";
 import Menu, { Properties } from "devextreme/ui/menu";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -51,7 +51,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxMenu extends AccessibleOptions {
   readonly instance?: Menu;
 }
-const DxMenu = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -157,9 +158,14 @@ const DxMenu = createComponent({
       showSubmenuMode: { isCollectionItem: false, optionName: "showSubmenuMode" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxMenu = defineComponent(componentConfig);
+
 
-const DxAnimation = createConfigurationComponent({
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -170,13 +176,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -187,9 +199,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -200,9 +218,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -213,9 +237,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxDelay = createConfigurationComponent({
+
+const DxDelayConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -226,9 +256,15 @@ const DxDelay = createConfigurationComponent({
     hide: Number,
     show: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDelayConfig);
+
+const DxDelay = defineComponent(DxDelayConfig);
+
 (DxDelay as any).$_optionName = "delay";
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -245,12 +281,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -277,13 +319,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -314,10 +362,16 @@ const DxItem = createConfigurationComponent({
     url: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -328,9 +382,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -341,9 +401,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -364,7 +430,12 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
 (DxPosition as any).$_expectedChildren = {
   at: { isCollectionItem: false, optionName: "at" },
@@ -373,7 +444,8 @@ const DxPosition = createConfigurationComponent({
   my: { isCollectionItem: false, optionName: "my" },
   offset: { isCollectionItem: false, optionName: "offset" }
 };
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -400,9 +472,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxShowFirstSubmenuMode = createConfigurationComponent({
+
+const DxShowFirstSubmenuModeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -413,12 +491,18 @@ const DxShowFirstSubmenuMode = createConfigurationComponent({
     delay: [Number, Object],
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowFirstSubmenuModeConfig);
+
+const DxShowFirstSubmenuMode = defineComponent(DxShowFirstSubmenuModeConfig);
+
 (DxShowFirstSubmenuMode as any).$_optionName = "showFirstSubmenuMode";
 (DxShowFirstSubmenuMode as any).$_expectedChildren = {
   delay: { isCollectionItem: false, optionName: "delay" }
 };
-const DxShowSubmenuMode = createConfigurationComponent({
+
+const DxShowSubmenuModeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -429,12 +513,18 @@ const DxShowSubmenuMode = createConfigurationComponent({
     delay: [Number, Object],
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowSubmenuModeConfig);
+
+const DxShowSubmenuMode = defineComponent(DxShowSubmenuModeConfig);
+
 (DxShowSubmenuMode as any).$_optionName = "showSubmenuMode";
 (DxShowSubmenuMode as any).$_expectedChildren = {
   delay: { isCollectionItem: false, optionName: "delay" }
 };
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -451,9 +541,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
 
+
 export default DxMenu;
 export {
   DxMenu,
diff --git a/packages/devextreme-vue/src/multi-view.ts b/packages/devextreme-vue/src/multi-view.ts
index 66279ac223e2..614877727048 100644
--- a/packages/devextreme-vue/src/multi-view.ts
+++ b/packages/devextreme-vue/src/multi-view.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/multi_view";
 import MultiView, { Properties } from "devextreme/ui/multi_view";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -41,7 +41,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxMultiView extends AccessibleOptions {
   readonly instance?: MultiView;
 }
-const DxMultiView = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -124,9 +125,14 @@ const DxMultiView = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxMultiView = defineComponent(componentConfig);
+
 
-const DxItem = createConfigurationComponent({
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -143,10 +149,16 @@ const DxItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
 
+
 export default DxMultiView;
 export {
   DxMultiView,
diff --git a/packages/devextreme-vue/src/number-box.ts b/packages/devextreme-vue/src/number-box.ts
index 1b8d285c7f20..3bff792ee147 100644
--- a/packages/devextreme-vue/src/number-box.ts
+++ b/packages/devextreme-vue/src/number-box.ts
@@ -1,6 +1,6 @@
 import NumberBox, { Properties } from "devextreme/ui/number_box";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -62,7 +62,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxNumberBox extends AccessibleOptions {
   readonly instance?: NumberBox;
 }
-const DxNumberBox = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -191,9 +192,14 @@ const DxNumberBox = createComponent({
       format: { isCollectionItem: false, optionName: "format" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxNumberBox = defineComponent(componentConfig);
+
 
-const DxButton = createConfigurationComponent({
+const DxButtonConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -206,13 +212,19 @@ const DxButton = createConfigurationComponent({
     name: String,
     options: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxButtonConfig);
+
+const DxButton = defineComponent(DxButtonConfig);
+
 (DxButton as any).$_optionName = "buttons";
 (DxButton as any).$_isCollectionItem = true;
 (DxButton as any).$_expectedChildren = {
   options: { isCollectionItem: false, optionName: "options" }
 };
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -231,9 +243,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxOptions = createConfigurationComponent({
+
+const DxOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -290,9 +308,15 @@ const DxOptions = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOptionsConfig);
+
+const DxOptions = defineComponent(DxOptionsConfig);
+
 (DxOptions as any).$_optionName = "options";
 
+
 export default DxNumberBox;
 export {
   DxNumberBox,
diff --git a/packages/devextreme-vue/src/pie-chart.ts b/packages/devextreme-vue/src/pie-chart.ts
index 36dd2ba04917..eb5c86a4f376 100644
--- a/packages/devextreme-vue/src/pie-chart.ts
+++ b/packages/devextreme-vue/src/pie-chart.ts
@@ -1,6 +1,6 @@
 import PieChart, { Properties } from "devextreme/viz/pie_chart";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "adaptiveLayout" |
@@ -59,7 +59,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxPieChart extends AccessibleOptions {
   readonly instance?: PieChart;
 }
-const DxPieChart = createComponent({
+
+const componentConfig = {
   props: {
     adaptiveLayout: Object,
     animation: [Boolean, Object],
@@ -194,9 +195,14 @@ const DxPieChart = createComponent({
       tooltip: { isCollectionItem: false, optionName: "tooltip" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
 
-const DxAdaptiveLayout = createConfigurationComponent({
+const DxPieChart = defineComponent(componentConfig);
+
+
+const DxAdaptiveLayoutConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -209,9 +215,15 @@ const DxAdaptiveLayout = createConfigurationComponent({
     keepLabels: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAdaptiveLayoutConfig);
+
+const DxAdaptiveLayout = defineComponent(DxAdaptiveLayoutConfig);
+
 (DxAdaptiveLayout as any).$_optionName = "adaptiveLayout";
-const DxAnimation = createConfigurationComponent({
+
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -226,9 +238,15 @@ const DxAnimation = createConfigurationComponent({
     enabled: Boolean,
     maxPointCountSupported: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
-const DxAnnotation = createConfigurationComponent({
+
+const DxAnnotationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -297,7 +315,12 @@ const DxAnnotation = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnnotationConfig);
+
+const DxAnnotation = defineComponent(DxAnnotationConfig);
+
 (DxAnnotation as any).$_optionName = "annotations";
 (DxAnnotation as any).$_isCollectionItem = true;
 (DxAnnotation as any).$_expectedChildren = {
@@ -307,7 +330,8 @@ const DxAnnotation = createConfigurationComponent({
   image: { isCollectionItem: false, optionName: "image" },
   shadow: { isCollectionItem: false, optionName: "shadow" }
 };
-const DxAnnotationBorder = createConfigurationComponent({
+
+const DxAnnotationBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -326,9 +350,15 @@ const DxAnnotationBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnnotationBorderConfig);
+
+const DxAnnotationBorder = defineComponent(DxAnnotationBorderConfig);
+
 (DxAnnotationBorder as any).$_optionName = "border";
-const DxArgumentFormat = createConfigurationComponent({
+
+const DxArgumentFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -347,9 +377,15 @@ const DxArgumentFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxArgumentFormatConfig);
+
+const DxArgumentFormat = defineComponent(DxArgumentFormatConfig);
+
 (DxArgumentFormat as any).$_optionName = "argumentFormat";
-const DxBorder = createConfigurationComponent({
+
+const DxBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -368,9 +404,15 @@ const DxBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBorderConfig);
+
+const DxBorder = defineComponent(DxBorderConfig);
+
 (DxBorder as any).$_optionName = "border";
-const DxColor = createConfigurationComponent({
+
+const DxColorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -381,9 +423,15 @@ const DxColor = createConfigurationComponent({
     base: String,
     fillId: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColorConfig);
+
+const DxColor = defineComponent(DxColorConfig);
+
 (DxColor as any).$_optionName = "color";
-const DxCommonAnnotationSettings = createConfigurationComponent({
+
+const DxCommonAnnotationSettingsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -450,9 +498,15 @@ const DxCommonAnnotationSettings = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonAnnotationSettingsConfig);
+
+const DxCommonAnnotationSettings = defineComponent(DxCommonAnnotationSettingsConfig);
+
 (DxCommonAnnotationSettings as any).$_optionName = "commonAnnotationSettings";
-const DxCommonSeriesSettings = createConfigurationComponent({
+
+const DxCommonSeriesSettingsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -487,7 +541,12 @@ const DxCommonSeriesSettings = createConfigurationComponent({
     tagField: String,
     valueField: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonSeriesSettingsConfig);
+
+const DxCommonSeriesSettings = defineComponent(DxCommonSeriesSettingsConfig);
+
 (DxCommonSeriesSettings as any).$_optionName = "commonSeriesSettings";
 (DxCommonSeriesSettings as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -498,7 +557,8 @@ const DxCommonSeriesSettings = createConfigurationComponent({
   seriesBorder: { isCollectionItem: false, optionName: "border" },
   smallValuesGrouping: { isCollectionItem: false, optionName: "smallValuesGrouping" }
 };
-const DxConnector = createConfigurationComponent({
+
+const DxConnectorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -511,9 +571,15 @@ const DxConnector = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxConnectorConfig);
+
+const DxConnector = defineComponent(DxConnectorConfig);
+
 (DxConnector as any).$_optionName = "connector";
-const DxExport = createConfigurationComponent({
+
+const DxExportConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -534,9 +600,15 @@ const DxExport = createConfigurationComponent({
     printingEnabled: Boolean,
     svgToCanvas: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxExportConfig);
+
+const DxExport = defineComponent(DxExportConfig);
+
 (DxExport as any).$_optionName = "export";
-const DxFont = createConfigurationComponent({
+
+const DxFontConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -553,9 +625,15 @@ const DxFont = createConfigurationComponent({
     size: [Number, String],
     weight: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFontConfig);
+
+const DxFont = defineComponent(DxFontConfig);
+
 (DxFont as any).$_optionName = "font";
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -574,9 +652,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxHatching = createConfigurationComponent({
+
+const DxHatchingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -591,9 +675,15 @@ const DxHatching = createConfigurationComponent({
     step: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHatchingConfig);
+
+const DxHatching = defineComponent(DxHatchingConfig);
+
 (DxHatching as any).$_optionName = "hatching";
-const DxHoverStyle = createConfigurationComponent({
+
+const DxHoverStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -608,7 +698,12 @@ const DxHoverStyle = createConfigurationComponent({
     hatching: Object,
     highlight: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHoverStyleConfig);
+
+const DxHoverStyle = defineComponent(DxHoverStyleConfig);
+
 (DxHoverStyle as any).$_optionName = "hoverStyle";
 (DxHoverStyle as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -616,7 +711,8 @@ const DxHoverStyle = createConfigurationComponent({
   hatching: { isCollectionItem: false, optionName: "hatching" },
   seriesBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxImage = createConfigurationComponent({
+
+const DxImageConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -629,9 +725,15 @@ const DxImage = createConfigurationComponent({
     url: String,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxImageConfig);
+
+const DxImage = defineComponent(DxImageConfig);
+
 (DxImage as any).$_optionName = "image";
-const DxLabel = createConfigurationComponent({
+
+const DxLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -666,7 +768,12 @@ const DxLabel = createConfigurationComponent({
     visible: Boolean,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelConfig);
+
+const DxLabel = defineComponent(DxLabelConfig);
+
 (DxLabel as any).$_optionName = "label";
 (DxLabel as any).$_expectedChildren = {
   argumentFormat: { isCollectionItem: false, optionName: "argumentFormat" },
@@ -676,7 +783,8 @@ const DxLabel = createConfigurationComponent({
   format: { isCollectionItem: false, optionName: "format" },
   seriesBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxLegend = createConfigurationComponent({
+
+const DxLegendConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -729,7 +837,12 @@ const DxLegend = createConfigurationComponent({
     verticalAlignment: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendConfig);
+
+const DxLegend = defineComponent(DxLegendConfig);
+
 (DxLegend as any).$_optionName = "legend";
 (DxLegend as any).$_expectedChildren = {
   annotationBorder: { isCollectionItem: false, optionName: "border" },
@@ -739,7 +852,8 @@ const DxLegend = createConfigurationComponent({
   margin: { isCollectionItem: false, optionName: "margin" },
   title: { isCollectionItem: false, optionName: "title" }
 };
-const DxLegendTitle = createConfigurationComponent({
+
+const DxLegendTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -760,7 +874,12 @@ const DxLegendTitle = createConfigurationComponent({
     text: String,
     verticalAlignment: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendTitleConfig);
+
+const DxLegendTitle = defineComponent(DxLegendTitleConfig);
+
 (DxLegendTitle as any).$_optionName = "title";
 (DxLegendTitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
@@ -768,7 +887,8 @@ const DxLegendTitle = createConfigurationComponent({
   margin: { isCollectionItem: false, optionName: "margin" },
   subtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxLegendTitleSubtitle = createConfigurationComponent({
+
+const DxLegendTitleSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -781,12 +901,18 @@ const DxLegendTitleSubtitle = createConfigurationComponent({
     offset: Number,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendTitleSubtitleConfig);
+
+const DxLegendTitleSubtitle = defineComponent(DxLegendTitleSubtitleConfig);
+
 (DxLegendTitleSubtitle as any).$_optionName = "subtitle";
 (DxLegendTitleSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxLoadingIndicator = createConfigurationComponent({
+
+const DxLoadingIndicatorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -803,12 +929,18 @@ const DxLoadingIndicator = createConfigurationComponent({
     show: Boolean,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLoadingIndicatorConfig);
+
+const DxLoadingIndicator = defineComponent(DxLoadingIndicatorConfig);
+
 (DxLoadingIndicator as any).$_optionName = "loadingIndicator";
 (DxLoadingIndicator as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxMargin = createConfigurationComponent({
+
+const DxMarginConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -823,9 +955,15 @@ const DxMargin = createConfigurationComponent({
     right: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMarginConfig);
+
+const DxMargin = defineComponent(DxMarginConfig);
+
 (DxMargin as any).$_optionName = "margin";
-const DxPieChartTitle = createConfigurationComponent({
+
+const DxPieChartTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -850,7 +988,12 @@ const DxPieChartTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPieChartTitleConfig);
+
+const DxPieChartTitle = defineComponent(DxPieChartTitleConfig);
+
 (DxPieChartTitle as any).$_optionName = "title";
 (DxPieChartTitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
@@ -858,7 +1001,8 @@ const DxPieChartTitle = createConfigurationComponent({
   pieChartTitleSubtitle: { isCollectionItem: false, optionName: "subtitle" },
   subtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxPieChartTitleSubtitle = createConfigurationComponent({
+
+const DxPieChartTitleSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -875,12 +1019,18 @@ const DxPieChartTitleSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPieChartTitleSubtitleConfig);
+
+const DxPieChartTitleSubtitle = defineComponent(DxPieChartTitleSubtitleConfig);
+
 (DxPieChartTitleSubtitle as any).$_optionName = "subtitle";
 (DxPieChartTitleSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxSelectionStyle = createConfigurationComponent({
+
+const DxSelectionStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -895,7 +1045,12 @@ const DxSelectionStyle = createConfigurationComponent({
     hatching: Object,
     highlight: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSelectionStyleConfig);
+
+const DxSelectionStyle = defineComponent(DxSelectionStyleConfig);
+
 (DxSelectionStyle as any).$_optionName = "selectionStyle";
 (DxSelectionStyle as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -903,7 +1058,8 @@ const DxSelectionStyle = createConfigurationComponent({
   hatching: { isCollectionItem: false, optionName: "hatching" },
   seriesBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxSeries = createConfigurationComponent({
+
+const DxSeriesConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -942,10 +1098,16 @@ const DxSeries = createConfigurationComponent({
     tagField: String,
     valueField: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSeriesConfig);
+
+const DxSeries = defineComponent(DxSeriesConfig);
+
 (DxSeries as any).$_optionName = "series";
 (DxSeries as any).$_isCollectionItem = true;
-const DxSeriesBorder = createConfigurationComponent({
+
+const DxSeriesBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -960,9 +1122,15 @@ const DxSeriesBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSeriesBorderConfig);
+
+const DxSeriesBorder = defineComponent(DxSeriesBorderConfig);
+
 (DxSeriesBorder as any).$_optionName = "border";
-const DxSeriesTemplate = createConfigurationComponent({
+
+const DxSeriesTemplateConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -973,9 +1141,15 @@ const DxSeriesTemplate = createConfigurationComponent({
     customizeSeries: Function,
     nameField: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSeriesTemplateConfig);
+
+const DxSeriesTemplate = defineComponent(DxSeriesTemplateConfig);
+
 (DxSeriesTemplate as any).$_optionName = "seriesTemplate";
-const DxShadow = createConfigurationComponent({
+
+const DxShadowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -992,9 +1166,15 @@ const DxShadow = createConfigurationComponent({
     offsetY: Number,
     opacity: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShadowConfig);
+
+const DxShadow = defineComponent(DxShadowConfig);
+
 (DxShadow as any).$_optionName = "shadow";
-const DxSize = createConfigurationComponent({
+
+const DxSizeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1005,9 +1185,15 @@ const DxSize = createConfigurationComponent({
     height: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSizeConfig);
+
+const DxSize = defineComponent(DxSizeConfig);
+
 (DxSize as any).$_optionName = "size";
-const DxSmallValuesGrouping = createConfigurationComponent({
+
+const DxSmallValuesGroupingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1022,9 +1208,15 @@ const DxSmallValuesGrouping = createConfigurationComponent({
     threshold: Number,
     topCount: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSmallValuesGroupingConfig);
+
+const DxSmallValuesGrouping = defineComponent(DxSmallValuesGroupingConfig);
+
 (DxSmallValuesGrouping as any).$_optionName = "smallValuesGrouping";
-const DxSubtitle = createConfigurationComponent({
+
+const DxSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1041,9 +1233,15 @@ const DxSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSubtitleConfig);
+
+const DxSubtitle = defineComponent(DxSubtitleConfig);
+
 (DxSubtitle as any).$_optionName = "subtitle";
-const DxTitle = createConfigurationComponent({
+
+const DxTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1068,9 +1266,15 @@ const DxTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTitleConfig);
+
+const DxTitle = defineComponent(DxTitleConfig);
+
 (DxTitle as any).$_optionName = "title";
-const DxTooltip = createConfigurationComponent({
+
+const DxTooltipConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1113,7 +1317,12 @@ const DxTooltip = createConfigurationComponent({
     shared: Boolean,
     zIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipConfig);
+
+const DxTooltip = defineComponent(DxTooltipConfig);
+
 (DxTooltip as any).$_optionName = "tooltip";
 (DxTooltip as any).$_expectedChildren = {
   argumentFormat: { isCollectionItem: false, optionName: "argumentFormat" },
@@ -1123,7 +1332,8 @@ const DxTooltip = createConfigurationComponent({
   shadow: { isCollectionItem: false, optionName: "shadow" },
   tooltipBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxTooltipBorder = createConfigurationComponent({
+
+const DxTooltipBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1140,9 +1350,15 @@ const DxTooltipBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipBorderConfig);
+
+const DxTooltipBorder = defineComponent(DxTooltipBorderConfig);
+
 (DxTooltipBorder as any).$_optionName = "border";
 
+
 export default DxPieChart;
 export {
   DxPieChart,
diff --git a/packages/devextreme-vue/src/pivot-grid-field-chooser.ts b/packages/devextreme-vue/src/pivot-grid-field-chooser.ts
index bd701d3cf344..4710038da33a 100644
--- a/packages/devextreme-vue/src/pivot-grid-field-chooser.ts
+++ b/packages/devextreme-vue/src/pivot-grid-field-chooser.ts
@@ -1,6 +1,6 @@
 import PivotGridFieldChooser, { Properties } from "devextreme/ui/pivot_grid_field_chooser";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -34,7 +34,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxPivotGridFieldChooser extends AccessibleOptions {
   readonly instance?: PivotGridFieldChooser;
 }
-const DxPivotGridFieldChooser = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -114,9 +115,14 @@ const DxPivotGridFieldChooser = createComponent({
       texts: { isCollectionItem: false, optionName: "texts" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxPivotGridFieldChooser = defineComponent(componentConfig);
 
-const DxHeaderFilter = createConfigurationComponent({
+
+const DxHeaderFilterConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -139,14 +145,20 @@ const DxHeaderFilter = createConfigurationComponent({
     texts: Object,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHeaderFilterConfig);
+
+const DxHeaderFilter = defineComponent(DxHeaderFilterConfig);
+
 (DxHeaderFilter as any).$_optionName = "headerFilter";
 (DxHeaderFilter as any).$_expectedChildren = {
   headerFilterTexts: { isCollectionItem: false, optionName: "texts" },
   search: { isCollectionItem: false, optionName: "search" },
   texts: { isCollectionItem: false, optionName: "texts" }
 };
-const DxHeaderFilterTexts = createConfigurationComponent({
+
+const DxHeaderFilterTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -159,9 +171,15 @@ const DxHeaderFilterTexts = createConfigurationComponent({
     emptyValue: String,
     ok: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHeaderFilterTextsConfig);
+
+const DxHeaderFilterTexts = defineComponent(DxHeaderFilterTextsConfig);
+
 (DxHeaderFilterTexts as any).$_optionName = "texts";
-const DxPivotGridFieldChooserTexts = createConfigurationComponent({
+
+const DxPivotGridFieldChooserTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -178,9 +196,15 @@ const DxPivotGridFieldChooserTexts = createConfigurationComponent({
     filterFields: String,
     rowFields: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPivotGridFieldChooserTextsConfig);
+
+const DxPivotGridFieldChooserTexts = defineComponent(DxPivotGridFieldChooserTextsConfig);
+
 (DxPivotGridFieldChooserTexts as any).$_optionName = "texts";
-const DxSearch = createConfigurationComponent({
+
+const DxSearchConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -195,9 +219,15 @@ const DxSearch = createConfigurationComponent({
     mode: String,
     timeout: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSearchConfig);
+
+const DxSearch = defineComponent(DxSearchConfig);
+
 (DxSearch as any).$_optionName = "search";
-const DxTexts = createConfigurationComponent({
+
+const DxTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -220,9 +250,15 @@ const DxTexts = createConfigurationComponent({
     ok: String,
     rowFields: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTextsConfig);
+
+const DxTexts = defineComponent(DxTextsConfig);
+
 (DxTexts as any).$_optionName = "texts";
 
+
 export default DxPivotGridFieldChooser;
 export {
   DxPivotGridFieldChooser,
diff --git a/packages/devextreme-vue/src/pivot-grid.ts b/packages/devextreme-vue/src/pivot-grid.ts
index cdc522037122..a84544103e9d 100644
--- a/packages/devextreme-vue/src/pivot-grid.ts
+++ b/packages/devextreme-vue/src/pivot-grid.ts
@@ -1,6 +1,6 @@
 import PivotGrid, { Properties } from "devextreme/ui/pivot_grid";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "allowExpandAll" |
@@ -48,7 +48,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxPivotGrid extends AccessibleOptions {
   readonly instance?: PivotGrid;
 }
-const DxPivotGrid = createComponent({
+
+const componentConfig = {
   props: {
     allowExpandAll: Boolean,
     allowFiltering: Boolean,
@@ -155,9 +156,14 @@ const DxPivotGrid = createComponent({
       texts: { isCollectionItem: false, optionName: "texts" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxPivotGrid = defineComponent(componentConfig);
+
 
-const DxExport = createConfigurationComponent({
+const DxExportConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -166,9 +172,15 @@ const DxExport = createConfigurationComponent({
   props: {
     enabled: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxExportConfig);
+
+const DxExport = defineComponent(DxExportConfig);
+
 (DxExport as any).$_optionName = "export";
-const DxFieldChooser = createConfigurationComponent({
+
+const DxFieldChooserConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -200,13 +212,19 @@ const DxFieldChooser = createConfigurationComponent({
     title: String,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFieldChooserConfig);
+
+const DxFieldChooser = defineComponent(DxFieldChooserConfig);
+
 (DxFieldChooser as any).$_optionName = "fieldChooser";
 (DxFieldChooser as any).$_expectedChildren = {
   fieldChooserTexts: { isCollectionItem: false, optionName: "texts" },
   texts: { isCollectionItem: false, optionName: "texts" }
 };
-const DxFieldChooserTexts = createConfigurationComponent({
+
+const DxFieldChooserTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -223,9 +241,15 @@ const DxFieldChooserTexts = createConfigurationComponent({
     filterFields: String,
     rowFields: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFieldChooserTextsConfig);
+
+const DxFieldChooserTexts = defineComponent(DxFieldChooserTextsConfig);
+
 (DxFieldChooserTexts as any).$_optionName = "texts";
-const DxFieldPanel = createConfigurationComponent({
+
+const DxFieldPanelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -246,13 +270,19 @@ const DxFieldPanel = createConfigurationComponent({
     texts: Object,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFieldPanelConfig);
+
+const DxFieldPanel = defineComponent(DxFieldPanelConfig);
+
 (DxFieldPanel as any).$_optionName = "fieldPanel";
 (DxFieldPanel as any).$_expectedChildren = {
   fieldPanelTexts: { isCollectionItem: false, optionName: "texts" },
   texts: { isCollectionItem: false, optionName: "texts" }
 };
-const DxFieldPanelTexts = createConfigurationComponent({
+
+const DxFieldPanelTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -267,9 +297,15 @@ const DxFieldPanelTexts = createConfigurationComponent({
     filterFieldArea: String,
     rowFieldArea: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFieldPanelTextsConfig);
+
+const DxFieldPanelTexts = defineComponent(DxFieldPanelTextsConfig);
+
 (DxFieldPanelTexts as any).$_optionName = "texts";
-const DxHeaderFilter = createConfigurationComponent({
+
+const DxHeaderFilterConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -292,14 +328,20 @@ const DxHeaderFilter = createConfigurationComponent({
     texts: Object,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHeaderFilterConfig);
+
+const DxHeaderFilter = defineComponent(DxHeaderFilterConfig);
+
 (DxHeaderFilter as any).$_optionName = "headerFilter";
 (DxHeaderFilter as any).$_expectedChildren = {
   headerFilterTexts: { isCollectionItem: false, optionName: "texts" },
   search: { isCollectionItem: false, optionName: "search" },
   texts: { isCollectionItem: false, optionName: "texts" }
 };
-const DxHeaderFilterTexts = createConfigurationComponent({
+
+const DxHeaderFilterTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -312,9 +354,15 @@ const DxHeaderFilterTexts = createConfigurationComponent({
     emptyValue: String,
     ok: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHeaderFilterTextsConfig);
+
+const DxHeaderFilterTexts = defineComponent(DxHeaderFilterTextsConfig);
+
 (DxHeaderFilterTexts as any).$_optionName = "texts";
-const DxLoadPanel = createConfigurationComponent({
+
+const DxLoadPanelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -339,9 +387,15 @@ const DxLoadPanel = createConfigurationComponent({
     text: String,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLoadPanelConfig);
+
+const DxLoadPanel = defineComponent(DxLoadPanelConfig);
+
 (DxLoadPanel as any).$_optionName = "loadPanel";
-const DxPivotGridTexts = createConfigurationComponent({
+
+const DxPivotGridTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -370,9 +424,15 @@ const DxPivotGridTexts = createConfigurationComponent({
     sortRowBySummary: String,
     total: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPivotGridTextsConfig);
+
+const DxPivotGridTexts = defineComponent(DxPivotGridTextsConfig);
+
 (DxPivotGridTexts as any).$_optionName = "texts";
-const DxScrolling = createConfigurationComponent({
+
+const DxScrollingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -383,9 +443,15 @@ const DxScrolling = createConfigurationComponent({
     mode: String,
     useNative: [Boolean, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxScrollingConfig);
+
+const DxScrolling = defineComponent(DxScrollingConfig);
+
 (DxScrolling as any).$_optionName = "scrolling";
-const DxSearch = createConfigurationComponent({
+
+const DxSearchConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -400,9 +466,15 @@ const DxSearch = createConfigurationComponent({
     mode: String,
     timeout: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSearchConfig);
+
+const DxSearch = defineComponent(DxSearchConfig);
+
 (DxSearch as any).$_optionName = "search";
-const DxStateStoring = createConfigurationComponent({
+
+const DxStateStoringConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -421,9 +493,15 @@ const DxStateStoring = createConfigurationComponent({
     storageKey: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxStateStoringConfig);
+
+const DxStateStoring = defineComponent(DxStateStoringConfig);
+
 (DxStateStoring as any).$_optionName = "stateStoring";
-const DxTexts = createConfigurationComponent({
+
+const DxTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -476,9 +554,15 @@ const DxTexts = createConfigurationComponent({
     sortRowBySummary: String,
     total: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTextsConfig);
+
+const DxTexts = defineComponent(DxTextsConfig);
+
 (DxTexts as any).$_optionName = "texts";
 
+
 export default DxPivotGrid;
 export {
   DxPivotGrid,
diff --git a/packages/devextreme-vue/src/polar-chart.ts b/packages/devextreme-vue/src/polar-chart.ts
index 169745af0127..a0be9c89ddb0 100644
--- a/packages/devextreme-vue/src/polar-chart.ts
+++ b/packages/devextreme-vue/src/polar-chart.ts
@@ -1,6 +1,6 @@
 import PolarChart, { Properties } from "devextreme/viz/polar_chart";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "adaptiveLayout" |
@@ -67,7 +67,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxPolarChart extends AccessibleOptions {
   readonly instance?: PolarChart;
 }
-const DxPolarChart = createComponent({
+
+const componentConfig = {
   props: {
     adaptiveLayout: Object,
     animation: [Boolean, Object],
@@ -222,9 +223,14 @@ const DxPolarChart = createComponent({
       valueAxis: { isCollectionItem: false, optionName: "valueAxis" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
 
-const DxAdaptiveLayout = createConfigurationComponent({
+const DxPolarChart = defineComponent(componentConfig);
+
+
+const DxAdaptiveLayoutConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -237,9 +243,15 @@ const DxAdaptiveLayout = createConfigurationComponent({
     keepLabels: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAdaptiveLayoutConfig);
+
+const DxAdaptiveLayout = defineComponent(DxAdaptiveLayoutConfig);
+
 (DxAdaptiveLayout as any).$_optionName = "adaptiveLayout";
-const DxAnimation = createConfigurationComponent({
+
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -254,9 +266,15 @@ const DxAnimation = createConfigurationComponent({
     enabled: Boolean,
     maxPointCountSupported: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
-const DxAnnotation = createConfigurationComponent({
+
+const DxAnnotationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -329,7 +347,12 @@ const DxAnnotation = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnnotationConfig);
+
+const DxAnnotation = defineComponent(DxAnnotationConfig);
+
 (DxAnnotation as any).$_optionName = "annotations";
 (DxAnnotation as any).$_isCollectionItem = true;
 (DxAnnotation as any).$_expectedChildren = {
@@ -339,7 +362,8 @@ const DxAnnotation = createConfigurationComponent({
   image: { isCollectionItem: false, optionName: "image" },
   shadow: { isCollectionItem: false, optionName: "shadow" }
 };
-const DxAnnotationBorder = createConfigurationComponent({
+
+const DxAnnotationBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -358,9 +382,15 @@ const DxAnnotationBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnnotationBorderConfig);
+
+const DxAnnotationBorder = defineComponent(DxAnnotationBorderConfig);
+
 (DxAnnotationBorder as any).$_optionName = "border";
-const DxArgumentAxis = createConfigurationComponent({
+
+const DxArgumentAxisConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -429,7 +459,12 @@ const DxArgumentAxis = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxArgumentAxisConfig);
+
+const DxArgumentAxis = defineComponent(DxArgumentAxisConfig);
+
 (DxArgumentAxis as any).$_optionName = "argumentAxis";
 (DxArgumentAxis as any).$_expectedChildren = {
   argumentAxisMinorTick: { isCollectionItem: false, optionName: "minorTick" },
@@ -447,7 +482,8 @@ const DxArgumentAxis = createConfigurationComponent({
   tick: { isCollectionItem: false, optionName: "tick" },
   tickInterval: { isCollectionItem: false, optionName: "tickInterval" }
 };
-const DxArgumentAxisMinorTick = createConfigurationComponent({
+
+const DxArgumentAxisMinorTickConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -466,9 +502,15 @@ const DxArgumentAxisMinorTick = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxArgumentAxisMinorTickConfig);
+
+const DxArgumentAxisMinorTick = defineComponent(DxArgumentAxisMinorTickConfig);
+
 (DxArgumentAxisMinorTick as any).$_optionName = "minorTick";
-const DxArgumentAxisTick = createConfigurationComponent({
+
+const DxArgumentAxisTickConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -487,9 +529,15 @@ const DxArgumentAxisTick = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxArgumentAxisTickConfig);
+
+const DxArgumentAxisTick = defineComponent(DxArgumentAxisTickConfig);
+
 (DxArgumentAxisTick as any).$_optionName = "tick";
-const DxArgumentFormat = createConfigurationComponent({
+
+const DxArgumentFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -508,9 +556,15 @@ const DxArgumentFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxArgumentFormatConfig);
+
+const DxArgumentFormat = defineComponent(DxArgumentFormatConfig);
+
 (DxArgumentFormat as any).$_optionName = "argumentFormat";
-const DxAxisLabel = createConfigurationComponent({
+
+const DxAxisLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -531,9 +585,15 @@ const DxAxisLabel = createConfigurationComponent({
     overlappingBehavior: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAxisLabelConfig);
+
+const DxAxisLabel = defineComponent(DxAxisLabelConfig);
+
 (DxAxisLabel as any).$_optionName = "label";
-const DxBorder = createConfigurationComponent({
+
+const DxBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -552,9 +612,15 @@ const DxBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBorderConfig);
+
+const DxBorder = defineComponent(DxBorderConfig);
+
 (DxBorder as any).$_optionName = "border";
-const DxColor = createConfigurationComponent({
+
+const DxColorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -565,9 +631,15 @@ const DxColor = createConfigurationComponent({
     base: String,
     fillId: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColorConfig);
+
+const DxColor = defineComponent(DxColorConfig);
+
 (DxColor as any).$_optionName = "color";
-const DxCommonAnnotationSettings = createConfigurationComponent({
+
+const DxCommonAnnotationSettingsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -638,9 +710,15 @@ const DxCommonAnnotationSettings = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonAnnotationSettingsConfig);
+
+const DxCommonAnnotationSettings = defineComponent(DxCommonAnnotationSettingsConfig);
+
 (DxCommonAnnotationSettings as any).$_optionName = "commonAnnotationSettings";
-const DxCommonAxisSettings = createConfigurationComponent({
+
+const DxCommonAxisSettingsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -677,7 +755,12 @@ const DxCommonAxisSettings = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonAxisSettingsConfig);
+
+const DxCommonAxisSettings = defineComponent(DxCommonAxisSettingsConfig);
+
 (DxCommonAxisSettings as any).$_optionName = "commonAxisSettings";
 (DxCommonAxisSettings as any).$_expectedChildren = {
   commonAxisSettingsLabel: { isCollectionItem: false, optionName: "label" },
@@ -687,7 +770,8 @@ const DxCommonAxisSettings = createConfigurationComponent({
   minorTick: { isCollectionItem: false, optionName: "minorTick" },
   tick: { isCollectionItem: false, optionName: "tick" }
 };
-const DxCommonAxisSettingsLabel = createConfigurationComponent({
+
+const DxCommonAxisSettingsLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -702,9 +786,15 @@ const DxCommonAxisSettingsLabel = createConfigurationComponent({
     overlappingBehavior: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonAxisSettingsLabelConfig);
+
+const DxCommonAxisSettingsLabel = defineComponent(DxCommonAxisSettingsLabelConfig);
+
 (DxCommonAxisSettingsLabel as any).$_optionName = "label";
-const DxCommonAxisSettingsMinorTick = createConfigurationComponent({
+
+const DxCommonAxisSettingsMinorTickConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -721,9 +811,15 @@ const DxCommonAxisSettingsMinorTick = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonAxisSettingsMinorTickConfig);
+
+const DxCommonAxisSettingsMinorTick = defineComponent(DxCommonAxisSettingsMinorTickConfig);
+
 (DxCommonAxisSettingsMinorTick as any).$_optionName = "minorTick";
-const DxCommonAxisSettingsTick = createConfigurationComponent({
+
+const DxCommonAxisSettingsTickConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -740,9 +836,15 @@ const DxCommonAxisSettingsTick = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonAxisSettingsTickConfig);
+
+const DxCommonAxisSettingsTick = defineComponent(DxCommonAxisSettingsTickConfig);
+
 (DxCommonAxisSettingsTick as any).$_optionName = "tick";
-const DxCommonSeriesSettings = createConfigurationComponent({
+
+const DxCommonSeriesSettingsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -809,7 +911,12 @@ const DxCommonSeriesSettings = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonSeriesSettingsConfig);
+
+const DxCommonSeriesSettings = defineComponent(DxCommonSeriesSettingsConfig);
+
 (DxCommonSeriesSettings as any).$_optionName = "commonSeriesSettings";
 (DxCommonSeriesSettings as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -824,7 +931,8 @@ const DxCommonSeriesSettings = createConfigurationComponent({
   seriesBorder: { isCollectionItem: false, optionName: "border" },
   valueErrorBar: { isCollectionItem: false, optionName: "valueErrorBar" }
 };
-const DxCommonSeriesSettingsHoverStyle = createConfigurationComponent({
+
+const DxCommonSeriesSettingsHoverStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -843,7 +951,12 @@ const DxCommonSeriesSettingsHoverStyle = createConfigurationComponent({
     highlight: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonSeriesSettingsHoverStyleConfig);
+
+const DxCommonSeriesSettingsHoverStyle = defineComponent(DxCommonSeriesSettingsHoverStyleConfig);
+
 (DxCommonSeriesSettingsHoverStyle as any).$_optionName = "hoverStyle";
 (DxCommonSeriesSettingsHoverStyle as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -851,7 +964,8 @@ const DxCommonSeriesSettingsHoverStyle = createConfigurationComponent({
   hatching: { isCollectionItem: false, optionName: "hatching" },
   seriesBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxCommonSeriesSettingsLabel = createConfigurationComponent({
+
+const DxCommonSeriesSettingsLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -882,7 +996,12 @@ const DxCommonSeriesSettingsLabel = createConfigurationComponent({
     showForZeroValues: Boolean,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonSeriesSettingsLabelConfig);
+
+const DxCommonSeriesSettingsLabel = defineComponent(DxCommonSeriesSettingsLabelConfig);
+
 (DxCommonSeriesSettingsLabel as any).$_optionName = "label";
 (DxCommonSeriesSettingsLabel as any).$_expectedChildren = {
   argumentFormat: { isCollectionItem: false, optionName: "argumentFormat" },
@@ -892,7 +1011,8 @@ const DxCommonSeriesSettingsLabel = createConfigurationComponent({
   format: { isCollectionItem: false, optionName: "format" },
   seriesBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxCommonSeriesSettingsSelectionStyle = createConfigurationComponent({
+
+const DxCommonSeriesSettingsSelectionStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -911,7 +1031,12 @@ const DxCommonSeriesSettingsSelectionStyle = createConfigurationComponent({
     highlight: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonSeriesSettingsSelectionStyleConfig);
+
+const DxCommonSeriesSettingsSelectionStyle = defineComponent(DxCommonSeriesSettingsSelectionStyleConfig);
+
 (DxCommonSeriesSettingsSelectionStyle as any).$_optionName = "selectionStyle";
 (DxCommonSeriesSettingsSelectionStyle as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -919,7 +1044,8 @@ const DxCommonSeriesSettingsSelectionStyle = createConfigurationComponent({
   hatching: { isCollectionItem: false, optionName: "hatching" },
   seriesBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxConnector = createConfigurationComponent({
+
+const DxConnectorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -932,9 +1058,15 @@ const DxConnector = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxConnectorConfig);
+
+const DxConnector = defineComponent(DxConnectorConfig);
+
 (DxConnector as any).$_optionName = "connector";
-const DxConstantLine = createConfigurationComponent({
+
+const DxConstantLineConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -955,10 +1087,16 @@ const DxConstantLine = createConfigurationComponent({
     value: [Date, Number, String],
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxConstantLineConfig);
+
+const DxConstantLine = defineComponent(DxConstantLineConfig);
+
 (DxConstantLine as any).$_optionName = "constantLines";
 (DxConstantLine as any).$_isCollectionItem = true;
-const DxConstantLineLabel = createConfigurationComponent({
+
+const DxConstantLineLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -971,9 +1109,15 @@ const DxConstantLineLabel = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxConstantLineLabelConfig);
+
+const DxConstantLineLabel = defineComponent(DxConstantLineLabelConfig);
+
 (DxConstantLineLabel as any).$_optionName = "label";
-const DxConstantLineStyle = createConfigurationComponent({
+
+const DxConstantLineStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -988,13 +1132,19 @@ const DxConstantLineStyle = createConfigurationComponent({
     label: Object,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxConstantLineStyleConfig);
+
+const DxConstantLineStyle = defineComponent(DxConstantLineStyleConfig);
+
 (DxConstantLineStyle as any).$_optionName = "constantLineStyle";
 (DxConstantLineStyle as any).$_expectedChildren = {
   constantLineStyleLabel: { isCollectionItem: false, optionName: "label" },
   label: { isCollectionItem: false, optionName: "label" }
 };
-const DxConstantLineStyleLabel = createConfigurationComponent({
+
+const DxConstantLineStyleLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1005,9 +1155,15 @@ const DxConstantLineStyleLabel = createConfigurationComponent({
     font: Object,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxConstantLineStyleLabelConfig);
+
+const DxConstantLineStyleLabel = defineComponent(DxConstantLineStyleLabelConfig);
+
 (DxConstantLineStyleLabel as any).$_optionName = "label";
-const DxDataPrepareSettings = createConfigurationComponent({
+
+const DxDataPrepareSettingsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1020,9 +1176,15 @@ const DxDataPrepareSettings = createConfigurationComponent({
     convertToAxisDataType: Boolean,
     sortingMethod: [Boolean, Function]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDataPrepareSettingsConfig);
+
+const DxDataPrepareSettings = defineComponent(DxDataPrepareSettingsConfig);
+
 (DxDataPrepareSettings as any).$_optionName = "dataPrepareSettings";
-const DxExport = createConfigurationComponent({
+
+const DxExportConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1043,9 +1205,15 @@ const DxExport = createConfigurationComponent({
     printingEnabled: Boolean,
     svgToCanvas: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxExportConfig);
+
+const DxExport = defineComponent(DxExportConfig);
+
 (DxExport as any).$_optionName = "export";
-const DxFont = createConfigurationComponent({
+
+const DxFontConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1062,9 +1230,15 @@ const DxFont = createConfigurationComponent({
     size: [Number, String],
     weight: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFontConfig);
+
+const DxFont = defineComponent(DxFontConfig);
+
 (DxFont as any).$_optionName = "font";
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1083,9 +1257,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxGrid = createConfigurationComponent({
+
+const DxGridConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1100,9 +1280,15 @@ const DxGrid = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGridConfig);
+
+const DxGrid = defineComponent(DxGridConfig);
+
 (DxGrid as any).$_optionName = "grid";
-const DxHatching = createConfigurationComponent({
+
+const DxHatchingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1117,9 +1303,15 @@ const DxHatching = createConfigurationComponent({
     step: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHatchingConfig);
+
+const DxHatching = defineComponent(DxHatchingConfig);
+
 (DxHatching as any).$_optionName = "hatching";
-const DxHoverStyle = createConfigurationComponent({
+
+const DxHoverStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1140,9 +1332,15 @@ const DxHoverStyle = createConfigurationComponent({
     size: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHoverStyleConfig);
+
+const DxHoverStyle = defineComponent(DxHoverStyleConfig);
+
 (DxHoverStyle as any).$_optionName = "hoverStyle";
-const DxImage = createConfigurationComponent({
+
+const DxImageConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1155,9 +1353,15 @@ const DxImage = createConfigurationComponent({
     url: String,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxImageConfig);
+
+const DxImage = defineComponent(DxImageConfig);
+
 (DxImage as any).$_optionName = "image";
-const DxLabel = createConfigurationComponent({
+
+const DxLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1196,9 +1400,15 @@ const DxLabel = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelConfig);
+
+const DxLabel = defineComponent(DxLabelConfig);
+
 (DxLabel as any).$_optionName = "label";
-const DxLegend = createConfigurationComponent({
+
+const DxLegendConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1251,7 +1461,12 @@ const DxLegend = createConfigurationComponent({
     verticalAlignment: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendConfig);
+
+const DxLegend = defineComponent(DxLegendConfig);
+
 (DxLegend as any).$_optionName = "legend";
 (DxLegend as any).$_expectedChildren = {
   annotationBorder: { isCollectionItem: false, optionName: "border" },
@@ -1261,7 +1476,8 @@ const DxLegend = createConfigurationComponent({
   margin: { isCollectionItem: false, optionName: "margin" },
   title: { isCollectionItem: false, optionName: "title" }
 };
-const DxLegendTitle = createConfigurationComponent({
+
+const DxLegendTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1282,7 +1498,12 @@ const DxLegendTitle = createConfigurationComponent({
     text: String,
     verticalAlignment: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendTitleConfig);
+
+const DxLegendTitle = defineComponent(DxLegendTitleConfig);
+
 (DxLegendTitle as any).$_optionName = "title";
 (DxLegendTitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
@@ -1290,7 +1511,8 @@ const DxLegendTitle = createConfigurationComponent({
   margin: { isCollectionItem: false, optionName: "margin" },
   subtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxLegendTitleSubtitle = createConfigurationComponent({
+
+const DxLegendTitleSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1303,12 +1525,18 @@ const DxLegendTitleSubtitle = createConfigurationComponent({
     offset: Number,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendTitleSubtitleConfig);
+
+const DxLegendTitleSubtitle = defineComponent(DxLegendTitleSubtitleConfig);
+
 (DxLegendTitleSubtitle as any).$_optionName = "subtitle";
 (DxLegendTitleSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxLength = createConfigurationComponent({
+
+const DxLengthConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1333,9 +1561,15 @@ const DxLength = createConfigurationComponent({
     weeks: Number,
     years: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLengthConfig);
+
+const DxLength = defineComponent(DxLengthConfig);
+
 (DxLength as any).$_optionName = "length";
-const DxLoadingIndicator = createConfigurationComponent({
+
+const DxLoadingIndicatorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1352,12 +1586,18 @@ const DxLoadingIndicator = createConfigurationComponent({
     show: Boolean,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLoadingIndicatorConfig);
+
+const DxLoadingIndicator = defineComponent(DxLoadingIndicatorConfig);
+
 (DxLoadingIndicator as any).$_optionName = "loadingIndicator";
 (DxLoadingIndicator as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxMargin = createConfigurationComponent({
+
+const DxMarginConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1372,9 +1612,15 @@ const DxMargin = createConfigurationComponent({
     right: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMarginConfig);
+
+const DxMargin = defineComponent(DxMarginConfig);
+
 (DxMargin as any).$_optionName = "margin";
-const DxMinorGrid = createConfigurationComponent({
+
+const DxMinorGridConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1389,9 +1635,15 @@ const DxMinorGrid = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMinorGridConfig);
+
+const DxMinorGrid = defineComponent(DxMinorGridConfig);
+
 (DxMinorGrid as any).$_optionName = "minorGrid";
-const DxMinorTick = createConfigurationComponent({
+
+const DxMinorTickConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1410,9 +1662,15 @@ const DxMinorTick = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMinorTickConfig);
+
+const DxMinorTick = defineComponent(DxMinorTickConfig);
+
 (DxMinorTick as any).$_optionName = "minorTick";
-const DxMinorTickInterval = createConfigurationComponent({
+
+const DxMinorTickIntervalConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1437,9 +1695,15 @@ const DxMinorTickInterval = createConfigurationComponent({
     weeks: Number,
     years: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMinorTickIntervalConfig);
+
+const DxMinorTickInterval = defineComponent(DxMinorTickIntervalConfig);
+
 (DxMinorTickInterval as any).$_optionName = "minorTickInterval";
-const DxMinVisualRangeLength = createConfigurationComponent({
+
+const DxMinVisualRangeLengthConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1464,9 +1728,15 @@ const DxMinVisualRangeLength = createConfigurationComponent({
     weeks: Number,
     years: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMinVisualRangeLengthConfig);
+
+const DxMinVisualRangeLength = defineComponent(DxMinVisualRangeLengthConfig);
+
 (DxMinVisualRangeLength as any).$_optionName = "minVisualRangeLength";
-const DxPoint = createConfigurationComponent({
+
+const DxPointConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1493,7 +1763,12 @@ const DxPoint = createConfigurationComponent({
     symbol: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPointConfig);
+
+const DxPoint = defineComponent(DxPointConfig);
+
 (DxPoint as any).$_optionName = "point";
 (DxPoint as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -1505,7 +1780,8 @@ const DxPoint = createConfigurationComponent({
   pointSelectionStyle: { isCollectionItem: false, optionName: "selectionStyle" },
   selectionStyle: { isCollectionItem: false, optionName: "selectionStyle" }
 };
-const DxPointBorder = createConfigurationComponent({
+
+const DxPointBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1518,9 +1794,15 @@ const DxPointBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPointBorderConfig);
+
+const DxPointBorder = defineComponent(DxPointBorderConfig);
+
 (DxPointBorder as any).$_optionName = "border";
-const DxPointHoverStyle = createConfigurationComponent({
+
+const DxPointHoverStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1533,14 +1815,20 @@ const DxPointHoverStyle = createConfigurationComponent({
     color: [Object, String],
     size: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPointHoverStyleConfig);
+
+const DxPointHoverStyle = defineComponent(DxPointHoverStyleConfig);
+
 (DxPointHoverStyle as any).$_optionName = "hoverStyle";
 (DxPointHoverStyle as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
   color: { isCollectionItem: false, optionName: "color" },
   pointBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxPointSelectionStyle = createConfigurationComponent({
+
+const DxPointSelectionStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1553,14 +1841,20 @@ const DxPointSelectionStyle = createConfigurationComponent({
     color: [Object, String],
     size: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPointSelectionStyleConfig);
+
+const DxPointSelectionStyle = defineComponent(DxPointSelectionStyleConfig);
+
 (DxPointSelectionStyle as any).$_optionName = "selectionStyle";
 (DxPointSelectionStyle as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
   color: { isCollectionItem: false, optionName: "color" },
   pointBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxPolarChartTitle = createConfigurationComponent({
+
+const DxPolarChartTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1585,7 +1879,12 @@ const DxPolarChartTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPolarChartTitleConfig);
+
+const DxPolarChartTitle = defineComponent(DxPolarChartTitleConfig);
+
 (DxPolarChartTitle as any).$_optionName = "title";
 (DxPolarChartTitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
@@ -1593,7 +1892,8 @@ const DxPolarChartTitle = createConfigurationComponent({
   polarChartTitleSubtitle: { isCollectionItem: false, optionName: "subtitle" },
   subtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxPolarChartTitleSubtitle = createConfigurationComponent({
+
+const DxPolarChartTitleSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1610,12 +1910,18 @@ const DxPolarChartTitleSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPolarChartTitleSubtitleConfig);
+
+const DxPolarChartTitleSubtitle = defineComponent(DxPolarChartTitleSubtitleConfig);
+
 (DxPolarChartTitleSubtitle as any).$_optionName = "subtitle";
 (DxPolarChartTitleSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxSelectionStyle = createConfigurationComponent({
+
+const DxSelectionStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1636,9 +1942,15 @@ const DxSelectionStyle = createConfigurationComponent({
     size: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSelectionStyleConfig);
+
+const DxSelectionStyle = defineComponent(DxSelectionStyleConfig);
+
 (DxSelectionStyle as any).$_optionName = "selectionStyle";
-const DxSeries = createConfigurationComponent({
+
+const DxSeriesConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1699,10 +2011,16 @@ const DxSeries = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSeriesConfig);
+
+const DxSeries = defineComponent(DxSeriesConfig);
+
 (DxSeries as any).$_optionName = "series";
 (DxSeries as any).$_isCollectionItem = true;
-const DxSeriesBorder = createConfigurationComponent({
+
+const DxSeriesBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1717,9 +2035,15 @@ const DxSeriesBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSeriesBorderConfig);
+
+const DxSeriesBorder = defineComponent(DxSeriesBorderConfig);
+
 (DxSeriesBorder as any).$_optionName = "border";
-const DxSeriesTemplate = createConfigurationComponent({
+
+const DxSeriesTemplateConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1730,9 +2054,15 @@ const DxSeriesTemplate = createConfigurationComponent({
     customizeSeries: Function,
     nameField: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSeriesTemplateConfig);
+
+const DxSeriesTemplate = defineComponent(DxSeriesTemplateConfig);
+
 (DxSeriesTemplate as any).$_optionName = "seriesTemplate";
-const DxShadow = createConfigurationComponent({
+
+const DxShadowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1749,9 +2079,15 @@ const DxShadow = createConfigurationComponent({
     offsetY: Number,
     opacity: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShadowConfig);
+
+const DxShadow = defineComponent(DxShadowConfig);
+
 (DxShadow as any).$_optionName = "shadow";
-const DxSize = createConfigurationComponent({
+
+const DxSizeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1762,9 +2098,15 @@ const DxSize = createConfigurationComponent({
     height: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSizeConfig);
+
+const DxSize = defineComponent(DxSizeConfig);
+
 (DxSize as any).$_optionName = "size";
-const DxStrip = createConfigurationComponent({
+
+const DxStripConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1779,10 +2121,16 @@ const DxStrip = createConfigurationComponent({
     label: Object,
     startValue: [Date, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxStripConfig);
+
+const DxStrip = defineComponent(DxStripConfig);
+
 (DxStrip as any).$_optionName = "strips";
 (DxStrip as any).$_isCollectionItem = true;
-const DxStripLabel = createConfigurationComponent({
+
+const DxStripLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1793,9 +2141,15 @@ const DxStripLabel = createConfigurationComponent({
     font: Object,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxStripLabelConfig);
+
+const DxStripLabel = defineComponent(DxStripLabelConfig);
+
 (DxStripLabel as any).$_optionName = "label";
-const DxStripStyle = createConfigurationComponent({
+
+const DxStripStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1804,13 +2158,19 @@ const DxStripStyle = createConfigurationComponent({
   props: {
     label: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxStripStyleConfig);
+
+const DxStripStyle = defineComponent(DxStripStyleConfig);
+
 (DxStripStyle as any).$_optionName = "stripStyle";
 (DxStripStyle as any).$_expectedChildren = {
   label: { isCollectionItem: false, optionName: "label" },
   stripStyleLabel: { isCollectionItem: false, optionName: "label" }
 };
-const DxStripStyleLabel = createConfigurationComponent({
+
+const DxStripStyleLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1819,9 +2179,15 @@ const DxStripStyleLabel = createConfigurationComponent({
   props: {
     font: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxStripStyleLabelConfig);
+
+const DxStripStyleLabel = defineComponent(DxStripStyleLabelConfig);
+
 (DxStripStyleLabel as any).$_optionName = "label";
-const DxSubtitle = createConfigurationComponent({
+
+const DxSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1838,9 +2204,15 @@ const DxSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSubtitleConfig);
+
+const DxSubtitle = defineComponent(DxSubtitleConfig);
+
 (DxSubtitle as any).$_optionName = "subtitle";
-const DxTick = createConfigurationComponent({
+
+const DxTickConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1859,9 +2231,15 @@ const DxTick = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTickConfig);
+
+const DxTick = defineComponent(DxTickConfig);
+
 (DxTick as any).$_optionName = "tick";
-const DxTickInterval = createConfigurationComponent({
+
+const DxTickIntervalConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1886,9 +2264,15 @@ const DxTickInterval = createConfigurationComponent({
     weeks: Number,
     years: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTickIntervalConfig);
+
+const DxTickInterval = defineComponent(DxTickIntervalConfig);
+
 (DxTickInterval as any).$_optionName = "tickInterval";
-const DxTitle = createConfigurationComponent({
+
+const DxTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1913,9 +2297,15 @@ const DxTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTitleConfig);
+
+const DxTitle = defineComponent(DxTitleConfig);
+
 (DxTitle as any).$_optionName = "title";
-const DxTooltip = createConfigurationComponent({
+
+const DxTooltipConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1958,7 +2348,12 @@ const DxTooltip = createConfigurationComponent({
     shared: Boolean,
     zIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipConfig);
+
+const DxTooltip = defineComponent(DxTooltipConfig);
+
 (DxTooltip as any).$_optionName = "tooltip";
 (DxTooltip as any).$_expectedChildren = {
   argumentFormat: { isCollectionItem: false, optionName: "argumentFormat" },
@@ -1968,7 +2363,8 @@ const DxTooltip = createConfigurationComponent({
   shadow: { isCollectionItem: false, optionName: "shadow" },
   tooltipBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxTooltipBorder = createConfigurationComponent({
+
+const DxTooltipBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1985,9 +2381,15 @@ const DxTooltipBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipBorderConfig);
+
+const DxTooltipBorder = defineComponent(DxTooltipBorderConfig);
+
 (DxTooltipBorder as any).$_optionName = "border";
-const DxValueAxis = createConfigurationComponent({
+
+const DxValueAxisConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2062,7 +2464,12 @@ const DxValueAxis = createConfigurationComponent({
     wholeRange: [Array, Object],
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxValueAxisConfig);
+
+const DxValueAxis = defineComponent(DxValueAxisConfig);
+
 (DxValueAxis as any).$_optionName = "valueAxis";
 (DxValueAxis as any).$_expectedChildren = {
   axisLabel: { isCollectionItem: false, optionName: "label" },
@@ -2077,7 +2484,8 @@ const DxValueAxis = createConfigurationComponent({
   visualRange: { isCollectionItem: false, optionName: "visualRange" },
   wholeRange: { isCollectionItem: false, optionName: "wholeRange" }
 };
-const DxValueErrorBar = createConfigurationComponent({
+
+const DxValueErrorBarConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2102,9 +2510,15 @@ const DxValueErrorBar = createConfigurationComponent({
     type: String,
     value: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxValueErrorBarConfig);
+
+const DxValueErrorBar = defineComponent(DxValueErrorBarConfig);
+
 (DxValueErrorBar as any).$_optionName = "valueErrorBar";
-const DxVisualRange = createConfigurationComponent({
+
+const DxVisualRangeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2117,12 +2531,18 @@ const DxVisualRange = createConfigurationComponent({
     length: [Number, Object, String],
     startValue: [Date, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxVisualRangeConfig);
+
+const DxVisualRange = defineComponent(DxVisualRangeConfig);
+
 (DxVisualRange as any).$_optionName = "visualRange";
 (DxVisualRange as any).$_expectedChildren = {
   length: { isCollectionItem: false, optionName: "length" }
 };
-const DxWholeRange = createConfigurationComponent({
+
+const DxWholeRangeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2135,9 +2555,15 @@ const DxWholeRange = createConfigurationComponent({
     length: [Number, Object, String],
     startValue: [Date, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxWholeRangeConfig);
+
+const DxWholeRange = defineComponent(DxWholeRangeConfig);
+
 (DxWholeRange as any).$_optionName = "wholeRange";
 
+
 export default DxPolarChart;
 export {
   DxPolarChart,
diff --git a/packages/devextreme-vue/src/popover.ts b/packages/devextreme-vue/src/popover.ts
index 341856cb16d1..498c1094ed65 100644
--- a/packages/devextreme-vue/src/popover.ts
+++ b/packages/devextreme-vue/src/popover.ts
@@ -1,6 +1,6 @@
 import Popover, { Properties } from "devextreme/ui/popover";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "animation" |
@@ -48,7 +48,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxPopover extends AccessibleOptions {
   readonly instance?: Popover;
 }
-const DxPopover = createComponent({
+
+const componentConfig = {
   props: {
     animation: Object,
     closeOnOutsideClick: [Boolean, Function],
@@ -151,9 +152,14 @@ const DxPopover = createComponent({
       toolbarItem: { isCollectionItem: true, optionName: "toolbarItems" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxPopover = defineComponent(componentConfig);
+
 
-const DxAnimation = createConfigurationComponent({
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -164,13 +170,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -181,9 +193,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -194,9 +212,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -207,9 +231,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -226,12 +256,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -258,13 +294,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxHideEvent = createConfigurationComponent({
+
+const DxHideEventConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -275,9 +317,15 @@ const DxHideEvent = createConfigurationComponent({
     delay: Number,
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideEventConfig);
+
+const DxHideEvent = defineComponent(DxHideEventConfig);
+
 (DxHideEvent as any).$_optionName = "hideEvent";
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -288,9 +336,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -301,9 +355,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -324,9 +384,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -353,9 +419,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxShowEvent = createConfigurationComponent({
+
+const DxShowEventConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -366,9 +438,15 @@ const DxShowEvent = createConfigurationComponent({
     delay: Number,
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowEventConfig);
+
+const DxShowEvent = defineComponent(DxShowEventConfig);
+
 (DxShowEvent as any).$_optionName = "showEvent";
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -385,9 +463,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
-const DxToolbarItem = createConfigurationComponent({
+
+const DxToolbarItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -420,10 +504,16 @@ const DxToolbarItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarItemConfig);
+
+const DxToolbarItem = defineComponent(DxToolbarItemConfig);
+
 (DxToolbarItem as any).$_optionName = "toolbarItems";
 (DxToolbarItem as any).$_isCollectionItem = true;
 
+
 export default DxPopover;
 export {
   DxPopover,
diff --git a/packages/devextreme-vue/src/popup.ts b/packages/devextreme-vue/src/popup.ts
index 1ecdfa16ed45..5682ad54170e 100644
--- a/packages/devextreme-vue/src/popup.ts
+++ b/packages/devextreme-vue/src/popup.ts
@@ -1,6 +1,6 @@
 import Popup, { Properties } from "devextreme/ui/popup";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -57,7 +57,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxPopup extends AccessibleOptions {
   readonly instance?: Popup;
 }
-const DxPopup = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     animation: Object,
@@ -176,9 +177,14 @@ const DxPopup = createComponent({
       toolbarItem: { isCollectionItem: true, optionName: "toolbarItems" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxPopup = defineComponent(componentConfig);
+
 
-const DxAnimation = createConfigurationComponent({
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -189,13 +195,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -206,9 +218,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -219,9 +237,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -232,9 +256,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -251,12 +281,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -283,13 +319,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -300,9 +342,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -313,9 +361,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -336,9 +390,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -365,9 +425,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -384,9 +450,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
-const DxToolbarItem = createConfigurationComponent({
+
+const DxToolbarItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -419,10 +491,16 @@ const DxToolbarItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarItemConfig);
+
+const DxToolbarItem = defineComponent(DxToolbarItemConfig);
+
 (DxToolbarItem as any).$_optionName = "toolbarItems";
 (DxToolbarItem as any).$_isCollectionItem = true;
 
+
 export default DxPopup;
 export {
   DxPopup,
diff --git a/packages/devextreme-vue/src/progress-bar.ts b/packages/devextreme-vue/src/progress-bar.ts
index 8e19d30344c8..c89b6f197f04 100644
--- a/packages/devextreme-vue/src/progress-bar.ts
+++ b/packages/devextreme-vue/src/progress-bar.ts
@@ -1,5 +1,6 @@
 import ProgressBar, { Properties } from "devextreme/ui/progress_bar";
-import { createComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "disabled" |
@@ -34,7 +35,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxProgressBar extends AccessibleOptions {
   readonly instance?: ProgressBar;
 }
-const DxProgressBar = createComponent({
+
+const componentConfig = {
   props: {
     disabled: Boolean,
     elementAttr: Object,
@@ -104,7 +106,11 @@ const DxProgressBar = createComponent({
     (this as any).$_WidgetClass = ProgressBar;
     (this as any).$_hasAsyncTemplate = true;
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxProgressBar = defineComponent(componentConfig);
 
 export default DxProgressBar;
 export {
diff --git a/packages/devextreme-vue/src/radio-group.ts b/packages/devextreme-vue/src/radio-group.ts
index 61b6bd6cf712..81d80a77553f 100644
--- a/packages/devextreme-vue/src/radio-group.ts
+++ b/packages/devextreme-vue/src/radio-group.ts
@@ -1,6 +1,6 @@
 import RadioGroup, { Properties } from "devextreme/ui/radio_group";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -41,7 +41,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxRadioGroup extends AccessibleOptions {
   readonly instance?: RadioGroup;
 }
-const DxRadioGroup = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -127,9 +128,14 @@ const DxRadioGroup = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxRadioGroup = defineComponent(componentConfig);
+
 
-const DxItem = createConfigurationComponent({
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -146,10 +152,16 @@ const DxItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
 
+
 export default DxRadioGroup;
 export {
   DxRadioGroup,
diff --git a/packages/devextreme-vue/src/range-selector.ts b/packages/devextreme-vue/src/range-selector.ts
index 10ee5cf1aa46..d99607b6da54 100644
--- a/packages/devextreme-vue/src/range-selector.ts
+++ b/packages/devextreme-vue/src/range-selector.ts
@@ -1,6 +1,6 @@
 import RangeSelector, { Properties } from "devextreme/viz/range_selector";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "background" |
@@ -42,7 +42,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxRangeSelector extends AccessibleOptions {
   readonly instance?: RangeSelector;
 }
-const DxRangeSelector = createComponent({
+
+const componentConfig = {
   props: {
     background: Object,
     behavior: Object,
@@ -142,9 +143,14 @@ const DxRangeSelector = createComponent({
       value: { isCollectionItem: false, optionName: "value" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxRangeSelector = defineComponent(componentConfig);
+
 
-const DxAggregation = createConfigurationComponent({
+const DxAggregationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -157,9 +163,15 @@ const DxAggregation = createConfigurationComponent({
     enabled: Boolean,
     method: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAggregationConfig);
+
+const DxAggregation = defineComponent(DxAggregationConfig);
+
 (DxAggregation as any).$_optionName = "aggregation";
-const DxAggregationInterval = createConfigurationComponent({
+
+const DxAggregationIntervalConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -184,9 +196,15 @@ const DxAggregationInterval = createConfigurationComponent({
     weeks: Number,
     years: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAggregationIntervalConfig);
+
+const DxAggregationInterval = defineComponent(DxAggregationIntervalConfig);
+
 (DxAggregationInterval as any).$_optionName = "aggregationInterval";
-const DxArgumentFormat = createConfigurationComponent({
+
+const DxArgumentFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -205,9 +223,15 @@ const DxArgumentFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxArgumentFormatConfig);
+
+const DxArgumentFormat = defineComponent(DxArgumentFormatConfig);
+
 (DxArgumentFormat as any).$_optionName = "argumentFormat";
-const DxBackground = createConfigurationComponent({
+
+const DxBackgroundConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -220,13 +244,19 @@ const DxBackground = createConfigurationComponent({
     image: Object,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBackgroundConfig);
+
+const DxBackground = defineComponent(DxBackgroundConfig);
+
 (DxBackground as any).$_optionName = "background";
 (DxBackground as any).$_expectedChildren = {
   backgroundImage: { isCollectionItem: false, optionName: "image" },
   image: { isCollectionItem: false, optionName: "image" }
 };
-const DxBackgroundImage = createConfigurationComponent({
+
+const DxBackgroundImageConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -237,9 +267,15 @@ const DxBackgroundImage = createConfigurationComponent({
     location: String,
     url: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBackgroundImageConfig);
+
+const DxBackgroundImage = defineComponent(DxBackgroundImageConfig);
+
 (DxBackgroundImage as any).$_optionName = "image";
-const DxBehavior = createConfigurationComponent({
+
+const DxBehaviorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -260,9 +296,15 @@ const DxBehavior = createConfigurationComponent({
     snapToTicks: Boolean,
     valueChangeMode: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBehaviorConfig);
+
+const DxBehavior = defineComponent(DxBehaviorConfig);
+
 (DxBehavior as any).$_optionName = "behavior";
-const DxBorder = createConfigurationComponent({
+
+const DxBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -277,9 +319,15 @@ const DxBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBorderConfig);
+
+const DxBorder = defineComponent(DxBorderConfig);
+
 (DxBorder as any).$_optionName = "border";
-const DxBreak = createConfigurationComponent({
+
+const DxBreakConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -290,10 +338,16 @@ const DxBreak = createConfigurationComponent({
     endValue: [Date, Number, String],
     startValue: [Date, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBreakConfig);
+
+const DxBreak = defineComponent(DxBreakConfig);
+
 (DxBreak as any).$_optionName = "breaks";
 (DxBreak as any).$_isCollectionItem = true;
-const DxBreakStyle = createConfigurationComponent({
+
+const DxBreakStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -306,9 +360,15 @@ const DxBreakStyle = createConfigurationComponent({
     line: String,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBreakStyleConfig);
+
+const DxBreakStyle = defineComponent(DxBreakStyleConfig);
+
 (DxBreakStyle as any).$_optionName = "breakStyle";
-const DxChart = createConfigurationComponent({
+
+const DxChartConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -343,7 +403,12 @@ const DxChart = createConfigurationComponent({
     topIndent: Number,
     valueAxis: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxChartConfig);
+
+const DxChart = defineComponent(DxChartConfig);
+
 (DxChart as any).$_optionName = "chart";
 (DxChart as any).$_expectedChildren = {
   commonSeriesSettings: { isCollectionItem: false, optionName: "commonSeriesSettings" },
@@ -352,7 +417,8 @@ const DxChart = createConfigurationComponent({
   seriesTemplate: { isCollectionItem: false, optionName: "seriesTemplate" },
   valueAxis: { isCollectionItem: false, optionName: "valueAxis" }
 };
-const DxColor = createConfigurationComponent({
+
+const DxColorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -363,9 +429,15 @@ const DxColor = createConfigurationComponent({
     base: String,
     fillId: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColorConfig);
+
+const DxColor = defineComponent(DxColorConfig);
+
 (DxColor as any).$_optionName = "color";
-const DxCommonSeriesSettings = createConfigurationComponent({
+
+const DxCommonSeriesSettingsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -494,7 +566,12 @@ const DxCommonSeriesSettings = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonSeriesSettingsConfig);
+
+const DxCommonSeriesSettings = defineComponent(DxCommonSeriesSettingsConfig);
+
 (DxCommonSeriesSettings as any).$_optionName = "commonSeriesSettings";
 (DxCommonSeriesSettings as any).$_expectedChildren = {
   aggregation: { isCollectionItem: false, optionName: "aggregation" },
@@ -511,7 +588,8 @@ const DxCommonSeriesSettings = createConfigurationComponent({
   seriesBorder: { isCollectionItem: false, optionName: "border" },
   valueErrorBar: { isCollectionItem: false, optionName: "valueErrorBar" }
 };
-const DxCommonSeriesSettingsHoverStyle = createConfigurationComponent({
+
+const DxCommonSeriesSettingsHoverStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -530,7 +608,12 @@ const DxCommonSeriesSettingsHoverStyle = createConfigurationComponent({
     highlight: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonSeriesSettingsHoverStyleConfig);
+
+const DxCommonSeriesSettingsHoverStyle = defineComponent(DxCommonSeriesSettingsHoverStyleConfig);
+
 (DxCommonSeriesSettingsHoverStyle as any).$_optionName = "hoverStyle";
 (DxCommonSeriesSettingsHoverStyle as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -538,7 +621,8 @@ const DxCommonSeriesSettingsHoverStyle = createConfigurationComponent({
   hatching: { isCollectionItem: false, optionName: "hatching" },
   seriesBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxCommonSeriesSettingsLabel = createConfigurationComponent({
+
+const DxCommonSeriesSettingsLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -575,7 +659,12 @@ const DxCommonSeriesSettingsLabel = createConfigurationComponent({
     verticalOffset: Number,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonSeriesSettingsLabelConfig);
+
+const DxCommonSeriesSettingsLabel = defineComponent(DxCommonSeriesSettingsLabelConfig);
+
 (DxCommonSeriesSettingsLabel as any).$_optionName = "label";
 (DxCommonSeriesSettingsLabel as any).$_expectedChildren = {
   argumentFormat: { isCollectionItem: false, optionName: "argumentFormat" },
@@ -585,7 +674,8 @@ const DxCommonSeriesSettingsLabel = createConfigurationComponent({
   format: { isCollectionItem: false, optionName: "format" },
   seriesBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxCommonSeriesSettingsSelectionStyle = createConfigurationComponent({
+
+const DxCommonSeriesSettingsSelectionStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -604,7 +694,12 @@ const DxCommonSeriesSettingsSelectionStyle = createConfigurationComponent({
     highlight: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonSeriesSettingsSelectionStyleConfig);
+
+const DxCommonSeriesSettingsSelectionStyle = defineComponent(DxCommonSeriesSettingsSelectionStyleConfig);
+
 (DxCommonSeriesSettingsSelectionStyle as any).$_optionName = "selectionStyle";
 (DxCommonSeriesSettingsSelectionStyle as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -612,7 +707,8 @@ const DxCommonSeriesSettingsSelectionStyle = createConfigurationComponent({
   hatching: { isCollectionItem: false, optionName: "hatching" },
   seriesBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxConnector = createConfigurationComponent({
+
+const DxConnectorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -625,9 +721,15 @@ const DxConnector = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxConnectorConfig);
+
+const DxConnector = defineComponent(DxConnectorConfig);
+
 (DxConnector as any).$_optionName = "connector";
-const DxDataPrepareSettings = createConfigurationComponent({
+
+const DxDataPrepareSettingsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -640,9 +742,15 @@ const DxDataPrepareSettings = createConfigurationComponent({
     convertToAxisDataType: Boolean,
     sortingMethod: [Boolean, Function]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDataPrepareSettingsConfig);
+
+const DxDataPrepareSettings = defineComponent(DxDataPrepareSettingsConfig);
+
 (DxDataPrepareSettings as any).$_optionName = "dataPrepareSettings";
-const DxExport = createConfigurationComponent({
+
+const DxExportConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -663,9 +771,15 @@ const DxExport = createConfigurationComponent({
     printingEnabled: Boolean,
     svgToCanvas: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxExportConfig);
+
+const DxExport = defineComponent(DxExportConfig);
+
 (DxExport as any).$_optionName = "export";
-const DxFont = createConfigurationComponent({
+
+const DxFontConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -682,9 +796,15 @@ const DxFont = createConfigurationComponent({
     size: [Number, String],
     weight: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFontConfig);
+
+const DxFont = defineComponent(DxFontConfig);
+
 (DxFont as any).$_optionName = "font";
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -703,9 +823,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxHatching = createConfigurationComponent({
+
+const DxHatchingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -720,9 +846,15 @@ const DxHatching = createConfigurationComponent({
     step: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHatchingConfig);
+
+const DxHatching = defineComponent(DxHatchingConfig);
+
 (DxHatching as any).$_optionName = "hatching";
-const DxHeight = createConfigurationComponent({
+
+const DxHeightConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -733,9 +865,15 @@ const DxHeight = createConfigurationComponent({
     rangeMaxPoint: Number,
     rangeMinPoint: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHeightConfig);
+
+const DxHeight = defineComponent(DxHeightConfig);
+
 (DxHeight as any).$_optionName = "height";
-const DxHoverStyle = createConfigurationComponent({
+
+const DxHoverStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -756,9 +894,15 @@ const DxHoverStyle = createConfigurationComponent({
     size: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHoverStyleConfig);
+
+const DxHoverStyle = defineComponent(DxHoverStyleConfig);
+
 (DxHoverStyle as any).$_optionName = "hoverStyle";
-const DxImage = createConfigurationComponent({
+
+const DxImageConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -773,9 +917,15 @@ const DxImage = createConfigurationComponent({
     url: [String, Object],
     width: [Number, Object]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxImageConfig);
+
+const DxImage = defineComponent(DxImageConfig);
+
 (DxImage as any).$_optionName = "image";
-const DxIndent = createConfigurationComponent({
+
+const DxIndentConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -786,9 +936,15 @@ const DxIndent = createConfigurationComponent({
     left: Number,
     right: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxIndentConfig);
+
+const DxIndent = defineComponent(DxIndentConfig);
+
 (DxIndent as any).$_optionName = "indent";
-const DxLabel = createConfigurationComponent({
+
+const DxLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -829,9 +985,15 @@ const DxLabel = createConfigurationComponent({
     verticalOffset: Number,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelConfig);
+
+const DxLabel = defineComponent(DxLabelConfig);
+
 (DxLabel as any).$_optionName = "label";
-const DxLength = createConfigurationComponent({
+
+const DxLengthConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -856,9 +1018,15 @@ const DxLength = createConfigurationComponent({
     weeks: Number,
     years: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLengthConfig);
+
+const DxLength = defineComponent(DxLengthConfig);
+
 (DxLength as any).$_optionName = "length";
-const DxLoadingIndicator = createConfigurationComponent({
+
+const DxLoadingIndicatorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -875,12 +1043,18 @@ const DxLoadingIndicator = createConfigurationComponent({
     show: Boolean,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLoadingIndicatorConfig);
+
+const DxLoadingIndicator = defineComponent(DxLoadingIndicatorConfig);
+
 (DxLoadingIndicator as any).$_optionName = "loadingIndicator";
 (DxLoadingIndicator as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxMargin = createConfigurationComponent({
+
+const DxMarginConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -895,9 +1069,15 @@ const DxMargin = createConfigurationComponent({
     right: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMarginConfig);
+
+const DxMargin = defineComponent(DxMarginConfig);
+
 (DxMargin as any).$_optionName = "margin";
-const DxMarker = createConfigurationComponent({
+
+const DxMarkerConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -916,13 +1096,19 @@ const DxMarker = createConfigurationComponent({
     topIndent: Number,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMarkerConfig);
+
+const DxMarker = defineComponent(DxMarkerConfig);
+
 (DxMarker as any).$_optionName = "marker";
 (DxMarker as any).$_expectedChildren = {
   label: { isCollectionItem: false, optionName: "label" },
   markerLabel: { isCollectionItem: false, optionName: "label" }
 };
-const DxMarkerLabel = createConfigurationComponent({
+
+const DxMarkerLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -933,12 +1119,18 @@ const DxMarkerLabel = createConfigurationComponent({
     customizeText: Function,
     format: [Object, Function, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMarkerLabelConfig);
+
+const DxMarkerLabel = defineComponent(DxMarkerLabelConfig);
+
 (DxMarkerLabel as any).$_optionName = "label";
 (DxMarkerLabel as any).$_expectedChildren = {
   format: { isCollectionItem: false, optionName: "format" }
 };
-const DxMaxRange = createConfigurationComponent({
+
+const DxMaxRangeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -963,9 +1155,15 @@ const DxMaxRange = createConfigurationComponent({
     weeks: Number,
     years: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMaxRangeConfig);
+
+const DxMaxRange = defineComponent(DxMaxRangeConfig);
+
 (DxMaxRange as any).$_optionName = "maxRange";
-const DxMinorTick = createConfigurationComponent({
+
+const DxMinorTickConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -980,9 +1178,15 @@ const DxMinorTick = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMinorTickConfig);
+
+const DxMinorTick = defineComponent(DxMinorTickConfig);
+
 (DxMinorTick as any).$_optionName = "minorTick";
-const DxMinorTickInterval = createConfigurationComponent({
+
+const DxMinorTickIntervalConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1007,9 +1211,15 @@ const DxMinorTickInterval = createConfigurationComponent({
     weeks: Number,
     years: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMinorTickIntervalConfig);
+
+const DxMinorTickInterval = defineComponent(DxMinorTickIntervalConfig);
+
 (DxMinorTickInterval as any).$_optionName = "minorTickInterval";
-const DxMinRange = createConfigurationComponent({
+
+const DxMinRangeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1034,9 +1244,15 @@ const DxMinRange = createConfigurationComponent({
     weeks: Number,
     years: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMinRangeConfig);
+
+const DxMinRange = defineComponent(DxMinRangeConfig);
+
 (DxMinRange as any).$_optionName = "minRange";
-const DxPoint = createConfigurationComponent({
+
+const DxPointConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1063,7 +1279,12 @@ const DxPoint = createConfigurationComponent({
     symbol: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPointConfig);
+
+const DxPoint = defineComponent(DxPointConfig);
+
 (DxPoint as any).$_optionName = "point";
 (DxPoint as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -1076,7 +1297,8 @@ const DxPoint = createConfigurationComponent({
   pointSelectionStyle: { isCollectionItem: false, optionName: "selectionStyle" },
   selectionStyle: { isCollectionItem: false, optionName: "selectionStyle" }
 };
-const DxPointBorder = createConfigurationComponent({
+
+const DxPointBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1089,9 +1311,15 @@ const DxPointBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPointBorderConfig);
+
+const DxPointBorder = defineComponent(DxPointBorderConfig);
+
 (DxPointBorder as any).$_optionName = "border";
-const DxPointHoverStyle = createConfigurationComponent({
+
+const DxPointHoverStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1104,14 +1332,20 @@ const DxPointHoverStyle = createConfigurationComponent({
     color: [Object, String],
     size: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPointHoverStyleConfig);
+
+const DxPointHoverStyle = defineComponent(DxPointHoverStyleConfig);
+
 (DxPointHoverStyle as any).$_optionName = "hoverStyle";
 (DxPointHoverStyle as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
   color: { isCollectionItem: false, optionName: "color" },
   pointBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxPointImage = createConfigurationComponent({
+
+const DxPointImageConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1124,14 +1358,20 @@ const DxPointImage = createConfigurationComponent({
     url: [Object, String],
     width: [Number, Object]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPointImageConfig);
+
+const DxPointImage = defineComponent(DxPointImageConfig);
+
 (DxPointImage as any).$_optionName = "image";
 (DxPointImage as any).$_expectedChildren = {
   height: { isCollectionItem: false, optionName: "height" },
   url: { isCollectionItem: false, optionName: "url" },
   width: { isCollectionItem: false, optionName: "width" }
 };
-const DxPointSelectionStyle = createConfigurationComponent({
+
+const DxPointSelectionStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1144,14 +1384,20 @@ const DxPointSelectionStyle = createConfigurationComponent({
     color: [Object, String],
     size: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPointSelectionStyleConfig);
+
+const DxPointSelectionStyle = defineComponent(DxPointSelectionStyleConfig);
+
 (DxPointSelectionStyle as any).$_optionName = "selectionStyle";
 (DxPointSelectionStyle as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
   color: { isCollectionItem: false, optionName: "color" },
   pointBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxReduction = createConfigurationComponent({
+
+const DxReductionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1162,9 +1408,15 @@ const DxReduction = createConfigurationComponent({
     color: String,
     level: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxReductionConfig);
+
+const DxReduction = defineComponent(DxReductionConfig);
+
 (DxReduction as any).$_optionName = "reduction";
-const DxScale = createConfigurationComponent({
+
+const DxScaleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1231,7 +1483,12 @@ const DxScale = createConfigurationComponent({
     workdaysOnly: Boolean,
     workWeek: Array
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxScaleConfig);
+
+const DxScale = defineComponent(DxScaleConfig);
+
 (DxScale as any).$_optionName = "scale";
 (DxScale as any).$_expectedChildren = {
   aggregationInterval: { isCollectionItem: false, optionName: "aggregationInterval" },
@@ -1247,7 +1504,8 @@ const DxScale = createConfigurationComponent({
   tick: { isCollectionItem: false, optionName: "tick" },
   tickInterval: { isCollectionItem: false, optionName: "tickInterval" }
 };
-const DxScaleLabel = createConfigurationComponent({
+
+const DxScaleLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1266,13 +1524,19 @@ const DxScaleLabel = createConfigurationComponent({
     topIndent: Number,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxScaleLabelConfig);
+
+const DxScaleLabel = defineComponent(DxScaleLabelConfig);
+
 (DxScaleLabel as any).$_optionName = "label";
 (DxScaleLabel as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
   format: { isCollectionItem: false, optionName: "format" }
 };
-const DxSelectionStyle = createConfigurationComponent({
+
+const DxSelectionStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1293,9 +1557,15 @@ const DxSelectionStyle = createConfigurationComponent({
     size: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSelectionStyleConfig);
+
+const DxSelectionStyle = defineComponent(DxSelectionStyleConfig);
+
 (DxSelectionStyle as any).$_optionName = "selectionStyle";
-const DxSeries = createConfigurationComponent({
+
+const DxSeriesConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1382,10 +1652,16 @@ const DxSeries = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSeriesConfig);
+
+const DxSeries = defineComponent(DxSeriesConfig);
+
 (DxSeries as any).$_optionName = "series";
 (DxSeries as any).$_isCollectionItem = true;
-const DxSeriesBorder = createConfigurationComponent({
+
+const DxSeriesBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1400,9 +1676,15 @@ const DxSeriesBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSeriesBorderConfig);
+
+const DxSeriesBorder = defineComponent(DxSeriesBorderConfig);
+
 (DxSeriesBorder as any).$_optionName = "border";
-const DxSeriesTemplate = createConfigurationComponent({
+
+const DxSeriesTemplateConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1413,9 +1695,15 @@ const DxSeriesTemplate = createConfigurationComponent({
     customizeSeries: Function,
     nameField: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSeriesTemplateConfig);
+
+const DxSeriesTemplate = defineComponent(DxSeriesTemplateConfig);
+
 (DxSeriesTemplate as any).$_optionName = "seriesTemplate";
-const DxShutter = createConfigurationComponent({
+
+const DxShutterConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1426,9 +1714,15 @@ const DxShutter = createConfigurationComponent({
     color: String,
     opacity: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShutterConfig);
+
+const DxShutter = defineComponent(DxShutterConfig);
+
 (DxShutter as any).$_optionName = "shutter";
-const DxSize = createConfigurationComponent({
+
+const DxSizeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1439,9 +1733,15 @@ const DxSize = createConfigurationComponent({
     height: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSizeConfig);
+
+const DxSize = defineComponent(DxSizeConfig);
+
 (DxSize as any).$_optionName = "size";
-const DxSliderHandle = createConfigurationComponent({
+
+const DxSliderHandleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1454,9 +1754,15 @@ const DxSliderHandle = createConfigurationComponent({
     opacity: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSliderHandleConfig);
+
+const DxSliderHandle = defineComponent(DxSliderHandleConfig);
+
 (DxSliderHandle as any).$_optionName = "sliderHandle";
-const DxSliderMarker = createConfigurationComponent({
+
+const DxSliderMarkerConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1481,13 +1787,19 @@ const DxSliderMarker = createConfigurationComponent({
     placeholderHeight: Number,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSliderMarkerConfig);
+
+const DxSliderMarker = defineComponent(DxSliderMarkerConfig);
+
 (DxSliderMarker as any).$_optionName = "sliderMarker";
 (DxSliderMarker as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
   format: { isCollectionItem: false, optionName: "format" }
 };
-const DxSubtitle = createConfigurationComponent({
+
+const DxSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1504,12 +1816,18 @@ const DxSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSubtitleConfig);
+
+const DxSubtitle = defineComponent(DxSubtitleConfig);
+
 (DxSubtitle as any).$_optionName = "subtitle";
 (DxSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxTick = createConfigurationComponent({
+
+const DxTickConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1522,9 +1840,15 @@ const DxTick = createConfigurationComponent({
     opacity: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTickConfig);
+
+const DxTick = defineComponent(DxTickConfig);
+
 (DxTick as any).$_optionName = "tick";
-const DxTickInterval = createConfigurationComponent({
+
+const DxTickIntervalConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1549,9 +1873,15 @@ const DxTickInterval = createConfigurationComponent({
     weeks: Number,
     years: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTickIntervalConfig);
+
+const DxTickInterval = defineComponent(DxTickIntervalConfig);
+
 (DxTickInterval as any).$_optionName = "tickInterval";
-const DxTitle = createConfigurationComponent({
+
+const DxTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1576,14 +1906,20 @@ const DxTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTitleConfig);
+
+const DxTitle = defineComponent(DxTitleConfig);
+
 (DxTitle as any).$_optionName = "title";
 (DxTitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
   margin: { isCollectionItem: false, optionName: "margin" },
   subtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxUrl = createConfigurationComponent({
+
+const DxUrlConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1594,9 +1930,15 @@ const DxUrl = createConfigurationComponent({
     rangeMaxPoint: String,
     rangeMinPoint: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxUrlConfig);
+
+const DxUrl = defineComponent(DxUrlConfig);
+
 (DxUrl as any).$_optionName = "url";
-const DxValue = createConfigurationComponent({
+
+const DxValueConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1609,12 +1951,18 @@ const DxValue = createConfigurationComponent({
     length: [Number, Object, String],
     startValue: [Date, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxValueConfig);
+
+const DxValue = defineComponent(DxValueConfig);
+
 (DxValue as any).$_optionName = "value";
 (DxValue as any).$_expectedChildren = {
   length: { isCollectionItem: false, optionName: "length" }
 };
-const DxValueAxis = createConfigurationComponent({
+
+const DxValueAxisConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1633,9 +1981,15 @@ const DxValueAxis = createConfigurationComponent({
     type: String,
     valueType: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxValueAxisConfig);
+
+const DxValueAxis = defineComponent(DxValueAxisConfig);
+
 (DxValueAxis as any).$_optionName = "valueAxis";
-const DxValueErrorBar = createConfigurationComponent({
+
+const DxValueErrorBarConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1660,9 +2014,15 @@ const DxValueErrorBar = createConfigurationComponent({
     type: String,
     value: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxValueErrorBarConfig);
+
+const DxValueErrorBar = defineComponent(DxValueErrorBarConfig);
+
 (DxValueErrorBar as any).$_optionName = "valueErrorBar";
-const DxWidth = createConfigurationComponent({
+
+const DxWidthConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1673,9 +2033,15 @@ const DxWidth = createConfigurationComponent({
     rangeMaxPoint: Number,
     rangeMinPoint: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxWidthConfig);
+
+const DxWidth = defineComponent(DxWidthConfig);
+
 (DxWidth as any).$_optionName = "width";
 
+
 export default DxRangeSelector;
 export {
   DxRangeSelector,
diff --git a/packages/devextreme-vue/src/range-slider.ts b/packages/devextreme-vue/src/range-slider.ts
index d4dbbccb4306..8f11c4106699 100644
--- a/packages/devextreme-vue/src/range-slider.ts
+++ b/packages/devextreme-vue/src/range-slider.ts
@@ -1,6 +1,6 @@
 import RangeSlider, { Properties } from "devextreme/ui/range_slider";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -46,7 +46,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxRangeSlider extends AccessibleOptions {
   readonly instance?: RangeSlider;
 }
-const DxRangeSlider = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -143,9 +144,14 @@ const DxRangeSlider = createComponent({
       tooltip: { isCollectionItem: false, optionName: "tooltip" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxRangeSlider = defineComponent(componentConfig);
+
 
-const DxFormat = createConfigurationComponent({
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -164,9 +170,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxLabel = createConfigurationComponent({
+
+const DxLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -179,12 +191,18 @@ const DxLabel = createConfigurationComponent({
     position: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelConfig);
+
+const DxLabel = defineComponent(DxLabelConfig);
+
 (DxLabel as any).$_optionName = "label";
 (DxLabel as any).$_expectedChildren = {
   format: { isCollectionItem: false, optionName: "format" }
 };
-const DxTooltip = createConfigurationComponent({
+
+const DxTooltipConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -199,12 +217,18 @@ const DxTooltip = createConfigurationComponent({
     position: String,
     showMode: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipConfig);
+
+const DxTooltip = defineComponent(DxTooltipConfig);
+
 (DxTooltip as any).$_optionName = "tooltip";
 (DxTooltip as any).$_expectedChildren = {
   format: { isCollectionItem: false, optionName: "format" }
 };
 
+
 export default DxRangeSlider;
 export {
   DxRangeSlider,
diff --git a/packages/devextreme-vue/src/recurrence-editor.ts b/packages/devextreme-vue/src/recurrence-editor.ts
index d1d1a7643479..b72bd4c097c9 100644
--- a/packages/devextreme-vue/src/recurrence-editor.ts
+++ b/packages/devextreme-vue/src/recurrence-editor.ts
@@ -1,5 +1,6 @@
 import RecurrenceEditor, { Properties } from "devextreme/ui/recurrence_editor";
-import { createComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -33,7 +34,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxRecurrenceEditor extends AccessibleOptions {
   readonly instance?: RecurrenceEditor;
 }
-const DxRecurrenceEditor = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -102,7 +104,11 @@ const DxRecurrenceEditor = createComponent({
     (this as any).$_WidgetClass = RecurrenceEditor;
     (this as any).$_hasAsyncTemplate = true;
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxRecurrenceEditor = defineComponent(componentConfig);
 
 export default DxRecurrenceEditor;
 export {
diff --git a/packages/devextreme-vue/src/resizable.ts b/packages/devextreme-vue/src/resizable.ts
index de8a77b9f48e..eb25bd35a298 100644
--- a/packages/devextreme-vue/src/resizable.ts
+++ b/packages/devextreme-vue/src/resizable.ts
@@ -1,5 +1,6 @@
 import Resizable, { Properties } from "devextreme/ui/resizable";
-import { createComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "area" |
@@ -24,7 +25,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxResizable extends AccessibleOptions {
   readonly instance?: Resizable;
 }
-const DxResizable = createComponent({
+
+const componentConfig = {
   props: {
     area: {},
     elementAttr: Object,
@@ -74,7 +76,11 @@ const DxResizable = createComponent({
     (this as any).$_WidgetClass = Resizable;
     (this as any).$_hasAsyncTemplate = true;
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxResizable = defineComponent(componentConfig);
 
 export default DxResizable;
 export {
diff --git a/packages/devextreme-vue/src/responsive-box.ts b/packages/devextreme-vue/src/responsive-box.ts
index 2d6753a4556b..d6f6cebb3c66 100644
--- a/packages/devextreme-vue/src/responsive-box.ts
+++ b/packages/devextreme-vue/src/responsive-box.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/responsive_box";
 import ResponsiveBox, { Properties } from "devextreme/ui/responsive_box";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "cols" |
@@ -32,7 +32,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxResponsiveBox extends AccessibleOptions {
   readonly instance?: ResponsiveBox;
 }
-const DxResponsiveBox = createComponent({
+
+const componentConfig = {
   props: {
     cols: Array,
     dataSource: {},
@@ -99,9 +100,14 @@ const DxResponsiveBox = createComponent({
       row: { isCollectionItem: true, optionName: "rows" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxResponsiveBox = defineComponent(componentConfig);
 
-const DxCol = createConfigurationComponent({
+
+const DxColConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -116,10 +122,16 @@ const DxCol = createConfigurationComponent({
     screen: String,
     shrink: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColConfig);
+
+const DxCol = defineComponent(DxColConfig);
+
 (DxCol as any).$_optionName = "cols";
 (DxCol as any).$_isCollectionItem = true;
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -138,13 +150,19 @@ const DxItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
 (DxItem as any).$_expectedChildren = {
   location: { isCollectionItem: true, optionName: "location" }
 };
-const DxLocation = createConfigurationComponent({
+
+const DxLocationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -161,10 +179,16 @@ const DxLocation = createConfigurationComponent({
     rowspan: Number,
     screen: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLocationConfig);
+
+const DxLocation = defineComponent(DxLocationConfig);
+
 (DxLocation as any).$_optionName = "location";
 (DxLocation as any).$_isCollectionItem = true;
-const DxRow = createConfigurationComponent({
+
+const DxRowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -179,10 +203,16 @@ const DxRow = createConfigurationComponent({
     screen: String,
     shrink: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRowConfig);
+
+const DxRow = defineComponent(DxRowConfig);
+
 (DxRow as any).$_optionName = "rows";
 (DxRow as any).$_isCollectionItem = true;
 
+
 export default DxResponsiveBox;
 export {
   DxResponsiveBox,
diff --git a/packages/devextreme-vue/src/sankey.ts b/packages/devextreme-vue/src/sankey.ts
index 690e451114f3..c0a262d9aaa3 100644
--- a/packages/devextreme-vue/src/sankey.ts
+++ b/packages/devextreme-vue/src/sankey.ts
@@ -1,6 +1,6 @@
 import Sankey, { Properties } from "devextreme/viz/sankey";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "adaptiveLayout" |
@@ -45,7 +45,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxSankey extends AccessibleOptions {
   readonly instance?: Sankey;
 }
-const DxSankey = createComponent({
+
+const componentConfig = {
   props: {
     adaptiveLayout: Object,
     alignment: [Array, String],
@@ -147,9 +148,14 @@ const DxSankey = createComponent({
       tooltip: { isCollectionItem: false, optionName: "tooltip" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxSankey = defineComponent(componentConfig);
 
-const DxAdaptiveLayout = createConfigurationComponent({
+
+const DxAdaptiveLayoutConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -162,9 +168,15 @@ const DxAdaptiveLayout = createConfigurationComponent({
     keepLabels: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAdaptiveLayoutConfig);
+
+const DxAdaptiveLayout = defineComponent(DxAdaptiveLayoutConfig);
+
 (DxAdaptiveLayout as any).$_optionName = "adaptiveLayout";
-const DxBorder = createConfigurationComponent({
+
+const DxBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -181,9 +193,15 @@ const DxBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBorderConfig);
+
+const DxBorder = defineComponent(DxBorderConfig);
+
 (DxBorder as any).$_optionName = "border";
-const DxExport = createConfigurationComponent({
+
+const DxExportConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -204,9 +222,15 @@ const DxExport = createConfigurationComponent({
     printingEnabled: Boolean,
     svgToCanvas: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxExportConfig);
+
+const DxExport = defineComponent(DxExportConfig);
+
 (DxExport as any).$_optionName = "export";
-const DxFont = createConfigurationComponent({
+
+const DxFontConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -223,9 +247,15 @@ const DxFont = createConfigurationComponent({
     size: [Number, String],
     weight: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFontConfig);
+
+const DxFont = defineComponent(DxFontConfig);
+
 (DxFont as any).$_optionName = "font";
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -244,9 +274,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxHatching = createConfigurationComponent({
+
+const DxHatchingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -261,9 +297,15 @@ const DxHatching = createConfigurationComponent({
     step: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHatchingConfig);
+
+const DxHatching = defineComponent(DxHatchingConfig);
+
 (DxHatching as any).$_optionName = "hatching";
-const DxHoverStyle = createConfigurationComponent({
+
+const DxHoverStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -278,9 +320,15 @@ const DxHoverStyle = createConfigurationComponent({
     hatching: Object,
     opacity: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHoverStyleConfig);
+
+const DxHoverStyle = defineComponent(DxHoverStyleConfig);
+
 (DxHoverStyle as any).$_optionName = "hoverStyle";
-const DxLabel = createConfigurationComponent({
+
+const DxLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -305,7 +353,12 @@ const DxLabel = createConfigurationComponent({
     verticalOffset: Number,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelConfig);
+
+const DxLabel = defineComponent(DxLabelConfig);
+
 (DxLabel as any).$_optionName = "label";
 (DxLabel as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -313,7 +366,8 @@ const DxLabel = createConfigurationComponent({
   sankeyborder: { isCollectionItem: false, optionName: "border" },
   shadow: { isCollectionItem: false, optionName: "shadow" }
 };
-const DxLink = createConfigurationComponent({
+
+const DxLinkConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -330,14 +384,20 @@ const DxLink = createConfigurationComponent({
     hoverStyle: Object,
     opacity: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLinkConfig);
+
+const DxLink = defineComponent(DxLinkConfig);
+
 (DxLink as any).$_optionName = "link";
 (DxLink as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
   hoverStyle: { isCollectionItem: false, optionName: "hoverStyle" },
   sankeyborder: { isCollectionItem: false, optionName: "border" }
 };
-const DxLoadingIndicator = createConfigurationComponent({
+
+const DxLoadingIndicatorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -354,12 +414,18 @@ const DxLoadingIndicator = createConfigurationComponent({
     show: Boolean,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLoadingIndicatorConfig);
+
+const DxLoadingIndicator = defineComponent(DxLoadingIndicatorConfig);
+
 (DxLoadingIndicator as any).$_optionName = "loadingIndicator";
 (DxLoadingIndicator as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxMargin = createConfigurationComponent({
+
+const DxMarginConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -374,9 +440,15 @@ const DxMargin = createConfigurationComponent({
     right: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMarginConfig);
+
+const DxMargin = defineComponent(DxMarginConfig);
+
 (DxMargin as any).$_optionName = "margin";
-const DxNode = createConfigurationComponent({
+
+const DxNodeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -395,14 +467,20 @@ const DxNode = createConfigurationComponent({
     padding: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxNodeConfig);
+
+const DxNode = defineComponent(DxNodeConfig);
+
 (DxNode as any).$_optionName = "node";
 (DxNode as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
   hoverStyle: { isCollectionItem: false, optionName: "hoverStyle" },
   sankeyborder: { isCollectionItem: false, optionName: "border" }
 };
-const DxSankeyborder = createConfigurationComponent({
+
+const DxSankeyborderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -415,9 +493,15 @@ const DxSankeyborder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSankeyborderConfig);
+
+const DxSankeyborder = defineComponent(DxSankeyborderConfig);
+
 (DxSankeyborder as any).$_optionName = "border";
-const DxShadow = createConfigurationComponent({
+
+const DxShadowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -434,9 +518,15 @@ const DxShadow = createConfigurationComponent({
     offsetY: Number,
     opacity: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShadowConfig);
+
+const DxShadow = defineComponent(DxShadowConfig);
+
 (DxShadow as any).$_optionName = "shadow";
-const DxSize = createConfigurationComponent({
+
+const DxSizeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -447,9 +537,15 @@ const DxSize = createConfigurationComponent({
     height: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSizeConfig);
+
+const DxSize = defineComponent(DxSizeConfig);
+
 (DxSize as any).$_optionName = "size";
-const DxSubtitle = createConfigurationComponent({
+
+const DxSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -466,12 +562,18 @@ const DxSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSubtitleConfig);
+
+const DxSubtitle = defineComponent(DxSubtitleConfig);
+
 (DxSubtitle as any).$_optionName = "subtitle";
 (DxSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxTitle = createConfigurationComponent({
+
+const DxTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -496,14 +598,20 @@ const DxTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTitleConfig);
+
+const DxTitle = defineComponent(DxTitleConfig);
+
 (DxTitle as any).$_optionName = "title";
 (DxTitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
   margin: { isCollectionItem: false, optionName: "margin" },
   subtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxTooltip = createConfigurationComponent({
+
+const DxTooltipConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -544,7 +652,12 @@ const DxTooltip = createConfigurationComponent({
     shadow: Object,
     zIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipConfig);
+
+const DxTooltip = defineComponent(DxTooltipConfig);
+
 (DxTooltip as any).$_optionName = "tooltip";
 (DxTooltip as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -553,7 +666,8 @@ const DxTooltip = createConfigurationComponent({
   shadow: { isCollectionItem: false, optionName: "shadow" },
   tooltipBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxTooltipBorder = createConfigurationComponent({
+
+const DxTooltipBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -570,9 +684,15 @@ const DxTooltipBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipBorderConfig);
+
+const DxTooltipBorder = defineComponent(DxTooltipBorderConfig);
+
 (DxTooltipBorder as any).$_optionName = "border";
 
+
 export default DxSankey;
 export {
   DxSankey,
diff --git a/packages/devextreme-vue/src/scheduler.ts b/packages/devextreme-vue/src/scheduler.ts
index fc6c10a72a5e..ad501ee6e17d 100644
--- a/packages/devextreme-vue/src/scheduler.ts
+++ b/packages/devextreme-vue/src/scheduler.ts
@@ -1,6 +1,6 @@
 import Scheduler, { Properties } from "devextreme/ui/scheduler";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -86,7 +86,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxScheduler extends AccessibleOptions {
   readonly instance?: Scheduler;
 }
-const DxScheduler = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     adaptivityEnabled: Boolean,
@@ -276,9 +277,14 @@ const DxScheduler = createComponent({
       view: { isCollectionItem: true, optionName: "views" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxScheduler = defineComponent(componentConfig);
 
-const DxAppointmentDragging = createConfigurationComponent({
+
+const DxAppointmentDraggingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -305,9 +311,15 @@ const DxAppointmentDragging = createConfigurationComponent({
     scrollSensitivity: Number,
     scrollSpeed: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAppointmentDraggingConfig);
+
+const DxAppointmentDragging = defineComponent(DxAppointmentDraggingConfig);
+
 (DxAppointmentDragging as any).$_optionName = "appointmentDragging";
-const DxEditing = createConfigurationComponent({
+
+const DxEditingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -326,9 +338,15 @@ const DxEditing = createConfigurationComponent({
     allowTimeZoneEditing: Boolean,
     allowUpdating: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxEditingConfig);
+
+const DxEditing = defineComponent(DxEditingConfig);
+
 (DxEditing as any).$_optionName = "editing";
-const DxResource = createConfigurationComponent({
+
+const DxResourceConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -351,10 +369,16 @@ const DxResource = createConfigurationComponent({
     useColorAsDefault: Boolean,
     valueExpr: [Function, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxResourceConfig);
+
+const DxResource = defineComponent(DxResourceConfig);
+
 (DxResource as any).$_optionName = "resources";
 (DxResource as any).$_isCollectionItem = true;
-const DxScrolling = createConfigurationComponent({
+
+const DxScrollingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -363,9 +387,15 @@ const DxScrolling = createConfigurationComponent({
   props: {
     mode: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxScrollingConfig);
+
+const DxScrolling = defineComponent(DxScrollingConfig);
+
 (DxScrolling as any).$_optionName = "scrolling";
-const DxView = createConfigurationComponent({
+
+const DxViewConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -431,13 +461,19 @@ const DxView = createConfigurationComponent({
     timeCellTemplate: {},
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxViewConfig);
+
+const DxView = defineComponent(DxViewConfig);
+
 (DxView as any).$_optionName = "views";
 (DxView as any).$_isCollectionItem = true;
 (DxView as any).$_expectedChildren = {
   scrolling: { isCollectionItem: false, optionName: "scrolling" }
 };
 
+
 export default DxScheduler;
 export {
   DxScheduler,
diff --git a/packages/devextreme-vue/src/scroll-view.ts b/packages/devextreme-vue/src/scroll-view.ts
index 78f6f37262d9..8ff9591c4680 100644
--- a/packages/devextreme-vue/src/scroll-view.ts
+++ b/packages/devextreme-vue/src/scroll-view.ts
@@ -1,5 +1,6 @@
 import ScrollView, { Properties } from "devextreme/ui/scroll_view";
-import { createComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "bounceEnabled" |
@@ -29,7 +30,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxScrollView extends AccessibleOptions {
   readonly instance?: ScrollView;
 }
-const DxScrollView = createComponent({
+
+const componentConfig = {
   props: {
     bounceEnabled: Boolean,
     direction: String,
@@ -89,7 +91,11 @@ const DxScrollView = createComponent({
     (this as any).$_WidgetClass = ScrollView;
     (this as any).$_hasAsyncTemplate = true;
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxScrollView = defineComponent(componentConfig);
 
 export default DxScrollView;
 export {
diff --git a/packages/devextreme-vue/src/select-box.ts b/packages/devextreme-vue/src/select-box.ts
index 93b31de58ea3..031d7f459584 100644
--- a/packages/devextreme-vue/src/select-box.ts
+++ b/packages/devextreme-vue/src/select-box.ts
@@ -1,6 +1,6 @@
 import SelectBox, { Properties } from "devextreme/ui/select_box";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "acceptCustomValue" |
@@ -90,7 +90,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxSelectBox extends AccessibleOptions {
   readonly instance?: SelectBox;
 }
-const DxSelectBox = createComponent({
+
+const componentConfig = {
   props: {
     acceptCustomValue: Boolean,
     accessKey: String,
@@ -276,9 +277,14 @@ const DxSelectBox = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
 
-const DxAnimation = createConfigurationComponent({
+const DxSelectBox = defineComponent(componentConfig);
+
+
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -289,13 +295,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -306,9 +318,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -319,9 +337,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxButton = createConfigurationComponent({
+
+const DxButtonConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -334,13 +358,19 @@ const DxButton = createConfigurationComponent({
     name: String,
     options: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxButtonConfig);
+
+const DxButton = defineComponent(DxButtonConfig);
+
 (DxButton as any).$_optionName = "buttons";
 (DxButton as any).$_isCollectionItem = true;
 (DxButton as any).$_expectedChildren = {
   options: { isCollectionItem: false, optionName: "options" }
 };
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -351,9 +381,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxDropDownOptions = createConfigurationComponent({
+
+const DxDropDownOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -460,14 +496,20 @@ const DxDropDownOptions = createConfigurationComponent({
     width: [Function, Number, String],
     wrapperAttr: {}
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDropDownOptionsConfig);
+
+const DxDropDownOptions = defineComponent(DxDropDownOptionsConfig);
+
 (DxDropDownOptions as any).$_optionName = "dropDownOptions";
 (DxDropDownOptions as any).$_expectedChildren = {
   animation: { isCollectionItem: false, optionName: "animation" },
   position: { isCollectionItem: false, optionName: "position" },
   toolbarItem: { isCollectionItem: true, optionName: "toolbarItems" }
 };
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -484,12 +526,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -516,13 +564,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -539,10 +593,16 @@ const DxItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -553,9 +613,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -566,9 +632,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxOptions = createConfigurationComponent({
+
+const DxOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -625,9 +697,15 @@ const DxOptions = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOptionsConfig);
+
+const DxOptions = defineComponent(DxOptionsConfig);
+
 (DxOptions as any).$_optionName = "options";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -648,9 +726,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -677,9 +761,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -696,9 +786,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
-const DxToolbarItem = createConfigurationComponent({
+
+const DxToolbarItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -731,10 +827,16 @@ const DxToolbarItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarItemConfig);
+
+const DxToolbarItem = defineComponent(DxToolbarItemConfig);
+
 (DxToolbarItem as any).$_optionName = "toolbarItems";
 (DxToolbarItem as any).$_isCollectionItem = true;
 
+
 export default DxSelectBox;
 export {
   DxSelectBox,
diff --git a/packages/devextreme-vue/src/slider.ts b/packages/devextreme-vue/src/slider.ts
index d62088e325ab..01c8f99749c0 100644
--- a/packages/devextreme-vue/src/slider.ts
+++ b/packages/devextreme-vue/src/slider.ts
@@ -1,6 +1,6 @@
 import Slider, { Properties } from "devextreme/ui/slider";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -43,7 +43,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxSlider extends AccessibleOptions {
   readonly instance?: Slider;
 }
-const DxSlider = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -134,9 +135,14 @@ const DxSlider = createComponent({
       tooltip: { isCollectionItem: false, optionName: "tooltip" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxSlider = defineComponent(componentConfig);
+
 
-const DxFormat = createConfigurationComponent({
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -155,9 +161,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxLabel = createConfigurationComponent({
+
+const DxLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -170,12 +182,18 @@ const DxLabel = createConfigurationComponent({
     position: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelConfig);
+
+const DxLabel = defineComponent(DxLabelConfig);
+
 (DxLabel as any).$_optionName = "label";
 (DxLabel as any).$_expectedChildren = {
   format: { isCollectionItem: false, optionName: "format" }
 };
-const DxTooltip = createConfigurationComponent({
+
+const DxTooltipConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -190,12 +208,18 @@ const DxTooltip = createConfigurationComponent({
     position: String,
     showMode: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipConfig);
+
+const DxTooltip = defineComponent(DxTooltipConfig);
+
 (DxTooltip as any).$_optionName = "tooltip";
 (DxTooltip as any).$_expectedChildren = {
   format: { isCollectionItem: false, optionName: "format" }
 };
 
+
 export default DxSlider;
 export {
   DxSlider,
diff --git a/packages/devextreme-vue/src/sortable.ts b/packages/devextreme-vue/src/sortable.ts
index 46c35e3fd53b..7ef1012edecd 100644
--- a/packages/devextreme-vue/src/sortable.ts
+++ b/packages/devextreme-vue/src/sortable.ts
@@ -1,6 +1,6 @@
 import Sortable, { Properties } from "devextreme/ui/sortable";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "allowDropInsideItem" |
@@ -39,7 +39,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxSortable extends AccessibleOptions {
   readonly instance?: Sortable;
 }
-const DxSortable = createComponent({
+
+const componentConfig = {
   props: {
     allowDropInsideItem: Boolean,
     allowReordering: Boolean,
@@ -120,9 +121,14 @@ const DxSortable = createComponent({
       cursorOffset: { isCollectionItem: false, optionName: "cursorOffset" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxSortable = defineComponent(componentConfig);
+
 
-const DxCursorOffset = createConfigurationComponent({
+const DxCursorOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -133,9 +139,15 @@ const DxCursorOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCursorOffsetConfig);
+
+const DxCursorOffset = defineComponent(DxCursorOffsetConfig);
+
 (DxCursorOffset as any).$_optionName = "cursorOffset";
 
+
 export default DxSortable;
 export {
   DxSortable,
diff --git a/packages/devextreme-vue/src/sparkline.ts b/packages/devextreme-vue/src/sparkline.ts
index 69ed000dbb12..fcfd622d3265 100644
--- a/packages/devextreme-vue/src/sparkline.ts
+++ b/packages/devextreme-vue/src/sparkline.ts
@@ -1,6 +1,6 @@
 import Sparkline, { Properties } from "devextreme/viz/sparkline";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "argumentField" |
@@ -48,7 +48,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxSparkline extends AccessibleOptions {
   readonly instance?: Sparkline;
 }
-const DxSparkline = createComponent({
+
+const componentConfig = {
   props: {
     argumentField: String,
     barNegativeColor: String,
@@ -149,9 +150,14 @@ const DxSparkline = createComponent({
       tooltip: { isCollectionItem: false, optionName: "tooltip" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxSparkline = defineComponent(componentConfig);
+
 
-const DxBorder = createConfigurationComponent({
+const DxBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -168,9 +174,15 @@ const DxBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBorderConfig);
+
+const DxBorder = defineComponent(DxBorderConfig);
+
 (DxBorder as any).$_optionName = "border";
-const DxFont = createConfigurationComponent({
+
+const DxFontConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -187,9 +199,15 @@ const DxFont = createConfigurationComponent({
     size: [Number, String],
     weight: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFontConfig);
+
+const DxFont = defineComponent(DxFontConfig);
+
 (DxFont as any).$_optionName = "font";
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -208,9 +226,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxMargin = createConfigurationComponent({
+
+const DxMarginConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -225,9 +249,15 @@ const DxMargin = createConfigurationComponent({
     right: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMarginConfig);
+
+const DxMargin = defineComponent(DxMarginConfig);
+
 (DxMargin as any).$_optionName = "margin";
-const DxShadow = createConfigurationComponent({
+
+const DxShadowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -244,9 +274,15 @@ const DxShadow = createConfigurationComponent({
     offsetY: Number,
     opacity: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShadowConfig);
+
+const DxShadow = defineComponent(DxShadowConfig);
+
 (DxShadow as any).$_optionName = "shadow";
-const DxSize = createConfigurationComponent({
+
+const DxSizeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -257,9 +293,15 @@ const DxSize = createConfigurationComponent({
     height: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSizeConfig);
+
+const DxSize = defineComponent(DxSizeConfig);
+
 (DxSize as any).$_optionName = "size";
-const DxTooltip = createConfigurationComponent({
+
+const DxTooltipConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -298,7 +340,12 @@ const DxTooltip = createConfigurationComponent({
     shadow: Object,
     zIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipConfig);
+
+const DxTooltip = defineComponent(DxTooltipConfig);
+
 (DxTooltip as any).$_optionName = "tooltip";
 (DxTooltip as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -307,6 +354,7 @@ const DxTooltip = createConfigurationComponent({
   shadow: { isCollectionItem: false, optionName: "shadow" }
 };
 
+
 export default DxSparkline;
 export {
   DxSparkline,
diff --git a/packages/devextreme-vue/src/speed-dial-action.ts b/packages/devextreme-vue/src/speed-dial-action.ts
index b2b6edd4792a..5de24d35accd 100644
--- a/packages/devextreme-vue/src/speed-dial-action.ts
+++ b/packages/devextreme-vue/src/speed-dial-action.ts
@@ -1,5 +1,6 @@
 import SpeedDialAction, { Properties } from "devextreme/ui/speed_dial_action";
-import { createComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -24,7 +25,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxSpeedDialAction extends AccessibleOptions {
   readonly instance?: SpeedDialAction;
 }
-const DxSpeedDialAction = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -74,7 +76,11 @@ const DxSpeedDialAction = createComponent({
     (this as any).$_WidgetClass = SpeedDialAction;
     (this as any).$_hasAsyncTemplate = true;
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxSpeedDialAction = defineComponent(componentConfig);
 
 export default DxSpeedDialAction;
 export {
diff --git a/packages/devextreme-vue/src/splitter.ts b/packages/devextreme-vue/src/splitter.ts
index 3cedcdde46d1..a3599070f227 100644
--- a/packages/devextreme-vue/src/splitter.ts
+++ b/packages/devextreme-vue/src/splitter.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/splitter";
 import Splitter, { Properties } from "devextreme/ui/splitter";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "allowKeyboardNavigation" |
@@ -34,7 +34,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxSplitter extends AccessibleOptions {
   readonly instance?: Splitter;
 }
-const DxSplitter = createComponent({
+
+const componentConfig = {
   props: {
     allowKeyboardNavigation: Boolean,
     dataSource: {},
@@ -103,9 +104,14 @@ const DxSplitter = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxSplitter = defineComponent(componentConfig);
+
 
-const DxItem = createConfigurationComponent({
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -134,10 +140,16 @@ const DxItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
 
+
 export default DxSplitter;
 export {
   DxSplitter,
diff --git a/packages/devextreme-vue/src/switch.ts b/packages/devextreme-vue/src/switch.ts
index 682f04fbaa78..7cf0ecac1f49 100644
--- a/packages/devextreme-vue/src/switch.ts
+++ b/packages/devextreme-vue/src/switch.ts
@@ -1,5 +1,6 @@
 import Switch, { Properties } from "devextreme/ui/switch";
-import { createComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -36,7 +37,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxSwitch extends AccessibleOptions {
   readonly instance?: Switch;
 }
-const DxSwitch = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -111,7 +113,11 @@ const DxSwitch = createComponent({
     (this as any).$_WidgetClass = Switch;
     (this as any).$_hasAsyncTemplate = true;
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxSwitch = defineComponent(componentConfig);
 
 export default DxSwitch;
 export {
diff --git a/packages/devextreme-vue/src/tab-panel.ts b/packages/devextreme-vue/src/tab-panel.ts
index afb6416924bb..4366e6775b55 100644
--- a/packages/devextreme-vue/src/tab-panel.ts
+++ b/packages/devextreme-vue/src/tab-panel.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/tab_panel";
 import TabPanel, { Properties } from "devextreme/ui/tab_panel";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -53,7 +53,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxTabPanel extends AccessibleOptions {
   readonly instance?: TabPanel;
 }
-const DxTabPanel = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -160,9 +161,14 @@ const DxTabPanel = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxTabPanel = defineComponent(componentConfig);
+
 
-const DxItem = createConfigurationComponent({
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -187,10 +193,16 @@ const DxItem = createConfigurationComponent({
     title: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
 
+
 export default DxTabPanel;
 export {
   DxTabPanel,
diff --git a/packages/devextreme-vue/src/tabs.ts b/packages/devextreme-vue/src/tabs.ts
index cedc1f7ef81c..0c2a7b88665c 100644
--- a/packages/devextreme-vue/src/tabs.ts
+++ b/packages/devextreme-vue/src/tabs.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/tabs";
 import Tabs, { Properties } from "devextreme/ui/tabs";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -48,7 +48,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxTabs extends AccessibleOptions {
   readonly instance?: Tabs;
 }
-const DxTabs = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     dataSource: {},
@@ -145,9 +146,14 @@ const DxTabs = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxTabs = defineComponent(componentConfig);
+
 
-const DxItem = createConfigurationComponent({
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -168,10 +174,16 @@ const DxItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
 
+
 export default DxTabs;
 export {
   DxTabs,
diff --git a/packages/devextreme-vue/src/tag-box.ts b/packages/devextreme-vue/src/tag-box.ts
index 0850f974ddcd..ff9d33fbc7a9 100644
--- a/packages/devextreme-vue/src/tag-box.ts
+++ b/packages/devextreme-vue/src/tag-box.ts
@@ -1,6 +1,6 @@
 import TagBox, { Properties } from "devextreme/ui/tag_box";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "acceptCustomValue" |
@@ -96,7 +96,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxTagBox extends AccessibleOptions {
   readonly instance?: TagBox;
 }
-const DxTagBox = createComponent({
+
+const componentConfig = {
   props: {
     acceptCustomValue: Boolean,
     accessKey: String,
@@ -294,9 +295,14 @@ const DxTagBox = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
 
-const DxAnimation = createConfigurationComponent({
+const DxTagBox = defineComponent(componentConfig);
+
+
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -307,13 +313,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -324,9 +336,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -337,9 +355,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxButton = createConfigurationComponent({
+
+const DxButtonConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -352,13 +376,19 @@ const DxButton = createConfigurationComponent({
     name: String,
     options: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxButtonConfig);
+
+const DxButton = defineComponent(DxButtonConfig);
+
 (DxButton as any).$_optionName = "buttons";
 (DxButton as any).$_isCollectionItem = true;
 (DxButton as any).$_expectedChildren = {
   options: { isCollectionItem: false, optionName: "options" }
 };
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -369,9 +399,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxDropDownOptions = createConfigurationComponent({
+
+const DxDropDownOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -478,14 +514,20 @@ const DxDropDownOptions = createConfigurationComponent({
     width: [Function, Number, String],
     wrapperAttr: {}
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxDropDownOptionsConfig);
+
+const DxDropDownOptions = defineComponent(DxDropDownOptionsConfig);
+
 (DxDropDownOptions as any).$_optionName = "dropDownOptions";
 (DxDropDownOptions as any).$_expectedChildren = {
   animation: { isCollectionItem: false, optionName: "animation" },
   position: { isCollectionItem: false, optionName: "position" },
   toolbarItem: { isCollectionItem: true, optionName: "toolbarItems" }
 };
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -502,12 +544,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -534,13 +582,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -557,10 +611,16 @@ const DxItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -571,9 +631,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -584,9 +650,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxOptions = createConfigurationComponent({
+
+const DxOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -643,9 +715,15 @@ const DxOptions = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOptionsConfig);
+
+const DxOptions = defineComponent(DxOptionsConfig);
+
 (DxOptions as any).$_optionName = "options";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -666,9 +744,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -695,9 +779,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -714,9 +804,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
-const DxToolbarItem = createConfigurationComponent({
+
+const DxToolbarItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -749,10 +845,16 @@ const DxToolbarItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarItemConfig);
+
+const DxToolbarItem = defineComponent(DxToolbarItemConfig);
+
 (DxToolbarItem as any).$_optionName = "toolbarItems";
 (DxToolbarItem as any).$_isCollectionItem = true;
 
+
 export default DxTagBox;
 export {
   DxTagBox,
diff --git a/packages/devextreme-vue/src/text-area.ts b/packages/devextreme-vue/src/text-area.ts
index de2f5cb6d2a5..a7061feba890 100644
--- a/packages/devextreme-vue/src/text-area.ts
+++ b/packages/devextreme-vue/src/text-area.ts
@@ -1,5 +1,6 @@
 import TextArea, { Properties } from "devextreme/ui/text_area";
-import { createComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -56,7 +57,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxTextArea extends AccessibleOptions {
   readonly instance?: TextArea;
 }
-const DxTextArea = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -171,7 +173,11 @@ const DxTextArea = createComponent({
     (this as any).$_WidgetClass = TextArea;
     (this as any).$_hasAsyncTemplate = true;
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxTextArea = defineComponent(componentConfig);
 
 export default DxTextArea;
 export {
diff --git a/packages/devextreme-vue/src/text-box.ts b/packages/devextreme-vue/src/text-box.ts
index 574b908aff1f..21caacc5810e 100644
--- a/packages/devextreme-vue/src/text-box.ts
+++ b/packages/devextreme-vue/src/text-box.ts
@@ -1,6 +1,6 @@
 import TextBox, { Properties } from "devextreme/ui/text_box";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -63,7 +63,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxTextBox extends AccessibleOptions {
   readonly instance?: TextBox;
 }
-const DxTextBox = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -193,9 +194,14 @@ const DxTextBox = createComponent({
       button: { isCollectionItem: true, optionName: "buttons" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxTextBox = defineComponent(componentConfig);
 
-const DxButton = createConfigurationComponent({
+
+const DxButtonConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -208,13 +214,19 @@ const DxButton = createConfigurationComponent({
     name: String,
     options: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxButtonConfig);
+
+const DxButton = defineComponent(DxButtonConfig);
+
 (DxButton as any).$_optionName = "buttons";
 (DxButton as any).$_isCollectionItem = true;
 (DxButton as any).$_expectedChildren = {
   options: { isCollectionItem: false, optionName: "options" }
 };
-const DxOptions = createConfigurationComponent({
+
+const DxOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -271,9 +283,15 @@ const DxOptions = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOptionsConfig);
+
+const DxOptions = defineComponent(DxOptionsConfig);
+
 (DxOptions as any).$_optionName = "options";
 
+
 export default DxTextBox;
 export {
   DxTextBox,
diff --git a/packages/devextreme-vue/src/tile-view.ts b/packages/devextreme-vue/src/tile-view.ts
index c02278c54224..9a7e95759944 100644
--- a/packages/devextreme-vue/src/tile-view.ts
+++ b/packages/devextreme-vue/src/tile-view.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/tile_view";
 import TileView, { Properties } from "devextreme/ui/tile_view";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -39,7 +39,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxTileView extends AccessibleOptions {
   readonly instance?: TileView;
 }
-const DxTileView = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -118,9 +119,14 @@ const DxTileView = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxTileView = defineComponent(componentConfig);
+
 
-const DxItem = createConfigurationComponent({
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -141,10 +147,16 @@ const DxItem = createConfigurationComponent({
     visible: Boolean,
     widthRatio: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
 
+
 export default DxTileView;
 export {
   DxTileView,
diff --git a/packages/devextreme-vue/src/toast.ts b/packages/devextreme-vue/src/toast.ts
index 0b47c5e3a6a5..65bdc0049212 100644
--- a/packages/devextreme-vue/src/toast.ts
+++ b/packages/devextreme-vue/src/toast.ts
@@ -1,6 +1,6 @@
 import Toast, { Properties } from "devextreme/ui/toast";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -44,7 +44,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxToast extends AccessibleOptions {
   readonly instance?: Toast;
 }
-const DxToast = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     animation: Object,
@@ -136,9 +137,14 @@ const DxToast = createComponent({
       position: { isCollectionItem: false, optionName: "position" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxToast = defineComponent(componentConfig);
 
-const DxAnimation = createConfigurationComponent({
+
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -149,13 +155,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -166,9 +178,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -179,9 +197,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -192,9 +216,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -211,12 +241,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -243,13 +279,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -260,9 +302,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -273,9 +321,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -296,9 +350,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -325,9 +385,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -344,9 +410,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
 
+
 export default DxToast;
 export {
   DxToast,
diff --git a/packages/devextreme-vue/src/toolbar.ts b/packages/devextreme-vue/src/toolbar.ts
index 3d67dfee200d..c6ff254e3a1f 100644
--- a/packages/devextreme-vue/src/toolbar.ts
+++ b/packages/devextreme-vue/src/toolbar.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/toolbar";
 import Toolbar, { Properties } from "devextreme/ui/toolbar";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "dataSource" |
@@ -31,7 +31,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxToolbar extends AccessibleOptions {
   readonly instance?: Toolbar;
 }
-const DxToolbar = createComponent({
+
+const componentConfig = {
   props: {
     dataSource: {},
     disabled: Boolean,
@@ -94,9 +95,14 @@ const DxToolbar = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxToolbar = defineComponent(componentConfig);
+
 
-const DxItem = createConfigurationComponent({
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -127,10 +133,16 @@ const DxItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
 
+
 export default DxToolbar;
 export {
   DxToolbar,
diff --git a/packages/devextreme-vue/src/tooltip.ts b/packages/devextreme-vue/src/tooltip.ts
index 740a06b66e0d..bde8ed19f83e 100644
--- a/packages/devextreme-vue/src/tooltip.ts
+++ b/packages/devextreme-vue/src/tooltip.ts
@@ -1,6 +1,6 @@
 import Tooltip, { Properties } from "devextreme/ui/tooltip";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "animation" |
@@ -41,7 +41,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxTooltip extends AccessibleOptions {
   readonly instance?: Tooltip;
 }
-const DxTooltip = createComponent({
+
+const componentConfig = {
   props: {
     animation: Object,
     closeOnOutsideClick: [Boolean, Function],
@@ -129,9 +130,14 @@ const DxTooltip = createComponent({
       showEvent: { isCollectionItem: false, optionName: "showEvent" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxTooltip = defineComponent(componentConfig);
+
 
-const DxAnimation = createConfigurationComponent({
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -142,13 +148,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -159,9 +171,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -172,9 +190,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -185,9 +209,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -204,12 +234,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -236,13 +272,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxHideEvent = createConfigurationComponent({
+
+const DxHideEventConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -253,9 +295,15 @@ const DxHideEvent = createConfigurationComponent({
     delay: Number,
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideEventConfig);
+
+const DxHideEvent = defineComponent(DxHideEventConfig);
+
 (DxHideEvent as any).$_optionName = "hideEvent";
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -266,9 +314,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -279,9 +333,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -302,9 +362,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -331,9 +397,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxShowEvent = createConfigurationComponent({
+
+const DxShowEventConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -344,9 +416,15 @@ const DxShowEvent = createConfigurationComponent({
     delay: Number,
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowEventConfig);
+
+const DxShowEvent = defineComponent(DxShowEventConfig);
+
 (DxShowEvent as any).$_optionName = "showEvent";
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -363,9 +441,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
 
+
 export default DxTooltip;
 export {
   DxTooltip,
diff --git a/packages/devextreme-vue/src/tree-list.ts b/packages/devextreme-vue/src/tree-list.ts
index 7484cbc62651..4e52896c024e 100644
--- a/packages/devextreme-vue/src/tree-list.ts
+++ b/packages/devextreme-vue/src/tree-list.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/tree_list";
 import TreeList, { Properties } from "devextreme/ui/tree_list";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -125,7 +125,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxTreeList extends AccessibleOptions {
   readonly instance?: TreeList;
 }
-const DxTreeList = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -398,9 +399,14 @@ const DxTreeList = createComponent({
       treeListSelection: { isCollectionItem: false, optionName: "selection" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
 
-const DxAnimation = createConfigurationComponent({
+const DxTreeList = defineComponent(componentConfig);
+
+
+const DxAnimationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -411,13 +417,19 @@ const DxAnimation = createConfigurationComponent({
     hide: [Object, Number, String],
     show: [Object, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnimationConfig);
+
+const DxAnimation = defineComponent(DxAnimationConfig);
+
 (DxAnimation as any).$_optionName = "animation";
 (DxAnimation as any).$_expectedChildren = {
   hide: { isCollectionItem: false, optionName: "hide" },
   show: { isCollectionItem: false, optionName: "show" }
 };
-const DxAsyncRule = createConfigurationComponent({
+
+const DxAsyncRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -434,13 +446,19 @@ const DxAsyncRule = createConfigurationComponent({
     type: String,
     validationCallback: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAsyncRuleConfig);
+
+const DxAsyncRule = defineComponent(DxAsyncRuleConfig);
+
 (DxAsyncRule as any).$_optionName = "validationRules";
 (DxAsyncRule as any).$_isCollectionItem = true;
 (DxAsyncRule as any).$_predefinedProps = {
   type: "async"
 };
-const DxAt = createConfigurationComponent({
+
+const DxAtConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -451,9 +469,15 @@ const DxAt = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAtConfig);
+
+const DxAt = defineComponent(DxAtConfig);
+
 (DxAt as any).$_optionName = "at";
-const DxBoundaryOffset = createConfigurationComponent({
+
+const DxBoundaryOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -464,9 +488,15 @@ const DxBoundaryOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBoundaryOffsetConfig);
+
+const DxBoundaryOffset = defineComponent(DxBoundaryOffsetConfig);
+
 (DxBoundaryOffset as any).$_optionName = "boundaryOffset";
-const DxButton = createConfigurationComponent({
+
+const DxButtonConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -491,10 +521,16 @@ const DxButton = createConfigurationComponent({
     text: String,
     visible: [Boolean, Function]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxButtonConfig);
+
+const DxButton = defineComponent(DxButtonConfig);
+
 (DxButton as any).$_optionName = "buttons";
 (DxButton as any).$_isCollectionItem = true;
-const DxChange = createConfigurationComponent({
+
+const DxChangeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -509,10 +545,16 @@ const DxChange = createConfigurationComponent({
     insertBeforeKey: {},
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxChangeConfig);
+
+const DxChange = defineComponent(DxChangeConfig);
+
 (DxChange as any).$_optionName = "changes";
 (DxChange as any).$_isCollectionItem = true;
-const DxColCountByScreen = createConfigurationComponent({
+
+const DxColCountByScreenConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -527,9 +569,15 @@ const DxColCountByScreen = createConfigurationComponent({
     sm: Number,
     xs: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColCountByScreenConfig);
+
+const DxColCountByScreen = defineComponent(DxColCountByScreenConfig);
+
 (DxColCountByScreen as any).$_optionName = "colCountByScreen";
-const DxCollision = createConfigurationComponent({
+
+const DxCollisionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -540,9 +588,15 @@ const DxCollision = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCollisionConfig);
+
+const DxCollision = defineComponent(DxCollisionConfig);
+
 (DxCollision as any).$_optionName = "collision";
-const DxColumn = createConfigurationComponent({
+
+const DxColumnConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -661,7 +715,12 @@ const DxColumn = createConfigurationComponent({
     visibleIndex: Number,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnConfig);
+
+const DxColumn = defineComponent(DxColumnConfig);
+
 (DxColumn as any).$_optionName = "columns";
 (DxColumn as any).$_isCollectionItem = true;
 (DxColumn as any).$_expectedChildren = {
@@ -683,7 +742,8 @@ const DxColumn = createConfigurationComponent({
   StringLengthRule: { isCollectionItem: true, optionName: "validationRules" },
   validationRule: { isCollectionItem: true, optionName: "validationRules" }
 };
-const DxColumnChooser = createConfigurationComponent({
+
+const DxColumnChooserConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -716,7 +776,12 @@ const DxColumnChooser = createConfigurationComponent({
     title: String,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnChooserConfig);
+
+const DxColumnChooser = defineComponent(DxColumnChooserConfig);
+
 (DxColumnChooser as any).$_optionName = "columnChooser";
 (DxColumnChooser as any).$_expectedChildren = {
   columnChooserSearch: { isCollectionItem: false, optionName: "search" },
@@ -725,7 +790,8 @@ const DxColumnChooser = createConfigurationComponent({
   search: { isCollectionItem: false, optionName: "search" },
   selection: { isCollectionItem: false, optionName: "selection" }
 };
-const DxColumnChooserSearch = createConfigurationComponent({
+
+const DxColumnChooserSearchConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -738,9 +804,15 @@ const DxColumnChooserSearch = createConfigurationComponent({
     enabled: Boolean,
     timeout: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnChooserSearchConfig);
+
+const DxColumnChooserSearch = defineComponent(DxColumnChooserSearchConfig);
+
 (DxColumnChooserSearch as any).$_optionName = "search";
-const DxColumnChooserSelection = createConfigurationComponent({
+
+const DxColumnChooserSelectionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -753,9 +825,15 @@ const DxColumnChooserSelection = createConfigurationComponent({
     recursive: Boolean,
     selectByClick: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnChooserSelectionConfig);
+
+const DxColumnChooserSelection = defineComponent(DxColumnChooserSelectionConfig);
+
 (DxColumnChooserSelection as any).$_optionName = "selection";
-const DxColumnFixing = createConfigurationComponent({
+
+const DxColumnFixingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -766,13 +844,19 @@ const DxColumnFixing = createConfigurationComponent({
     enabled: Boolean,
     texts: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnFixingConfig);
+
+const DxColumnFixing = defineComponent(DxColumnFixingConfig);
+
 (DxColumnFixing as any).$_optionName = "columnFixing";
 (DxColumnFixing as any).$_expectedChildren = {
   columnFixingTexts: { isCollectionItem: false, optionName: "texts" },
   texts: { isCollectionItem: false, optionName: "texts" }
 };
-const DxColumnFixingTexts = createConfigurationComponent({
+
+const DxColumnFixingTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -787,9 +871,15 @@ const DxColumnFixingTexts = createConfigurationComponent({
     rightPosition: String,
     unfix: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnFixingTextsConfig);
+
+const DxColumnFixingTexts = defineComponent(DxColumnFixingTextsConfig);
+
 (DxColumnFixingTexts as any).$_optionName = "texts";
-const DxColumnHeaderFilter = createConfigurationComponent({
+
+const DxColumnHeaderFilterConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -812,13 +902,19 @@ const DxColumnHeaderFilter = createConfigurationComponent({
     searchMode: String,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnHeaderFilterConfig);
+
+const DxColumnHeaderFilter = defineComponent(DxColumnHeaderFilterConfig);
+
 (DxColumnHeaderFilter as any).$_optionName = "headerFilter";
 (DxColumnHeaderFilter as any).$_expectedChildren = {
   columnHeaderFilterSearch: { isCollectionItem: false, optionName: "search" },
   search: { isCollectionItem: false, optionName: "search" }
 };
-const DxColumnHeaderFilterSearch = createConfigurationComponent({
+
+const DxColumnHeaderFilterSearchConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -835,9 +931,15 @@ const DxColumnHeaderFilterSearch = createConfigurationComponent({
     searchExpr: [Array, Function, String],
     timeout: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnHeaderFilterSearchConfig);
+
+const DxColumnHeaderFilterSearch = defineComponent(DxColumnHeaderFilterSearchConfig);
+
 (DxColumnHeaderFilterSearch as any).$_optionName = "search";
-const DxColumnLookup = createConfigurationComponent({
+
+const DxColumnLookupConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -854,9 +956,15 @@ const DxColumnLookup = createConfigurationComponent({
     displayExpr: [Function, String],
     valueExpr: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColumnLookupConfig);
+
+const DxColumnLookup = defineComponent(DxColumnLookupConfig);
+
 (DxColumnLookup as any).$_optionName = "lookup";
-const DxCompareRule = createConfigurationComponent({
+
+const DxCompareRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -873,13 +981,19 @@ const DxCompareRule = createConfigurationComponent({
     message: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCompareRuleConfig);
+
+const DxCompareRule = defineComponent(DxCompareRuleConfig);
+
 (DxCompareRule as any).$_optionName = "validationRules";
 (DxCompareRule as any).$_isCollectionItem = true;
 (DxCompareRule as any).$_predefinedProps = {
   type: "compare"
 };
-const DxCursorOffset = createConfigurationComponent({
+
+const DxCursorOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -890,9 +1004,15 @@ const DxCursorOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCursorOffsetConfig);
+
+const DxCursorOffset = defineComponent(DxCursorOffsetConfig);
+
 (DxCursorOffset as any).$_optionName = "cursorOffset";
-const DxCustomOperation = createConfigurationComponent({
+
+const DxCustomOperationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -915,10 +1035,16 @@ const DxCustomOperation = createConfigurationComponent({
     icon: String,
     name: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCustomOperationConfig);
+
+const DxCustomOperation = defineComponent(DxCustomOperationConfig);
+
 (DxCustomOperation as any).$_optionName = "customOperations";
 (DxCustomOperation as any).$_isCollectionItem = true;
-const DxCustomRule = createConfigurationComponent({
+
+const DxCustomRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -935,13 +1061,19 @@ const DxCustomRule = createConfigurationComponent({
     type: String,
     validationCallback: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCustomRuleConfig);
+
+const DxCustomRule = defineComponent(DxCustomRuleConfig);
+
 (DxCustomRule as any).$_optionName = "validationRules";
 (DxCustomRule as any).$_isCollectionItem = true;
 (DxCustomRule as any).$_predefinedProps = {
   type: "custom"
 };
-const DxEditing = createConfigurationComponent({
+
+const DxEditingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -978,7 +1110,12 @@ const DxEditing = createConfigurationComponent({
     texts: Object,
     useIcons: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxEditingConfig);
+
+const DxEditing = defineComponent(DxEditingConfig);
+
 (DxEditing as any).$_optionName = "editing";
 (DxEditing as any).$_expectedChildren = {
   change: { isCollectionItem: true, optionName: "changes" },
@@ -987,7 +1124,8 @@ const DxEditing = createConfigurationComponent({
   popup: { isCollectionItem: false, optionName: "popup" },
   texts: { isCollectionItem: false, optionName: "texts" }
 };
-const DxEditingTexts = createConfigurationComponent({
+
+const DxEditingTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1018,9 +1156,15 @@ const DxEditingTexts = createConfigurationComponent({
     undeleteRow: String,
     validationCancelChanges: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxEditingTextsConfig);
+
+const DxEditingTexts = defineComponent(DxEditingTextsConfig);
+
 (DxEditingTexts as any).$_optionName = "texts";
-const DxEmailRule = createConfigurationComponent({
+
+const DxEmailRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1033,13 +1177,19 @@ const DxEmailRule = createConfigurationComponent({
     message: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxEmailRuleConfig);
+
+const DxEmailRule = defineComponent(DxEmailRuleConfig);
+
 (DxEmailRule as any).$_optionName = "validationRules";
 (DxEmailRule as any).$_isCollectionItem = true;
 (DxEmailRule as any).$_predefinedProps = {
   type: "email"
 };
-const DxField = createConfigurationComponent({
+
+const DxFieldConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1072,7 +1222,12 @@ const DxField = createConfigurationComponent({
     name: String,
     trueText: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFieldConfig);
+
+const DxField = defineComponent(DxFieldConfig);
+
 (DxField as any).$_optionName = "fields";
 (DxField as any).$_isCollectionItem = true;
 (DxField as any).$_expectedChildren = {
@@ -1080,7 +1235,8 @@ const DxField = createConfigurationComponent({
   format: { isCollectionItem: false, optionName: "format" },
   lookup: { isCollectionItem: false, optionName: "lookup" }
 };
-const DxFieldLookup = createConfigurationComponent({
+
+const DxFieldLookupConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1095,9 +1251,15 @@ const DxFieldLookup = createConfigurationComponent({
     displayExpr: [Function, String],
     valueExpr: [Function, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFieldLookupConfig);
+
+const DxFieldLookup = defineComponent(DxFieldLookupConfig);
+
 (DxFieldLookup as any).$_optionName = "lookup";
-const DxFilterBuilder = createConfigurationComponent({
+
+const DxFilterBuilderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1160,7 +1322,12 @@ const DxFilterBuilder = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFilterBuilderConfig);
+
+const DxFilterBuilder = defineComponent(DxFilterBuilderConfig);
+
 (DxFilterBuilder as any).$_optionName = "filterBuilder";
 (DxFilterBuilder as any).$_expectedChildren = {
   customOperation: { isCollectionItem: true, optionName: "customOperations" },
@@ -1168,7 +1335,8 @@ const DxFilterBuilder = createConfigurationComponent({
   filterOperationDescriptions: { isCollectionItem: false, optionName: "filterOperationDescriptions" },
   groupOperationDescriptions: { isCollectionItem: false, optionName: "groupOperationDescriptions" }
 };
-const DxFilterBuilderPopup = createConfigurationComponent({
+
+const DxFilterBuilderPopupConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1275,9 +1443,15 @@ const DxFilterBuilderPopup = createConfigurationComponent({
     width: [Function, Number, String],
     wrapperAttr: {}
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFilterBuilderPopupConfig);
+
+const DxFilterBuilderPopup = defineComponent(DxFilterBuilderPopupConfig);
+
 (DxFilterBuilderPopup as any).$_optionName = "filterBuilderPopup";
-const DxFilterOperationDescriptions = createConfigurationComponent({
+
+const DxFilterOperationDescriptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1310,9 +1484,15 @@ const DxFilterOperationDescriptions = createConfigurationComponent({
     notEqual: String,
     startsWith: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFilterOperationDescriptionsConfig);
+
+const DxFilterOperationDescriptions = defineComponent(DxFilterOperationDescriptionsConfig);
+
 (DxFilterOperationDescriptions as any).$_optionName = "filterOperationDescriptions";
-const DxFilterPanel = createConfigurationComponent({
+
+const DxFilterPanelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1327,13 +1507,19 @@ const DxFilterPanel = createConfigurationComponent({
     texts: Object,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFilterPanelConfig);
+
+const DxFilterPanel = defineComponent(DxFilterPanelConfig);
+
 (DxFilterPanel as any).$_optionName = "filterPanel";
 (DxFilterPanel as any).$_expectedChildren = {
   filterPanelTexts: { isCollectionItem: false, optionName: "texts" },
   texts: { isCollectionItem: false, optionName: "texts" }
 };
-const DxFilterPanelTexts = createConfigurationComponent({
+
+const DxFilterPanelTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1346,9 +1532,15 @@ const DxFilterPanelTexts = createConfigurationComponent({
     createFilter: String,
     filterEnabledHint: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFilterPanelTextsConfig);
+
+const DxFilterPanelTexts = defineComponent(DxFilterPanelTextsConfig);
+
 (DxFilterPanelTexts as any).$_optionName = "texts";
-const DxFilterRow = createConfigurationComponent({
+
+const DxFilterRowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1373,12 +1565,18 @@ const DxFilterRow = createConfigurationComponent({
     showOperationChooser: Boolean,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFilterRowConfig);
+
+const DxFilterRow = defineComponent(DxFilterRowConfig);
+
 (DxFilterRow as any).$_optionName = "filterRow";
 (DxFilterRow as any).$_expectedChildren = {
   operationDescriptions: { isCollectionItem: false, optionName: "operationDescriptions" }
 };
-const DxForm = createConfigurationComponent({
+
+const DxFormConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1467,12 +1665,18 @@ const DxForm = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormConfig);
+
+const DxForm = defineComponent(DxFormConfig);
+
 (DxForm as any).$_optionName = "form";
 (DxForm as any).$_expectedChildren = {
   colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" }
 };
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1491,9 +1695,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxFormItem = createConfigurationComponent({
+
+const DxFormItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1528,7 +1738,12 @@ const DxFormItem = createConfigurationComponent({
     visible: Boolean,
     visibleIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormItemConfig);
+
+const DxFormItem = defineComponent(DxFormItemConfig);
+
 (DxFormItem as any).$_optionName = "formItem";
 (DxFormItem as any).$_expectedChildren = {
   AsyncRule: { isCollectionItem: true, optionName: "validationRules" },
@@ -1543,7 +1758,8 @@ const DxFormItem = createConfigurationComponent({
   StringLengthRule: { isCollectionItem: true, optionName: "validationRules" },
   validationRule: { isCollectionItem: true, optionName: "validationRules" }
 };
-const DxFrom = createConfigurationComponent({
+
+const DxFromConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1560,12 +1776,18 @@ const DxFrom = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFromConfig);
+
+const DxFrom = defineComponent(DxFromConfig);
+
 (DxFrom as any).$_optionName = "from";
 (DxFrom as any).$_expectedChildren = {
   position: { isCollectionItem: false, optionName: "position" }
 };
-const DxGroupOperationDescriptions = createConfigurationComponent({
+
+const DxGroupOperationDescriptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1580,9 +1802,15 @@ const DxGroupOperationDescriptions = createConfigurationComponent({
     notOr: String,
     or: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGroupOperationDescriptionsConfig);
+
+const DxGroupOperationDescriptions = defineComponent(DxGroupOperationDescriptionsConfig);
+
 (DxGroupOperationDescriptions as any).$_optionName = "groupOperationDescriptions";
-const DxHeaderFilter = createConfigurationComponent({
+
+const DxHeaderFilterConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1611,9 +1839,15 @@ const DxHeaderFilter = createConfigurationComponent({
     visible: Boolean,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHeaderFilterConfig);
+
+const DxHeaderFilter = defineComponent(DxHeaderFilterConfig);
+
 (DxHeaderFilter as any).$_optionName = "headerFilter";
-const DxHide = createConfigurationComponent({
+
+const DxHideConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1640,13 +1874,19 @@ const DxHide = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHideConfig);
+
+const DxHide = defineComponent(DxHideConfig);
+
 (DxHide as any).$_optionName = "hide";
 (DxHide as any).$_expectedChildren = {
   from: { isCollectionItem: false, optionName: "from" },
   to: { isCollectionItem: false, optionName: "to" }
 };
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1679,10 +1919,16 @@ const DxItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
-const DxKeyboardNavigation = createConfigurationComponent({
+
+const DxKeyboardNavigationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1697,9 +1943,15 @@ const DxKeyboardNavigation = createConfigurationComponent({
     enterKeyAction: String,
     enterKeyDirection: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxKeyboardNavigationConfig);
+
+const DxKeyboardNavigation = defineComponent(DxKeyboardNavigationConfig);
+
 (DxKeyboardNavigation as any).$_optionName = "keyboardNavigation";
-const DxLabel = createConfigurationComponent({
+
+const DxLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1718,9 +1970,15 @@ const DxLabel = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelConfig);
+
+const DxLabel = defineComponent(DxLabelConfig);
+
 (DxLabel as any).$_optionName = "label";
-const DxLoadPanel = createConfigurationComponent({
+
+const DxLoadPanelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1745,9 +2003,15 @@ const DxLoadPanel = createConfigurationComponent({
     text: String,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLoadPanelConfig);
+
+const DxLoadPanel = defineComponent(DxLoadPanelConfig);
+
 (DxLoadPanel as any).$_optionName = "loadPanel";
-const DxLookup = createConfigurationComponent({
+
+const DxLookupConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1764,9 +2028,15 @@ const DxLookup = createConfigurationComponent({
     displayExpr: [Function, String],
     valueExpr: [String, Function]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLookupConfig);
+
+const DxLookup = defineComponent(DxLookupConfig);
+
 (DxLookup as any).$_optionName = "lookup";
-const DxMy = createConfigurationComponent({
+
+const DxMyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1777,9 +2047,15 @@ const DxMy = createConfigurationComponent({
     x: String,
     y: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMyConfig);
+
+const DxMy = defineComponent(DxMyConfig);
+
 (DxMy as any).$_optionName = "my";
-const DxNumericRule = createConfigurationComponent({
+
+const DxNumericRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1792,13 +2068,19 @@ const DxNumericRule = createConfigurationComponent({
     message: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxNumericRuleConfig);
+
+const DxNumericRule = defineComponent(DxNumericRuleConfig);
+
 (DxNumericRule as any).$_optionName = "validationRules";
 (DxNumericRule as any).$_isCollectionItem = true;
 (DxNumericRule as any).$_predefinedProps = {
   type: "numeric"
 };
-const DxOffset = createConfigurationComponent({
+
+const DxOffsetConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1809,9 +2091,15 @@ const DxOffset = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOffsetConfig);
+
+const DxOffset = defineComponent(DxOffsetConfig);
+
 (DxOffset as any).$_optionName = "offset";
-const DxOperationDescriptions = createConfigurationComponent({
+
+const DxOperationDescriptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1840,9 +2128,15 @@ const DxOperationDescriptions = createConfigurationComponent({
     notEqual: String,
     startsWith: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOperationDescriptionsConfig);
+
+const DxOperationDescriptions = defineComponent(DxOperationDescriptionsConfig);
+
 (DxOperationDescriptions as any).$_optionName = "operationDescriptions";
-const DxPager = createConfigurationComponent({
+
+const DxPagerConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1865,9 +2159,15 @@ const DxPager = createConfigurationComponent({
     showPageSizeSelector: Boolean,
     visible: [Boolean, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPagerConfig);
+
+const DxPager = defineComponent(DxPagerConfig);
+
 (DxPager as any).$_optionName = "pager";
-const DxPaging = createConfigurationComponent({
+
+const DxPagingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1880,9 +2180,15 @@ const DxPaging = createConfigurationComponent({
     pageIndex: Number,
     pageSize: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPagingConfig);
+
+const DxPaging = defineComponent(DxPagingConfig);
+
 (DxPaging as any).$_optionName = "paging";
-const DxPatternRule = createConfigurationComponent({
+
+const DxPatternRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -1897,13 +2203,19 @@ const DxPatternRule = createConfigurationComponent({
     pattern: [RegExp, String],
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPatternRuleConfig);
+
+const DxPatternRule = defineComponent(DxPatternRuleConfig);
+
 (DxPatternRule as any).$_optionName = "validationRules";
 (DxPatternRule as any).$_isCollectionItem = true;
 (DxPatternRule as any).$_predefinedProps = {
   type: "pattern"
 };
-const DxPopup = createConfigurationComponent({
+
+const DxPopupConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2010,14 +2322,20 @@ const DxPopup = createConfigurationComponent({
     width: [Function, Number, String],
     wrapperAttr: {}
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPopupConfig);
+
+const DxPopup = defineComponent(DxPopupConfig);
+
 (DxPopup as any).$_optionName = "popup";
 (DxPopup as any).$_expectedChildren = {
   animation: { isCollectionItem: false, optionName: "animation" },
   position: { isCollectionItem: false, optionName: "position" },
   toolbarItem: { isCollectionItem: true, optionName: "toolbarItems" }
 };
-const DxPosition = createConfigurationComponent({
+
+const DxPositionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2038,9 +2356,15 @@ const DxPosition = createConfigurationComponent({
     of: {},
     offset: [Object, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPositionConfig);
+
+const DxPosition = defineComponent(DxPositionConfig);
+
 (DxPosition as any).$_optionName = "position";
-const DxRangeRule = createConfigurationComponent({
+
+const DxRangeRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2059,13 +2383,19 @@ const DxRangeRule = createConfigurationComponent({
     reevaluate: Boolean,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRangeRuleConfig);
+
+const DxRangeRule = defineComponent(DxRangeRuleConfig);
+
 (DxRangeRule as any).$_optionName = "validationRules";
 (DxRangeRule as any).$_isCollectionItem = true;
 (DxRangeRule as any).$_predefinedProps = {
   type: "range"
 };
-const DxRemoteOperations = createConfigurationComponent({
+
+const DxRemoteOperationsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2078,9 +2408,15 @@ const DxRemoteOperations = createConfigurationComponent({
     grouping: Boolean,
     sorting: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRemoteOperationsConfig);
+
+const DxRemoteOperations = defineComponent(DxRemoteOperationsConfig);
+
 (DxRemoteOperations as any).$_optionName = "remoteOperations";
-const DxRequiredRule = createConfigurationComponent({
+
+const DxRequiredRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2093,13 +2429,19 @@ const DxRequiredRule = createConfigurationComponent({
     trim: Boolean,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRequiredRuleConfig);
+
+const DxRequiredRule = defineComponent(DxRequiredRuleConfig);
+
 (DxRequiredRule as any).$_optionName = "validationRules";
 (DxRequiredRule as any).$_isCollectionItem = true;
 (DxRequiredRule as any).$_predefinedProps = {
   type: "required"
 };
-const DxRowDragging = createConfigurationComponent({
+
+const DxRowDraggingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2152,12 +2494,18 @@ const DxRowDragging = createConfigurationComponent({
     scrollSpeed: Number,
     showDragIcons: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRowDraggingConfig);
+
+const DxRowDragging = defineComponent(DxRowDraggingConfig);
+
 (DxRowDragging as any).$_optionName = "rowDragging";
 (DxRowDragging as any).$_expectedChildren = {
   cursorOffset: { isCollectionItem: false, optionName: "cursorOffset" }
 };
-const DxScrolling = createConfigurationComponent({
+
+const DxScrollingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2182,9 +2530,15 @@ const DxScrolling = createConfigurationComponent({
     showScrollbar: String,
     useNative: [Boolean, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxScrollingConfig);
+
+const DxScrolling = defineComponent(DxScrollingConfig);
+
 (DxScrolling as any).$_optionName = "scrolling";
-const DxSearch = createConfigurationComponent({
+
+const DxSearchConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2201,9 +2555,15 @@ const DxSearch = createConfigurationComponent({
     searchExpr: [Array, Function, String],
     timeout: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSearchConfig);
+
+const DxSearch = defineComponent(DxSearchConfig);
+
 (DxSearch as any).$_optionName = "search";
-const DxSearchPanel = createConfigurationComponent({
+
+const DxSearchPanelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2224,9 +2584,15 @@ const DxSearchPanel = createConfigurationComponent({
     visible: Boolean,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSearchPanelConfig);
+
+const DxSearchPanel = defineComponent(DxSearchPanelConfig);
+
 (DxSearchPanel as any).$_optionName = "searchPanel";
-const DxSelection = createConfigurationComponent({
+
+const DxSelectionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2241,9 +2607,15 @@ const DxSelection = createConfigurationComponent({
     recursive: Boolean,
     selectByClick: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSelectionConfig);
+
+const DxSelection = defineComponent(DxSelectionConfig);
+
 (DxSelection as any).$_optionName = "selection";
-const DxShow = createConfigurationComponent({
+
+const DxShowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2270,9 +2642,15 @@ const DxShow = createConfigurationComponent({
     to: Object,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShowConfig);
+
+const DxShow = defineComponent(DxShowConfig);
+
 (DxShow as any).$_optionName = "show";
-const DxSorting = createConfigurationComponent({
+
+const DxSortingConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2289,9 +2667,15 @@ const DxSorting = createConfigurationComponent({
     mode: String,
     showSortIndexes: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSortingConfig);
+
+const DxSorting = defineComponent(DxSortingConfig);
+
 (DxSorting as any).$_optionName = "sorting";
-const DxStateStoring = createConfigurationComponent({
+
+const DxStateStoringConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2310,9 +2694,15 @@ const DxStateStoring = createConfigurationComponent({
     storageKey: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxStateStoringConfig);
+
+const DxStateStoring = defineComponent(DxStateStoringConfig);
+
 (DxStateStoring as any).$_optionName = "stateStoring";
-const DxStringLengthRule = createConfigurationComponent({
+
+const DxStringLengthRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2331,13 +2721,19 @@ const DxStringLengthRule = createConfigurationComponent({
     trim: Boolean,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxStringLengthRuleConfig);
+
+const DxStringLengthRule = defineComponent(DxStringLengthRuleConfig);
+
 (DxStringLengthRule as any).$_optionName = "validationRules";
 (DxStringLengthRule as any).$_isCollectionItem = true;
 (DxStringLengthRule as any).$_predefinedProps = {
   type: "stringLength"
 };
-const DxTexts = createConfigurationComponent({
+
+const DxTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2388,9 +2784,15 @@ const DxTexts = createConfigurationComponent({
     unfix: String,
     validationCancelChanges: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTextsConfig);
+
+const DxTexts = defineComponent(DxTextsConfig);
+
 (DxTexts as any).$_optionName = "texts";
-const DxTo = createConfigurationComponent({
+
+const DxToConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2407,9 +2809,15 @@ const DxTo = createConfigurationComponent({
     scale: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToConfig);
+
+const DxTo = defineComponent(DxToConfig);
+
 (DxTo as any).$_optionName = "to";
-const DxToolbar = createConfigurationComponent({
+
+const DxToolbarConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2422,12 +2830,18 @@ const DxToolbar = createConfigurationComponent({
     items: Array,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarConfig);
+
+const DxToolbar = defineComponent(DxToolbarConfig);
+
 (DxToolbar as any).$_optionName = "toolbar";
 (DxToolbar as any).$_expectedChildren = {
   item: { isCollectionItem: true, optionName: "items" }
 };
-const DxToolbarItem = createConfigurationComponent({
+
+const DxToolbarItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2460,10 +2874,16 @@ const DxToolbarItem = createConfigurationComponent({
     visible: Boolean,
     widget: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxToolbarItemConfig);
+
+const DxToolbarItem = defineComponent(DxToolbarItemConfig);
+
 (DxToolbarItem as any).$_optionName = "toolbarItems";
 (DxToolbarItem as any).$_isCollectionItem = true;
-const DxTreeListHeaderFilter = createConfigurationComponent({
+
+const DxTreeListHeaderFilterConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2486,7 +2906,12 @@ const DxTreeListHeaderFilter = createConfigurationComponent({
     visible: Boolean,
     width: [Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTreeListHeaderFilterConfig);
+
+const DxTreeListHeaderFilter = defineComponent(DxTreeListHeaderFilterConfig);
+
 (DxTreeListHeaderFilter as any).$_optionName = "headerFilter";
 (DxTreeListHeaderFilter as any).$_expectedChildren = {
   search: { isCollectionItem: false, optionName: "search" },
@@ -2494,7 +2919,8 @@ const DxTreeListHeaderFilter = createConfigurationComponent({
   treeListHeaderFilterSearch: { isCollectionItem: false, optionName: "search" },
   treeListHeaderFilterTexts: { isCollectionItem: false, optionName: "texts" }
 };
-const DxTreeListHeaderFilterSearch = createConfigurationComponent({
+
+const DxTreeListHeaderFilterSearchConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2509,9 +2935,15 @@ const DxTreeListHeaderFilterSearch = createConfigurationComponent({
     mode: String,
     timeout: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTreeListHeaderFilterSearchConfig);
+
+const DxTreeListHeaderFilterSearch = defineComponent(DxTreeListHeaderFilterSearchConfig);
+
 (DxTreeListHeaderFilterSearch as any).$_optionName = "search";
-const DxTreeListHeaderFilterTexts = createConfigurationComponent({
+
+const DxTreeListHeaderFilterTextsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2524,9 +2956,15 @@ const DxTreeListHeaderFilterTexts = createConfigurationComponent({
     emptyValue: String,
     ok: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTreeListHeaderFilterTextsConfig);
+
+const DxTreeListHeaderFilterTexts = defineComponent(DxTreeListHeaderFilterTextsConfig);
+
 (DxTreeListHeaderFilterTexts as any).$_optionName = "texts";
-const DxTreeListSelection = createConfigurationComponent({
+
+const DxTreeListSelectionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2539,9 +2977,15 @@ const DxTreeListSelection = createConfigurationComponent({
     mode: String,
     recursive: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTreeListSelectionConfig);
+
+const DxTreeListSelection = defineComponent(DxTreeListSelectionConfig);
+
 (DxTreeListSelection as any).$_optionName = "selection";
-const DxValidationRule = createConfigurationComponent({
+
+const DxValidationRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -2570,13 +3014,19 @@ const DxValidationRule = createConfigurationComponent({
     type: String,
     validationCallback: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxValidationRuleConfig);
+
+const DxValidationRule = defineComponent(DxValidationRuleConfig);
+
 (DxValidationRule as any).$_optionName = "validationRules";
 (DxValidationRule as any).$_isCollectionItem = true;
 (DxValidationRule as any).$_predefinedProps = {
   type: "required"
 };
 
+
 export default DxTreeList;
 export {
   DxTreeList,
diff --git a/packages/devextreme-vue/src/tree-map.ts b/packages/devextreme-vue/src/tree-map.ts
index 54a8d49d0f8f..90d791c680f6 100644
--- a/packages/devextreme-vue/src/tree-map.ts
+++ b/packages/devextreme-vue/src/tree-map.ts
@@ -1,6 +1,6 @@
 import TreeMap, { Properties } from "devextreme/viz/tree_map";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "childrenField" |
@@ -49,7 +49,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxTreeMap extends AccessibleOptions {
   readonly instance?: TreeMap;
 }
-const DxTreeMap = createComponent({
+
+const componentConfig = {
   props: {
     childrenField: String,
     colorField: String,
@@ -157,9 +158,14 @@ const DxTreeMap = createComponent({
       tooltip: { isCollectionItem: false, optionName: "tooltip" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxTreeMap = defineComponent(componentConfig);
 
-const DxBorder = createConfigurationComponent({
+
+const DxBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -176,9 +182,15 @@ const DxBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBorderConfig);
+
+const DxBorder = defineComponent(DxBorderConfig);
+
 (DxBorder as any).$_optionName = "border";
-const DxColorizer = createConfigurationComponent({
+
+const DxColorizerConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -197,9 +209,15 @@ const DxColorizer = createConfigurationComponent({
     range: Array,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxColorizerConfig);
+
+const DxColorizer = defineComponent(DxColorizerConfig);
+
 (DxColorizer as any).$_optionName = "colorizer";
-const DxExport = createConfigurationComponent({
+
+const DxExportConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -220,9 +238,15 @@ const DxExport = createConfigurationComponent({
     printingEnabled: Boolean,
     svgToCanvas: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxExportConfig);
+
+const DxExport = defineComponent(DxExportConfig);
+
 (DxExport as any).$_optionName = "export";
-const DxFont = createConfigurationComponent({
+
+const DxFontConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -239,9 +263,15 @@ const DxFont = createConfigurationComponent({
     size: [Number, String],
     weight: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFontConfig);
+
+const DxFont = defineComponent(DxFontConfig);
+
 (DxFont as any).$_optionName = "font";
-const DxFormat = createConfigurationComponent({
+
+const DxFormatConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -260,9 +290,15 @@ const DxFormat = createConfigurationComponent({
     type: String,
     useCurrencyAccountingStyle: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFormatConfig);
+
+const DxFormat = defineComponent(DxFormatConfig);
+
 (DxFormat as any).$_optionName = "format";
-const DxGroup = createConfigurationComponent({
+
+const DxGroupConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -285,7 +321,12 @@ const DxGroup = createConfigurationComponent({
     padding: Number,
     selectionStyle: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGroupConfig);
+
+const DxGroup = defineComponent(DxGroupConfig);
+
 (DxGroup as any).$_optionName = "group";
 (DxGroup as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -295,7 +336,8 @@ const DxGroup = createConfigurationComponent({
   selectionStyle: { isCollectionItem: false, optionName: "selectionStyle" },
   treeMapborder: { isCollectionItem: false, optionName: "border" }
 };
-const DxGroupLabel = createConfigurationComponent({
+
+const DxGroupLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -308,12 +350,18 @@ const DxGroupLabel = createConfigurationComponent({
     textOverflow: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxGroupLabelConfig);
+
+const DxGroupLabel = defineComponent(DxGroupLabelConfig);
+
 (DxGroupLabel as any).$_optionName = "label";
 (DxGroupLabel as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxHoverStyle = createConfigurationComponent({
+
+const DxHoverStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -324,9 +372,15 @@ const DxHoverStyle = createConfigurationComponent({
     border: Object,
     color: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxHoverStyleConfig);
+
+const DxHoverStyle = defineComponent(DxHoverStyleConfig);
+
 (DxHoverStyle as any).$_optionName = "hoverStyle";
-const DxLabel = createConfigurationComponent({
+
+const DxLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -341,9 +395,15 @@ const DxLabel = createConfigurationComponent({
     visible: Boolean,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelConfig);
+
+const DxLabel = defineComponent(DxLabelConfig);
+
 (DxLabel as any).$_optionName = "label";
-const DxLoadingIndicator = createConfigurationComponent({
+
+const DxLoadingIndicatorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -360,12 +420,18 @@ const DxLoadingIndicator = createConfigurationComponent({
     show: Boolean,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLoadingIndicatorConfig);
+
+const DxLoadingIndicator = defineComponent(DxLoadingIndicatorConfig);
+
 (DxLoadingIndicator as any).$_optionName = "loadingIndicator";
 (DxLoadingIndicator as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxMargin = createConfigurationComponent({
+
+const DxMarginConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -380,9 +446,15 @@ const DxMargin = createConfigurationComponent({
     right: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMarginConfig);
+
+const DxMargin = defineComponent(DxMarginConfig);
+
 (DxMargin as any).$_optionName = "margin";
-const DxSelectionStyle = createConfigurationComponent({
+
+const DxSelectionStyleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -393,9 +465,15 @@ const DxSelectionStyle = createConfigurationComponent({
     border: Object,
     color: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSelectionStyleConfig);
+
+const DxSelectionStyle = defineComponent(DxSelectionStyleConfig);
+
 (DxSelectionStyle as any).$_optionName = "selectionStyle";
-const DxShadow = createConfigurationComponent({
+
+const DxShadowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -412,9 +490,15 @@ const DxShadow = createConfigurationComponent({
     offsetY: Number,
     opacity: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShadowConfig);
+
+const DxShadow = defineComponent(DxShadowConfig);
+
 (DxShadow as any).$_optionName = "shadow";
-const DxSize = createConfigurationComponent({
+
+const DxSizeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -425,9 +509,15 @@ const DxSize = createConfigurationComponent({
     height: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSizeConfig);
+
+const DxSize = defineComponent(DxSizeConfig);
+
 (DxSize as any).$_optionName = "size";
-const DxSubtitle = createConfigurationComponent({
+
+const DxSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -444,12 +534,18 @@ const DxSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSubtitleConfig);
+
+const DxSubtitle = defineComponent(DxSubtitleConfig);
+
 (DxSubtitle as any).$_optionName = "subtitle";
 (DxSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxTile = createConfigurationComponent({
+
+const DxTileConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -466,7 +562,12 @@ const DxTile = createConfigurationComponent({
     label: Object,
     selectionStyle: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTileConfig);
+
+const DxTile = defineComponent(DxTileConfig);
+
 (DxTile as any).$_optionName = "tile";
 (DxTile as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -476,7 +577,8 @@ const DxTile = createConfigurationComponent({
   tileLabel: { isCollectionItem: false, optionName: "label" },
   treeMapborder: { isCollectionItem: false, optionName: "border" }
 };
-const DxTileLabel = createConfigurationComponent({
+
+const DxTileLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -491,12 +593,18 @@ const DxTileLabel = createConfigurationComponent({
     visible: Boolean,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTileLabelConfig);
+
+const DxTileLabel = defineComponent(DxTileLabelConfig);
+
 (DxTileLabel as any).$_optionName = "label";
 (DxTileLabel as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxTitle = createConfigurationComponent({
+
+const DxTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -521,14 +629,20 @@ const DxTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTitleConfig);
+
+const DxTitle = defineComponent(DxTitleConfig);
+
 (DxTitle as any).$_optionName = "title";
 (DxTitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
   margin: { isCollectionItem: false, optionName: "margin" },
   subtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxTooltip = createConfigurationComponent({
+
+const DxTooltipConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -565,7 +679,12 @@ const DxTooltip = createConfigurationComponent({
     shadow: Object,
     zIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipConfig);
+
+const DxTooltip = defineComponent(DxTooltipConfig);
+
 (DxTooltip as any).$_optionName = "tooltip";
 (DxTooltip as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -574,7 +693,8 @@ const DxTooltip = createConfigurationComponent({
   shadow: { isCollectionItem: false, optionName: "shadow" },
   tooltipBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxTooltipBorder = createConfigurationComponent({
+
+const DxTooltipBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -591,9 +711,15 @@ const DxTooltipBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipBorderConfig);
+
+const DxTooltipBorder = defineComponent(DxTooltipBorderConfig);
+
 (DxTooltipBorder as any).$_optionName = "border";
-const DxTreeMapborder = createConfigurationComponent({
+
+const DxTreeMapborderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -604,9 +730,15 @@ const DxTreeMapborder = createConfigurationComponent({
     color: String,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTreeMapborderConfig);
+
+const DxTreeMapborder = defineComponent(DxTreeMapborderConfig);
+
 (DxTreeMapborder as any).$_optionName = "border";
 
+
 export default DxTreeMap;
 export {
   DxTreeMap,
diff --git a/packages/devextreme-vue/src/tree-view.ts b/packages/devextreme-vue/src/tree-view.ts
index 3251bcc10e81..030e525c6355 100644
--- a/packages/devextreme-vue/src/tree-view.ts
+++ b/packages/devextreme-vue/src/tree-view.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/tree_view";
 import TreeView, { Properties } from "devextreme/ui/tree_view";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "accessKey" |
@@ -70,7 +70,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxTreeView extends AccessibleOptions {
   readonly instance?: TreeView;
 }
-const DxTreeView = createComponent({
+
+const componentConfig = {
   props: {
     accessKey: String,
     activeStateEnabled: Boolean,
@@ -212,9 +213,14 @@ const DxTreeView = createComponent({
       searchEditorOptions: { isCollectionItem: false, optionName: "searchEditorOptions" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxTreeView = defineComponent(componentConfig);
 
-const DxButton = createConfigurationComponent({
+
+const DxButtonConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -227,13 +233,19 @@ const DxButton = createConfigurationComponent({
     name: String,
     options: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxButtonConfig);
+
+const DxButton = defineComponent(DxButtonConfig);
+
 (DxButton as any).$_optionName = "buttons";
 (DxButton as any).$_isCollectionItem = true;
 (DxButton as any).$_expectedChildren = {
   options: { isCollectionItem: false, optionName: "options" }
 };
-const DxItem = createConfigurationComponent({
+
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -264,10 +276,16 @@ const DxItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
-const DxOptions = createConfigurationComponent({
+
+const DxOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -324,9 +342,15 @@ const DxOptions = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxOptionsConfig);
+
+const DxOptions = defineComponent(DxOptionsConfig);
+
 (DxOptions as any).$_optionName = "options";
-const DxSearchEditorOptions = createConfigurationComponent({
+
+const DxSearchEditorOptionsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -445,12 +469,18 @@ const DxSearchEditorOptions = createConfigurationComponent({
     visible: Boolean,
     width: [Function, Number, String]
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSearchEditorOptionsConfig);
+
+const DxSearchEditorOptions = defineComponent(DxSearchEditorOptionsConfig);
+
 (DxSearchEditorOptions as any).$_optionName = "searchEditorOptions";
 (DxSearchEditorOptions as any).$_expectedChildren = {
   button: { isCollectionItem: true, optionName: "buttons" }
 };
 
+
 export default DxTreeView;
 export {
   DxTreeView,
diff --git a/packages/devextreme-vue/src/validation-group.ts b/packages/devextreme-vue/src/validation-group.ts
index 605080d47b65..152fd2018c40 100644
--- a/packages/devextreme-vue/src/validation-group.ts
+++ b/packages/devextreme-vue/src/validation-group.ts
@@ -1,5 +1,6 @@
 import ValidationGroup, { Properties } from "devextreme/ui/validation_group";
-import { createComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "elementAttr" |
@@ -13,7 +14,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxValidationGroup extends AccessibleOptions {
   readonly instance?: ValidationGroup;
 }
-const DxValidationGroup = createComponent({
+
+const componentConfig = {
   props: {
     elementAttr: Object,
     height: [Function, Number, String],
@@ -41,7 +43,11 @@ const DxValidationGroup = createComponent({
     (this as any).$_WidgetClass = ValidationGroup;
     (this as any).$_hasAsyncTemplate = true;
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxValidationGroup = defineComponent(componentConfig);
 
 export default DxValidationGroup;
 export {
diff --git a/packages/devextreme-vue/src/validation-summary.ts b/packages/devextreme-vue/src/validation-summary.ts
index 26b78848349f..e774c925b6ea 100644
--- a/packages/devextreme-vue/src/validation-summary.ts
+++ b/packages/devextreme-vue/src/validation-summary.ts
@@ -1,7 +1,7 @@
 export { ExplicitTypes } from "devextreme/ui/validation_summary";
 import ValidationSummary, { Properties } from "devextreme/ui/validation_summary";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "elementAttr" |
@@ -19,7 +19,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxValidationSummary extends AccessibleOptions {
   readonly instance?: ValidationSummary;
 }
-const DxValidationSummary = createComponent({
+
+const componentConfig = {
   props: {
     elementAttr: Object,
     hoverStateEnabled: Boolean,
@@ -58,9 +59,14 @@ const DxValidationSummary = createComponent({
       item: { isCollectionItem: true, optionName: "items" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxValidationSummary = defineComponent(componentConfig);
+
 
-const DxItem = createConfigurationComponent({
+const DxItemConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -77,10 +83,16 @@ const DxItem = createConfigurationComponent({
     text: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxItemConfig);
+
+const DxItem = defineComponent(DxItemConfig);
+
 (DxItem as any).$_optionName = "items";
 (DxItem as any).$_isCollectionItem = true;
 
+
 export default DxValidationSummary;
 export {
   DxValidationSummary,
diff --git a/packages/devextreme-vue/src/validator.ts b/packages/devextreme-vue/src/validator.ts
index a3826363d245..b851351879e9 100644
--- a/packages/devextreme-vue/src/validator.ts
+++ b/packages/devextreme-vue/src/validator.ts
@@ -1,6 +1,6 @@
 import Validator, { Properties } from "devextreme/ui/validator";
-import { createExtensionComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareExtensionComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "adapter" |
@@ -19,7 +19,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxValidator extends AccessibleOptions {
   readonly instance?: Validator;
 }
-const DxValidator = createExtensionComponent({
+
+const componentConfig = {
   props: {
     adapter: Object,
     elementAttr: Object,
@@ -70,9 +71,14 @@ const DxValidator = createExtensionComponent({
       validationRule: { isCollectionItem: true, optionName: "validationRules" }
     };
   }
-});
+};
+
+prepareExtensionComponentConfig(componentConfig);
+
+const DxValidator = defineComponent(componentConfig);
 
-const DxAdapter = createConfigurationComponent({
+
+const DxAdapterConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -91,9 +97,15 @@ const DxAdapter = createConfigurationComponent({
     reset: Function,
     validationRequestsCallbacks: Array
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAdapterConfig);
+
+const DxAdapter = defineComponent(DxAdapterConfig);
+
 (DxAdapter as any).$_optionName = "adapter";
-const DxAsyncRule = createConfigurationComponent({
+
+const DxAsyncRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -110,13 +122,19 @@ const DxAsyncRule = createConfigurationComponent({
     type: String,
     validationCallback: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAsyncRuleConfig);
+
+const DxAsyncRule = defineComponent(DxAsyncRuleConfig);
+
 (DxAsyncRule as any).$_optionName = "validationRules";
 (DxAsyncRule as any).$_isCollectionItem = true;
 (DxAsyncRule as any).$_predefinedProps = {
   type: "async"
 };
-const DxCompareRule = createConfigurationComponent({
+
+const DxCompareRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -133,13 +151,19 @@ const DxCompareRule = createConfigurationComponent({
     message: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCompareRuleConfig);
+
+const DxCompareRule = defineComponent(DxCompareRuleConfig);
+
 (DxCompareRule as any).$_optionName = "validationRules";
 (DxCompareRule as any).$_isCollectionItem = true;
 (DxCompareRule as any).$_predefinedProps = {
   type: "compare"
 };
-const DxCustomRule = createConfigurationComponent({
+
+const DxCustomRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -156,13 +180,19 @@ const DxCustomRule = createConfigurationComponent({
     type: String,
     validationCallback: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCustomRuleConfig);
+
+const DxCustomRule = defineComponent(DxCustomRuleConfig);
+
 (DxCustomRule as any).$_optionName = "validationRules";
 (DxCustomRule as any).$_isCollectionItem = true;
 (DxCustomRule as any).$_predefinedProps = {
   type: "custom"
 };
-const DxEmailRule = createConfigurationComponent({
+
+const DxEmailRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -175,13 +205,19 @@ const DxEmailRule = createConfigurationComponent({
     message: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxEmailRuleConfig);
+
+const DxEmailRule = defineComponent(DxEmailRuleConfig);
+
 (DxEmailRule as any).$_optionName = "validationRules";
 (DxEmailRule as any).$_isCollectionItem = true;
 (DxEmailRule as any).$_predefinedProps = {
   type: "email"
 };
-const DxNumericRule = createConfigurationComponent({
+
+const DxNumericRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -194,13 +230,19 @@ const DxNumericRule = createConfigurationComponent({
     message: String,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxNumericRuleConfig);
+
+const DxNumericRule = defineComponent(DxNumericRuleConfig);
+
 (DxNumericRule as any).$_optionName = "validationRules";
 (DxNumericRule as any).$_isCollectionItem = true;
 (DxNumericRule as any).$_predefinedProps = {
   type: "numeric"
 };
-const DxPatternRule = createConfigurationComponent({
+
+const DxPatternRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -215,13 +257,19 @@ const DxPatternRule = createConfigurationComponent({
     pattern: [RegExp, String],
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxPatternRuleConfig);
+
+const DxPatternRule = defineComponent(DxPatternRuleConfig);
+
 (DxPatternRule as any).$_optionName = "validationRules";
 (DxPatternRule as any).$_isCollectionItem = true;
 (DxPatternRule as any).$_predefinedProps = {
   type: "pattern"
 };
-const DxRangeRule = createConfigurationComponent({
+
+const DxRangeRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -240,13 +288,19 @@ const DxRangeRule = createConfigurationComponent({
     reevaluate: Boolean,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRangeRuleConfig);
+
+const DxRangeRule = defineComponent(DxRangeRuleConfig);
+
 (DxRangeRule as any).$_optionName = "validationRules";
 (DxRangeRule as any).$_isCollectionItem = true;
 (DxRangeRule as any).$_predefinedProps = {
   type: "range"
 };
-const DxRequiredRule = createConfigurationComponent({
+
+const DxRequiredRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -259,13 +313,19 @@ const DxRequiredRule = createConfigurationComponent({
     trim: Boolean,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxRequiredRuleConfig);
+
+const DxRequiredRule = defineComponent(DxRequiredRuleConfig);
+
 (DxRequiredRule as any).$_optionName = "validationRules";
 (DxRequiredRule as any).$_isCollectionItem = true;
 (DxRequiredRule as any).$_predefinedProps = {
   type: "required"
 };
-const DxStringLengthRule = createConfigurationComponent({
+
+const DxStringLengthRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -284,13 +344,19 @@ const DxStringLengthRule = createConfigurationComponent({
     trim: Boolean,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxStringLengthRuleConfig);
+
+const DxStringLengthRule = defineComponent(DxStringLengthRuleConfig);
+
 (DxStringLengthRule as any).$_optionName = "validationRules";
 (DxStringLengthRule as any).$_isCollectionItem = true;
 (DxStringLengthRule as any).$_predefinedProps = {
   type: "stringLength"
 };
-const DxValidationRule = createConfigurationComponent({
+
+const DxValidationRuleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -319,13 +385,19 @@ const DxValidationRule = createConfigurationComponent({
     type: String,
     validationCallback: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxValidationRuleConfig);
+
+const DxValidationRule = defineComponent(DxValidationRuleConfig);
+
 (DxValidationRule as any).$_optionName = "validationRules";
 (DxValidationRule as any).$_isCollectionItem = true;
 (DxValidationRule as any).$_predefinedProps = {
   type: "required"
 };
 
+
 export default DxValidator;
 export {
   DxValidator,
diff --git a/packages/devextreme-vue/src/vector-map.ts b/packages/devextreme-vue/src/vector-map.ts
index 838a9a629204..ca458366ba42 100644
--- a/packages/devextreme-vue/src/vector-map.ts
+++ b/packages/devextreme-vue/src/vector-map.ts
@@ -1,6 +1,6 @@
 import VectorMap, { Properties } from "devextreme/viz/vector_map";
-import { createComponent } from "./core/index";
-import { createConfigurationComponent } from "./core/index";
+import { defineComponent } from "vue";
+import { prepareComponentConfig, prepareConfigurationComponentConfig } from "./core/strategy/vue3";
 
 type AccessibleOptions = Pick<Properties,
   "annotations" |
@@ -49,7 +49,8 @@ type AccessibleOptions = Pick<Properties,
 interface DxVectorMap extends AccessibleOptions {
   readonly instance?: VectorMap;
 }
-const DxVectorMap = createComponent({
+
+const componentConfig = {
   props: {
     annotations: Array,
     background: Object,
@@ -162,9 +163,14 @@ const DxVectorMap = createComponent({
       vectorMapTitle: { isCollectionItem: false, optionName: "title" }
     };
   }
-});
+};
+
+prepareComponentConfig(componentConfig);
+
+const DxVectorMap = defineComponent(componentConfig);
+
 
-const DxAnnotation = createConfigurationComponent({
+const DxAnnotationConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -229,7 +235,12 @@ const DxAnnotation = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnnotationConfig);
+
+const DxAnnotation = defineComponent(DxAnnotationConfig);
+
 (DxAnnotation as any).$_optionName = "annotations";
 (DxAnnotation as any).$_isCollectionItem = true;
 (DxAnnotation as any).$_expectedChildren = {
@@ -239,7 +250,8 @@ const DxAnnotation = createConfigurationComponent({
   image: { isCollectionItem: false, optionName: "image" },
   shadow: { isCollectionItem: false, optionName: "shadow" }
 };
-const DxAnnotationBorder = createConfigurationComponent({
+
+const DxAnnotationBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -258,9 +270,15 @@ const DxAnnotationBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxAnnotationBorderConfig);
+
+const DxAnnotationBorder = defineComponent(DxAnnotationBorderConfig);
+
 (DxAnnotationBorder as any).$_optionName = "border";
-const DxBackground = createConfigurationComponent({
+
+const DxBackgroundConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -271,9 +289,15 @@ const DxBackground = createConfigurationComponent({
     borderColor: String,
     color: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBackgroundConfig);
+
+const DxBackground = defineComponent(DxBackgroundConfig);
+
 (DxBackground as any).$_optionName = "background";
-const DxBorder = createConfigurationComponent({
+
+const DxBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -292,9 +316,15 @@ const DxBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxBorderConfig);
+
+const DxBorder = defineComponent(DxBorderConfig);
+
 (DxBorder as any).$_optionName = "border";
-const DxCommonAnnotationSettings = createConfigurationComponent({
+
+const DxCommonAnnotationSettingsConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -357,9 +387,15 @@ const DxCommonAnnotationSettings = createConfigurationComponent({
     x: Number,
     y: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxCommonAnnotationSettingsConfig);
+
+const DxCommonAnnotationSettings = defineComponent(DxCommonAnnotationSettingsConfig);
+
 (DxCommonAnnotationSettings as any).$_optionName = "commonAnnotationSettings";
-const DxControlBar = createConfigurationComponent({
+
+const DxControlBarConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -384,9 +420,15 @@ const DxControlBar = createConfigurationComponent({
     verticalAlignment: String,
     zoomVisible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxControlBarConfig);
+
+const DxControlBar = defineComponent(DxControlBarConfig);
+
 (DxControlBar as any).$_optionName = "controlBar";
-const DxExport = createConfigurationComponent({
+
+const DxExportConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -407,9 +449,15 @@ const DxExport = createConfigurationComponent({
     printingEnabled: Boolean,
     svgToCanvas: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxExportConfig);
+
+const DxExport = defineComponent(DxExportConfig);
+
 (DxExport as any).$_optionName = "export";
-const DxFont = createConfigurationComponent({
+
+const DxFontConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -426,9 +474,15 @@ const DxFont = createConfigurationComponent({
     size: [Number, String],
     weight: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxFontConfig);
+
+const DxFont = defineComponent(DxFontConfig);
+
 (DxFont as any).$_optionName = "font";
-const DxImage = createConfigurationComponent({
+
+const DxImageConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -441,9 +495,15 @@ const DxImage = createConfigurationComponent({
     url: String,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxImageConfig);
+
+const DxImage = defineComponent(DxImageConfig);
+
 (DxImage as any).$_optionName = "image";
-const DxLabel = createConfigurationComponent({
+
+const DxLabelConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -456,12 +516,18 @@ const DxLabel = createConfigurationComponent({
     enabled: Boolean,
     font: Object
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLabelConfig);
+
+const DxLabel = defineComponent(DxLabelConfig);
+
 (DxLabel as any).$_optionName = "label";
 (DxLabel as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxLayer = createConfigurationComponent({
+
+const DxLayerConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -526,13 +592,19 @@ const DxLayer = createConfigurationComponent({
     sizeGroups: Array,
     type: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLayerConfig);
+
+const DxLayer = defineComponent(DxLayerConfig);
+
 (DxLayer as any).$_optionName = "layers";
 (DxLayer as any).$_isCollectionItem = true;
 (DxLayer as any).$_expectedChildren = {
   label: { isCollectionItem: false, optionName: "label" }
 };
-const DxLegend = createConfigurationComponent({
+
+const DxLegendConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -589,7 +661,12 @@ const DxLegend = createConfigurationComponent({
     verticalAlignment: String,
     visible: Boolean
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendConfig);
+
+const DxLegend = defineComponent(DxLegendConfig);
+
 (DxLegend as any).$_optionName = "legends";
 (DxLegend as any).$_isCollectionItem = true;
 (DxLegend as any).$_expectedChildren = {
@@ -601,7 +678,8 @@ const DxLegend = createConfigurationComponent({
   source: { isCollectionItem: false, optionName: "source" },
   title: { isCollectionItem: false, optionName: "title" }
 };
-const DxLegendTitle = createConfigurationComponent({
+
+const DxLegendTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -622,7 +700,12 @@ const DxLegendTitle = createConfigurationComponent({
     text: String,
     verticalAlignment: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendTitleConfig);
+
+const DxLegendTitle = defineComponent(DxLegendTitleConfig);
+
 (DxLegendTitle as any).$_optionName = "title";
 (DxLegendTitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
@@ -630,7 +713,8 @@ const DxLegendTitle = createConfigurationComponent({
   margin: { isCollectionItem: false, optionName: "margin" },
   subtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxLegendTitleSubtitle = createConfigurationComponent({
+
+const DxLegendTitleSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -643,12 +727,18 @@ const DxLegendTitleSubtitle = createConfigurationComponent({
     offset: Number,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLegendTitleSubtitleConfig);
+
+const DxLegendTitleSubtitle = defineComponent(DxLegendTitleSubtitleConfig);
+
 (DxLegendTitleSubtitle as any).$_optionName = "subtitle";
 (DxLegendTitleSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxLoadingIndicator = createConfigurationComponent({
+
+const DxLoadingIndicatorConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -665,12 +755,18 @@ const DxLoadingIndicator = createConfigurationComponent({
     show: Boolean,
     text: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxLoadingIndicatorConfig);
+
+const DxLoadingIndicator = defineComponent(DxLoadingIndicatorConfig);
+
 (DxLoadingIndicator as any).$_optionName = "loadingIndicator";
 (DxLoadingIndicator as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
-const DxMargin = createConfigurationComponent({
+
+const DxMarginConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -685,9 +781,15 @@ const DxMargin = createConfigurationComponent({
     right: Number,
     top: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxMarginConfig);
+
+const DxMargin = defineComponent(DxMarginConfig);
+
 (DxMargin as any).$_optionName = "margin";
-const DxProjection = createConfigurationComponent({
+
+const DxProjectionConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -700,9 +802,15 @@ const DxProjection = createConfigurationComponent({
     from: Function,
     to: Function
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxProjectionConfig);
+
+const DxProjection = defineComponent(DxProjectionConfig);
+
 (DxProjection as any).$_optionName = "projection";
-const DxShadow = createConfigurationComponent({
+
+const DxShadowConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -719,9 +827,15 @@ const DxShadow = createConfigurationComponent({
     offsetY: Number,
     opacity: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxShadowConfig);
+
+const DxShadow = defineComponent(DxShadowConfig);
+
 (DxShadow as any).$_optionName = "shadow";
-const DxSize = createConfigurationComponent({
+
+const DxSizeConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -732,9 +846,15 @@ const DxSize = createConfigurationComponent({
     height: Number,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSizeConfig);
+
+const DxSize = defineComponent(DxSizeConfig);
+
 (DxSize as any).$_optionName = "size";
-const DxSource = createConfigurationComponent({
+
+const DxSourceConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -745,9 +865,15 @@ const DxSource = createConfigurationComponent({
     grouping: String,
     layer: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSourceConfig);
+
+const DxSource = defineComponent(DxSourceConfig);
+
 (DxSource as any).$_optionName = "source";
-const DxSubtitle = createConfigurationComponent({
+
+const DxSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -764,9 +890,15 @@ const DxSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxSubtitleConfig);
+
+const DxSubtitle = defineComponent(DxSubtitleConfig);
+
 (DxSubtitle as any).$_optionName = "subtitle";
-const DxTitle = createConfigurationComponent({
+
+const DxTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -791,9 +923,15 @@ const DxTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTitleConfig);
+
+const DxTitle = defineComponent(DxTitleConfig);
+
 (DxTitle as any).$_optionName = "title";
-const DxTooltip = createConfigurationComponent({
+
+const DxTooltipConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -828,7 +966,12 @@ const DxTooltip = createConfigurationComponent({
     shadow: Object,
     zIndex: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipConfig);
+
+const DxTooltip = defineComponent(DxTooltipConfig);
+
 (DxTooltip as any).$_optionName = "tooltip";
 (DxTooltip as any).$_expectedChildren = {
   border: { isCollectionItem: false, optionName: "border" },
@@ -836,7 +979,8 @@ const DxTooltip = createConfigurationComponent({
   shadow: { isCollectionItem: false, optionName: "shadow" },
   tooltipBorder: { isCollectionItem: false, optionName: "border" }
 };
-const DxTooltipBorder = createConfigurationComponent({
+
+const DxTooltipBorderConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -853,9 +997,15 @@ const DxTooltipBorder = createConfigurationComponent({
     visible: Boolean,
     width: Number
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxTooltipBorderConfig);
+
+const DxTooltipBorder = defineComponent(DxTooltipBorderConfig);
+
 (DxTooltipBorder as any).$_optionName = "border";
-const DxVectorMapTitle = createConfigurationComponent({
+
+const DxVectorMapTitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -880,7 +1030,12 @@ const DxVectorMapTitle = createConfigurationComponent({
     verticalAlignment: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxVectorMapTitleConfig);
+
+const DxVectorMapTitle = defineComponent(DxVectorMapTitleConfig);
+
 (DxVectorMapTitle as any).$_optionName = "title";
 (DxVectorMapTitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" },
@@ -888,7 +1043,8 @@ const DxVectorMapTitle = createConfigurationComponent({
   subtitle: { isCollectionItem: false, optionName: "subtitle" },
   vectorMapTitleSubtitle: { isCollectionItem: false, optionName: "subtitle" }
 };
-const DxVectorMapTitleSubtitle = createConfigurationComponent({
+
+const DxVectorMapTitleSubtitleConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
@@ -905,12 +1061,18 @@ const DxVectorMapTitleSubtitle = createConfigurationComponent({
     textOverflow: String,
     wordWrap: String
   }
-});
+};
+
+prepareConfigurationComponentConfig(DxVectorMapTitleSubtitleConfig);
+
+const DxVectorMapTitleSubtitle = defineComponent(DxVectorMapTitleSubtitleConfig);
+
 (DxVectorMapTitleSubtitle as any).$_optionName = "subtitle";
 (DxVectorMapTitleSubtitle as any).$_expectedChildren = {
   font: { isCollectionItem: false, optionName: "font" }
 };
 
+
 export default DxVectorMap;
 export {
   DxVectorMap,