From b9f5a25932882dcce6047a39cb5c71c3bdda7680 Mon Sep 17 00:00:00 2001
From: andrey <palchikov@uteka.ru>
Date: Wed, 18 Feb 2026 15:36:22 +0300
Subject: [PATCH 1/9] Update vt template and fix path form

---
 .../all/src/pages/Entity/Category/Form.vue    | 103 +++++---
 .../all/src/pages/Entity/Category/List.vue    | 106 +++++---
 .../Category/components/MultiListFilters.vue  |  53 ++--
 .../all/src/pages/Entity/News/Form.vue        | 159 ++++++-----
 .../all/src/pages/Entity/News/List.vue        | 114 +++++---
 .../News/components/MultiListFilters.vue      |  67 +++--
 .../all/src/pages/Entity/Tag/Form.vue         |  95 +++++--
 .../all/src/pages/Entity/Tag/List.vue         | 104 +++++---
 .../Tag/components/MultiListFilters.vue       |  51 +++-
 .../src/pages/Entity/Category/Form.vue        | 103 +++++---
 .../src/pages/Entity/Category/List.vue        | 106 +++++---
 .../Category/components/MultiListFilters.vue  |  53 ++--
 .../entities/src/pages/Entity/Tag/Form.vue    |  95 +++++--
 .../entities/src/pages/Entity/Tag/List.vue    | 104 +++++---
 .../Tag/components/MultiListFilters.vue       |  51 +++-
 generators/vt-template/generator.go           |   2 +-
 generators/vt-template/template.go            | 248 ++++++++++++------
 17 files changed, 1083 insertions(+), 531 deletions(-)

diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/Form.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/Form.vue
index 49ec139..41f5809 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/Form.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/Form.vue
@@ -15,7 +15,7 @@
         >
           <v-flex>
             <h2 class="ellipsed">
-              {{ store.model.title || "..." }}
+              {{ model.title || "..." }}
             </h2>
           </v-flex>
           <v-spacer />
@@ -23,7 +23,7 @@
             <v-btn
               text
               color="primary"
-              :disabled="store.isLoading"
+              :disabled="isLoading"
               @click.stop="navigateBack"
             >
               <v-icon
@@ -32,7 +32,7 @@
                 arrow_back
               </v-icon>
               <template v-if="!$vuetify.breakpoint.xsOnly">
-                {{ $t("common.form.cancelButtonLabel") }}
+                {{ t("common.form.cancelButtonLabel") }}
               </template>
             </v-btn>
             <v-hover
@@ -61,7 +61,7 @@
             Основные
           </v-tab>
         </v-tabs>
-        <v-card v-if="store.model">
+        <v-card v-if="model">
           <v-form
             ref="form"
             @submit.prevent="onSaveAndBack"
@@ -71,27 +71,27 @@
                 <v-tab-item eager>
                   <!--  generated part -->
                   <vt-form-field
-                    v-model="store.model.title"
+                    v-model="model.title"
                     component="v-text-field"
-                    :label="$t('category.form.titleLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.title))"
-                    :disabled="store.isLoading"
+                    :label="t('category.form.titleLabel')"
+                    :error-messages="getErrorMessage(errors.title)"
+                    :disabled="isLoading"
                     placeholder=""
                     required
                   /><vt-form-field
-                    v-model="store.model.orderNumber"
+                    v-model="model.orderNumber"
                     component="v-text-field"
-                    :label="$t('category.form.orderNumberLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.orderNumber))"
-                    :disabled="store.isLoading"
+                    :label="t('category.form.orderNumberLabel')"
+                    :error-messages="getErrorMessage(errors.orderNumber)"
+                    :disabled="isLoading"
                     placeholder=""
                     required
                   /><vt-form-field
-                    v-model="store.model.statusId"
+                    v-model="model.statusId"
                     component="vt-status-select"
-                    :label="$t('category.form.statusIdLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.statusId))"
-                    :disabled="store.isLoading"
+                    :label="t('category.form.statusIdLabel')"
+                    :error-messages="getErrorMessage(errors.statusId)"
+                    :disabled="isLoading"
                     placeholder=""
                     required
                     compact
@@ -111,21 +111,21 @@
                     <v-btn
                       type="submit"
                       color="success"
-                      :disabled="!store.isChanged || store.isLoading"
-                      :loading="store.isLoading"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="!$vuetify.breakpoint.xsOnly && 'mx-2'"
                     >
                       <v-icon left>
                         done
                       </v-icon>
-                      {{ $t("common.form.saveAndCloseButtonLabel") }}
+                      {{ t("common.form.saveAndCloseButtonLabel") }}
                     </v-btn>
 
                     <v-btn
                       v-if="$route.params.id"
-                      :disabled="!store.isChanged || store.isLoading"
-                      :loading="store.isLoading"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="[
                         $vuetify.breakpoint.xsOnly && 'ml-0 mt-2',
@@ -135,7 +135,7 @@
                       color="accent"
                       @click.stop="onSave"
                     >
-                      {{ $t("common.form.saveButtonLabel") }}
+                      {{ t("common.form.saveButtonLabel") }}
                     </v-btn>
                     <v-spacer />
                   </v-layout>
@@ -150,17 +150,58 @@
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
+import { useEntityForm } from '@/composables/useEntityForm';
+import { useI18n } from '@/composables/useI18n'
 import { Category as Model } from '@/services/api/factory';
-import Store from '@/common/Entity/EntityModelStore';
-import EntityForm from '@/common/Entity/EntityForm';
+import { defineComponent } from 'vue';
 
-@Observer
-@Component
-export default class Form extends EntityForm {
-  store: Store<Model> = new Store<Model>(Model);
-}
+export default defineComponent({
+  // eslint-disable-next-line vue/match-component-file-name
+  name: 'CategoryForm',
+
+  setup () {
+    const { t } = useI18n();
+
+    const {
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    } = useEntityForm<Model>(Model);
+
+	const getErrorMessage = (errorKey: string | null): string => {
+      const errorMessage = i18nFieldError(errorKey);
+      return errorMessage ? t(errorMessage) : '';
+    };
+
+    return {
+      t,
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+      getErrorMessage,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    };
+  }
+});
 </script>
 
 <style scoped></style>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/List.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/List.vue
index f2e6d2a..1c63952 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/List.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/List.vue
@@ -18,27 +18,26 @@
               <v-flex>
                 <v-layout align-center>
                   <h2 class="ellipsed mr-1">
-                    {{ $t("category.list.title") }}
+                    {{ t("category.list.title") }}
                   </h2>
                   <span
-                    v-if="store.pagination.totalItems"
+                    v-if="pagination.totalItems"
                     class="text--secondary subtitle-2"
                   >
-                    {{ store.pagination.totalItems }}
+                    {{ pagination.totalItems }}
                   </span>
                 </v-layout>
               </v-flex>
               <v-spacer />
               <v-flex shrink>
                 <v-btn
+                  small
                   dark
                   color="success"
                   :to="{ name: 'categoryAdd' }"
                 >
-                  <v-icon left>
-                    add
-                  </v-icon>
-                  {{ $t("common.list.addNewLabel") }}
+                  <v-icon>add</v-icon>
+                  {{ t("common.list.addNewLabel") }}
                 </v-btn>
               </v-flex>
             </v-layout>
@@ -64,9 +63,9 @@
                     mr-sm-2
                   >
                     <v-text-field
-                      v-model="store.filters.title"
+                      v-model="filters.title"
                       :placeholder="
-                        $t('category.list.filter.quickFilterPlaceholder')
+                        t('category.list.filter.quickFilterPlaceholder')
                       "
                       hide-details
                       @keyup.enter.native="submitFilters()"
@@ -78,9 +77,10 @@
                     mr-sm-10
                   >
                     <multi-filters
-                      :filters="store.filters"
-                      :active-filters="store.activeFilters"
+                      :filters="filters"
+                      :active-filters="activeFilters"
                       @submitFilters="submitFilters"
+                      @update:filters="updateFilters"
                     />
                   </v-flex>
                   <v-flex
@@ -88,8 +88,8 @@
                     mt-sm-4
                   >
                     <vt-compact-pagination
-                      :value="store.pagination.page"
-                      :total-pages="store.pagination.totalPages"
+                      :value="pagination.page"
+                      :total-pages="pagination.totalPages"
                       @input="setCompactPagination"
                     />
                   </v-flex>
@@ -100,9 +100,9 @@
               <v-data-table
                 v-model="selected"
                 :headers="headers"
-                :items="store.list"
-                :options="store.vuetifyTableOptions"
-                :server-items-length="store.pagination.totalItems"
+                :items="list"
+                :options="vuetifyTableOptions"
+                :server-items-length="pagination.totalItems"
                 item-key="id"
                 :footer-props="{
                   itemsPerPageOptions: [10, 25, 50, 100, 500]
@@ -116,7 +116,7 @@
                   }
                 ]"
                 :show-select="false"
-                :loading="store.isLoading"
+                :loading="isLoading"
                 fixed-header
                 @update:options="setPagination"
               >
@@ -164,48 +164,76 @@
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
-import EntityList from '@/common/Entity/EntityList';
-import Store from '@/common/Entity/EntityCollectionStore';
-import {
-  CategorySummary as Model,
-  CategorySearch as SearchModel
-} from '@/services/api/factory';
+import { computed, defineComponent } from 'vue';
+import { CategorySummary, CategorySearch } from '@/services/api/factory';
+import { useEntityList } from '@/composables/useEntityList';
+import { useI18n } from '@/composables/useI18n';
+
 import MultiFilters from './components/MultiListFilters.vue';
 
-@Observer
-@Component({
+export default defineComponent({
+  // eslint-disable-next-line vue/multi-word-component-names
   name: 'List',
-  components: { MultiFilters }
-})
-export default class List extends EntityList {
-  store: Store = new Store(Model, SearchModel);
+  components: { MultiFilters },
+
+  setup () {
+    const { t } = useI18n();
 
-  get headers () {
-    return [
+    const {
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters
+    } = useEntityList(Category, CategorySearch);
+
+    const headers = computed(() => [
       {
-        text: this.$t('category.list.headers.title'),
+        text: t('category.list.headers.title'),
         value: 'title',
         align: 'left'
       },
       {
-        text: this.$t('category.list.headers.orderNumber'),
+        text: t('category.list.headers.orderNumber'),
         value: 'orderNumber'
       },
       {
-        text: this.$t('category.list.headers.status'),
+        text: t('category.list.headers.status'),
         value: 'status',
         sortable: false
       },
       {
-        text: this.$t('category.list.headers.actions'),
+        text: t('category.list.headers.actions'),
         value: 'id',
         sortable: false
       }
-    ];
+    ]);
+
+    return {
+      t,
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters,
+      headers
+    };
   }
-}
+});
 </script>
 
 <style lang="scss"></style>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/components/MultiListFilters.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/components/MultiListFilters.vue
index fc765eb..a6fedaf 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/components/MultiListFilters.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/components/MultiListFilters.vue
@@ -1,26 +1,43 @@
 <template>
-  <vt-multi-filter
+  <vt-new-multi-filter
     :items="filterItems"
     :filters="filters"
     autofocus
-    :label="$t('common.list.filter.title')"
+    :label="t('common.list.filter.title')"
     @submitFilters="$emit('submitFilters')"
+    @update:filters="$emit('update:filters', $event)"
   />
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
-import EntityListFilters from '@/common/Entity/EntityListFilters';
+import { IFilterItem } from '@/common/MultiFilter/types';
+import { useI18n } from '@/composables/useI18n';
+import { defineComponent } from 'vue';
 
-@Observer
-@Component
-export default class MultiListFilters extends EntityListFilters {
-  filterItems = [
+export default defineComponent({
+  name: 'MultiListFilters',
+
+  props: {
+    filters: {
+      type: Object,
+      required: true
+    },
+    activeFilters: {
+      type: Object,
+      required: true
+    }
+  },
+
+  emits: ['submitFilters', 'update:filters'],
+
+  setup () {
+    const { t } = useI18n();
+
+    const filterItems = [
     {
       id: 'title',
       type: 'input',
-      title: this.$t('category.list.filter.title'),
+      title: t('category.list.filter.title'),
       value: null,
       values: null,
       settings: {
@@ -31,7 +48,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'orderNumber',
       type: 'input',
-      title: this.$t('category.list.filter.orderNumber'),
+      title: t('category.list.filter.orderNumber'),
       value: null,
       values: null,
       settings: {
@@ -43,7 +60,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'statusId',
       type: 'select',
-      title: this.$t('category.list.filter.statusId'),
+      title: t('category.list.filter.statusId'),
       value: null,
       values: null,
       settings: {
@@ -59,7 +76,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'ids',
       type: 'select',
-      title: this.$t('category.list.filter.ids'),
+      title: t('category.list.filter.ids'),
       value: null,
       values: null,
       settings: {
@@ -69,6 +86,12 @@ export default class MultiListFilters extends EntityListFilters {
         component: 'v-text-field'
       }
     }
-  ].filter(Boolean)
-}
+  ].filter(Boolean) as IFilterItem[];
+
+    return {
+      t,
+      filterItems
+    };
+  }
+});
 </script>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/News/Form.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/News/Form.vue
index 3892583..ac58a62 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/News/Form.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/News/Form.vue
@@ -15,7 +15,7 @@
         >
           <v-flex>
             <h2 class="ellipsed">
-              {{ store.model.title || "..." }}
+              {{ model.title || "..." }}
             </h2>
           </v-flex>
           <v-spacer />
@@ -23,7 +23,7 @@
             <v-btn
               text
               color="primary"
-              :disabled="store.isLoading"
+              :disabled="isLoading"
               @click.stop="navigateBack"
             >
               <v-icon
@@ -32,7 +32,7 @@
                 arrow_back
               </v-icon>
               <template v-if="!$vuetify.breakpoint.xsOnly">
-                {{ $t("common.form.cancelButtonLabel") }}
+                {{ t("common.form.cancelButtonLabel") }}
               </template>
             </v-btn>
             <v-hover
@@ -61,7 +61,7 @@
             Основные
           </v-tab>
         </v-tabs>
-        <v-card v-if="store.model">
+        <v-card v-if="model">
           <v-form
             ref="form"
             @submit.prevent="onSaveAndBack"
@@ -71,102 +71,102 @@
                 <v-tab-item eager>
                   <!--  generated part -->
                   <vt-form-field
-                    v-model="store.model.title"
+                    v-model="model.title"
                     component="v-text-field"
-                    :label="$t('news.form.titleLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.title))"
-                    :disabled="store.isLoading"
+                    :label="t('news.form.titleLabel')"
+                    :error-messages="getErrorMessage(errors.title)"
+                    :disabled="isLoading"
                     placeholder=""
                     required
                   /><vt-form-field
-                    v-model="store.model.preview"
+                    v-model="model.preview"
                     component="v-text-field"
-                    :label="$t('news.form.previewLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.preview))"
-                    :disabled="store.isLoading"
+                    :label="t('news.form.previewLabel')"
+                    :error-messages="getErrorMessage(errors.preview)"
+                    :disabled="isLoading"
                     placeholder=""
                     clearable
                   /><vt-form-field
-                    v-model="store.model.content"
+                    v-model="model.content"
                     component="vt-tinymce-editor"
-                    :label="$t('news.form.contentLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.content))"
-                    :disabled="store.isLoading"
+                    :label="t('news.form.contentLabel')"
+                    :error-messages="getErrorMessage(errors.content)"
+                    :disabled="isLoading"
                     placeholder=""
                     clearable
                     without-help
                   /><vt-form-field
-                    v-model="store.model.categoryId"
+                    v-model="model.categoryId"
                     entity="category"
                     search-by="title"
                     prefetch
                     component="vt-entity-autocomplete"
-                    :label="$t('news.form.categoryIdLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.categoryId))"
-                    :disabled="store.isLoading"
+                    :label="t('news.form.categoryIdLabel')"
+                    :error-messages="getErrorMessage(errors.categoryId)"
+                    :disabled="isLoading"
                     placeholder=""
                     required
                   /><vt-form-field
-                    v-model="store.model.countryId"
+                    v-model="model.countryId"
                     entity="country"
                     search-by="title"
                     prefetch
                     component="vt-entity-autocomplete"
-                    :label="$t('news.form.countryIdLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.countryId))"
-                    :disabled="store.isLoading"
+                    :label="t('news.form.countryIdLabel')"
+                    :error-messages="getErrorMessage(errors.countryId)"
+                    :disabled="isLoading"
                     placeholder=""
                     clearable
                   /><vt-form-field
-                    v-model="store.model.regionId"
+                    v-model="model.regionId"
                     entity="region"
                     search-by="title"
                     prefetch
                     component="vt-entity-autocomplete"
-                    :label="$t('news.form.regionIdLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.regionId))"
-                    :disabled="store.isLoading"
+                    :label="t('news.form.regionIdLabel')"
+                    :error-messages="getErrorMessage(errors.regionId)"
+                    :disabled="isLoading"
                     placeholder=""
                     clearable
                   /><vt-form-field
-                    v-model="store.model.cityId"
+                    v-model="model.cityId"
                     entity="city"
                     search-by="title"
                     prefetch
                     component="vt-entity-autocomplete"
-                    :label="$t('news.form.cityIdLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.cityId))"
-                    :disabled="store.isLoading"
+                    :label="t('news.form.cityIdLabel')"
+                    :error-messages="getErrorMessage(errors.cityId)"
+                    :disabled="isLoading"
                     placeholder=""
                     clearable
                   /><vt-form-field
-                    v-model="store.model.tagIds"
+                    v-model="model.tagIds"
                     entity="tag"
                     search-by="title"
                     prefetch
                     component="vt-entity-autocomplete"
-                    :label="$t('news.form.tagIdsLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.tagIds))"
-                    :disabled="store.isLoading"
+                    :label="t('news.form.tagIdsLabel')"
+                    :error-messages="getErrorMessage(errors.tagIds)"
+                    :disabled="isLoading"
                     placeholder=""
                     clearable
                     multiple
                     chips
                   /><vt-form-field
-                    v-model="store.model.publishedAt"
+                    v-model="model.publishedAt"
                     component="vt-datetime-picker"
-                    :label="$t('news.form.publishedAtLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.publishedAt))"
-                    :disabled="store.isLoading"
+                    :label="t('news.form.publishedAtLabel')"
+                    :error-messages="getErrorMessage(errors.publishedAt)"
+                    :disabled="isLoading"
                     placeholder=""
                     clearable
                     iso
                   /><vt-form-field
-                    v-model="store.model.statusId"
+                    v-model="model.statusId"
                     component="vt-status-select"
-                    :label="$t('news.form.statusIdLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.statusId))"
-                    :disabled="store.isLoading"
+                    :label="t('news.form.statusIdLabel')"
+                    :error-messages="getErrorMessage(errors.statusId)"
+                    :disabled="isLoading"
                     placeholder=""
                     required
                     compact
@@ -186,21 +186,21 @@
                     <v-btn
                       type="submit"
                       color="success"
-                      :disabled="!store.isChanged || store.isLoading"
-                      :loading="store.isLoading"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="!$vuetify.breakpoint.xsOnly && 'mx-2'"
                     >
                       <v-icon left>
                         done
                       </v-icon>
-                      {{ $t("common.form.saveAndCloseButtonLabel") }}
+                      {{ t("common.form.saveAndCloseButtonLabel") }}
                     </v-btn>
 
                     <v-btn
                       v-if="$route.params.id"
-                      :disabled="!store.isChanged || store.isLoading"
-                      :loading="store.isLoading"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="[
                         $vuetify.breakpoint.xsOnly && 'ml-0 mt-2',
@@ -210,7 +210,7 @@
                       color="accent"
                       @click.stop="onSave"
                     >
-                      {{ $t("common.form.saveButtonLabel") }}
+                      {{ t("common.form.saveButtonLabel") }}
                     </v-btn>
                     <v-spacer />
                   </v-layout>
@@ -225,17 +225,58 @@
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
+import { useEntityForm } from '@/composables/useEntityForm';
+import { useI18n } from '@/composables/useI18n'
 import { News as Model } from '@/services/api/factory';
-import Store from '@/common/Entity/EntityModelStore';
-import EntityForm from '@/common/Entity/EntityForm';
+import { defineComponent } from 'vue';
 
-@Observer
-@Component
-export default class Form extends EntityForm {
-  store: Store<Model> = new Store<Model>(Model);
-}
+export default defineComponent({
+  // eslint-disable-next-line vue/match-component-file-name
+  name: 'NewsForm',
+
+  setup () {
+    const { t } = useI18n();
+
+    const {
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    } = useEntityForm<Model>(Model);
+
+	const getErrorMessage = (errorKey: string | null): string => {
+      const errorMessage = i18nFieldError(errorKey);
+      return errorMessage ? t(errorMessage) : '';
+    };
+
+    return {
+      t,
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+      getErrorMessage,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    };
+  }
+});
 </script>
 
 <style scoped></style>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/News/List.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/News/List.vue
index 8cc4aa6..e86ccd6 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/News/List.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/News/List.vue
@@ -18,27 +18,26 @@
               <v-flex>
                 <v-layout align-center>
                   <h2 class="ellipsed mr-1">
-                    {{ $t("news.list.title") }}
+                    {{ t("news.list.title") }}
                   </h2>
                   <span
-                    v-if="store.pagination.totalItems"
+                    v-if="pagination.totalItems"
                     class="text--secondary subtitle-2"
                   >
-                    {{ store.pagination.totalItems }}
+                    {{ pagination.totalItems }}
                   </span>
                 </v-layout>
               </v-flex>
               <v-spacer />
               <v-flex shrink>
                 <v-btn
+                  small
                   dark
                   color="success"
                   :to="{ name: 'newsAdd' }"
                 >
-                  <v-icon left>
-                    add
-                  </v-icon>
-                  {{ $t("common.list.addNewLabel") }}
+                  <v-icon>add</v-icon>
+                  {{ t("common.list.addNewLabel") }}
                 </v-btn>
               </v-flex>
             </v-layout>
@@ -64,9 +63,9 @@
                     mr-sm-2
                   >
                     <v-text-field
-                      v-model="store.filters.title"
+                      v-model="filters.title"
                       :placeholder="
-                        $t('news.list.filter.quickFilterPlaceholder')
+                        t('news.list.filter.quickFilterPlaceholder')
                       "
                       hide-details
                       @keyup.enter.native="submitFilters()"
@@ -78,9 +77,10 @@
                     mr-sm-10
                   >
                     <multi-filters
-                      :filters="store.filters"
-                      :active-filters="store.activeFilters"
+                      :filters="filters"
+                      :active-filters="activeFilters"
                       @submitFilters="submitFilters"
+                      @update:filters="updateFilters"
                     />
                   </v-flex>
                   <v-flex
@@ -88,8 +88,8 @@
                     mt-sm-4
                   >
                     <vt-compact-pagination
-                      :value="store.pagination.page"
-                      :total-pages="store.pagination.totalPages"
+                      :value="pagination.page"
+                      :total-pages="pagination.totalPages"
                       @input="setCompactPagination"
                     />
                   </v-flex>
@@ -100,9 +100,9 @@
               <v-data-table
                 v-model="selected"
                 :headers="headers"
-                :items="store.list"
-                :options="store.vuetifyTableOptions"
-                :server-items-length="store.pagination.totalItems"
+                :items="list"
+                :options="vuetifyTableOptions"
+                :server-items-length="pagination.totalItems"
                 item-key="id"
                 :footer-props="{
                   itemsPerPageOptions: [10, 25, 50, 100, 500]
@@ -116,7 +116,7 @@
                   }
                 ]"
                 :show-select="false"
-                :loading="store.isLoading"
+                :loading="isLoading"
                 fixed-header
                 @update:options="setPagination"
               >
@@ -176,67 +176,95 @@
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
-import EntityList from '@/common/Entity/EntityList';
-import Store from '@/common/Entity/EntityCollectionStore';
-import {
-  NewsSummary as Model,
-  NewsSearch as SearchModel
-} from '@/services/api/factory';
+import { computed, defineComponent } from 'vue';
+import { NewsSummary, NewsSearch } from '@/services/api/factory';
+import { useEntityList } from '@/composables/useEntityList';
+import { useI18n } from '@/composables/useI18n';
+
 import MultiFilters from './components/MultiListFilters.vue';
 
-@Observer
-@Component({
+export default defineComponent({
+  // eslint-disable-next-line vue/multi-word-component-names
   name: 'List',
-  components: { MultiFilters }
-})
-export default class List extends EntityList {
-  store: Store = new Store(Model, SearchModel);
+  components: { MultiFilters },
+
+  setup () {
+    const { t } = useI18n();
 
-  get headers () {
-    return [
+    const {
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters
+    } = useEntityList(News, NewsSearch);
+
+    const headers = computed(() => [
       {
-        text: this.$t('news.list.headers.title'),
+        text: t('news.list.headers.title'),
         value: 'title',
         align: 'left'
       },
       {
-        text: this.$t('news.list.headers.preview'),
+        text: t('news.list.headers.preview'),
         value: 'preview'
       },
       {
-        text: this.$t('news.list.headers.content'),
+        text: t('news.list.headers.content'),
         value: 'content'
       },
       {
-        text: this.$t('news.list.headers.category'),
+        text: t('news.list.headers.category'),
         value: 'category',
         sortable: false
       },
       {
-        text: this.$t('news.list.headers.country'),
+        text: t('news.list.headers.country'),
         value: 'country',
         sortable: false
       },
       {
-        text: this.$t('news.list.headers.region'),
+        text: t('news.list.headers.region'),
         value: 'region',
         sortable: false
       },
       {
-        text: this.$t('news.list.headers.status'),
+        text: t('news.list.headers.status'),
         value: 'status',
         sortable: false
       },
       {
-        text: this.$t('news.list.headers.actions'),
+        text: t('news.list.headers.actions'),
         value: 'id',
         sortable: false
       }
-    ];
+    ]);
+
+    return {
+      t,
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters,
+      headers
+    };
   }
-}
+});
 </script>
 
 <style lang="scss"></style>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/News/components/MultiListFilters.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/News/components/MultiListFilters.vue
index 83bb31e..7f1ec20 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/News/components/MultiListFilters.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/News/components/MultiListFilters.vue
@@ -1,26 +1,43 @@
 <template>
-  <vt-multi-filter
+  <vt-new-multi-filter
     :items="filterItems"
     :filters="filters"
     autofocus
-    :label="$t('common.list.filter.title')"
+    :label="t('common.list.filter.title')"
     @submitFilters="$emit('submitFilters')"
+    @update:filters="$emit('update:filters', $event)"
   />
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
-import EntityListFilters from '@/common/Entity/EntityListFilters';
+import { IFilterItem } from '@/common/MultiFilter/types';
+import { useI18n } from '@/composables/useI18n';
+import { defineComponent } from 'vue';
 
-@Observer
-@Component
-export default class MultiListFilters extends EntityListFilters {
-  filterItems = [
+export default defineComponent({
+  name: 'MultiListFilters',
+
+  props: {
+    filters: {
+      type: Object,
+      required: true
+    },
+    activeFilters: {
+      type: Object,
+      required: true
+    }
+  },
+
+  emits: ['submitFilters', 'update:filters'],
+
+  setup () {
+    const { t } = useI18n();
+
+    const filterItems = [
     {
       id: 'title',
       type: 'input',
-      title: this.$t('news.list.filter.title'),
+      title: t('news.list.filter.title'),
       value: null,
       values: null,
       settings: {
@@ -31,7 +48,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'preview',
       type: 'input',
-      title: this.$t('news.list.filter.preview'),
+      title: t('news.list.filter.preview'),
       value: null,
       values: null,
       settings: {
@@ -42,7 +59,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'content',
       type: 'input',
-      title: this.$t('news.list.filter.content'),
+      title: t('news.list.filter.content'),
       value: null,
       values: null,
       settings: {
@@ -53,7 +70,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'categoryId',
       type: 'select',
-      title: this.$t('news.list.filter.categoryId'),
+      title: t('news.list.filter.categoryId'),
       value: null,
       values: null,
       settings: {
@@ -67,7 +84,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'countryId',
       type: 'select',
-      title: this.$t('news.list.filter.countryId'),
+      title: t('news.list.filter.countryId'),
       value: null,
       values: null,
       settings: {
@@ -81,7 +98,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'regionId',
       type: 'select',
-      title: this.$t('news.list.filter.regionId'),
+      title: t('news.list.filter.regionId'),
       value: null,
       values: null,
       settings: {
@@ -95,7 +112,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'cityId',
       type: 'select',
-      title: this.$t('news.list.filter.cityId'),
+      title: t('news.list.filter.cityId'),
       value: null,
       values: null,
       settings: {
@@ -109,7 +126,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'createdAt',
       type: 'datetime',
-      title: this.$t('news.list.filter.createdAt'),
+      title: t('news.list.filter.createdAt'),
       value: null,
       values: null,
       settings: {
@@ -121,7 +138,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'publishedAt',
       type: 'datetime',
-      title: this.$t('news.list.filter.publishedAt'),
+      title: t('news.list.filter.publishedAt'),
       value: null,
       values: null,
       settings: {
@@ -133,7 +150,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'statusId',
       type: 'select',
-      title: this.$t('news.list.filter.statusId'),
+      title: t('news.list.filter.statusId'),
       value: null,
       values: null,
       settings: {
@@ -149,7 +166,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'ids',
       type: 'select',
-      title: this.$t('news.list.filter.ids'),
+      title: t('news.list.filter.ids'),
       value: null,
       values: null,
       settings: {
@@ -159,6 +176,12 @@ export default class MultiListFilters extends EntityListFilters {
         component: 'v-text-field'
       }
     }
-  ].filter(Boolean)
-}
+  ].filter(Boolean) as IFilterItem[];
+
+    return {
+      t,
+      filterItems
+    };
+  }
+});
 </script>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/Form.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/Form.vue
index e46587a..0391899 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/Form.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/Form.vue
@@ -15,7 +15,7 @@
         >
           <v-flex>
             <h2 class="ellipsed">
-              {{ store.model.title || "..." }}
+              {{ model.title || "..." }}
             </h2>
           </v-flex>
           <v-spacer />
@@ -23,7 +23,7 @@
             <v-btn
               text
               color="primary"
-              :disabled="store.isLoading"
+              :disabled="isLoading"
               @click.stop="navigateBack"
             >
               <v-icon
@@ -32,7 +32,7 @@
                 arrow_back
               </v-icon>
               <template v-if="!$vuetify.breakpoint.xsOnly">
-                {{ $t("common.form.cancelButtonLabel") }}
+                {{ t("common.form.cancelButtonLabel") }}
               </template>
             </v-btn>
             <v-hover
@@ -61,7 +61,7 @@
             Основные
           </v-tab>
         </v-tabs>
-        <v-card v-if="store.model">
+        <v-card v-if="model">
           <v-form
             ref="form"
             @submit.prevent="onSaveAndBack"
@@ -71,19 +71,19 @@
                 <v-tab-item eager>
                   <!--  generated part -->
                   <vt-form-field
-                    v-model="store.model.title"
+                    v-model="model.title"
                     component="v-text-field"
-                    :label="$t('tag.form.titleLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.title))"
-                    :disabled="store.isLoading"
+                    :label="t('tag.form.titleLabel')"
+                    :error-messages="getErrorMessage(errors.title)"
+                    :disabled="isLoading"
                     placeholder=""
                     required
                   /><vt-form-field
-                    v-model="store.model.statusId"
+                    v-model="model.statusId"
                     component="vt-status-select"
-                    :label="$t('tag.form.statusIdLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.statusId))"
-                    :disabled="store.isLoading"
+                    :label="t('tag.form.statusIdLabel')"
+                    :error-messages="getErrorMessage(errors.statusId)"
+                    :disabled="isLoading"
                     placeholder=""
                     required
                     compact
@@ -103,21 +103,21 @@
                     <v-btn
                       type="submit"
                       color="success"
-                      :disabled="!store.isChanged || store.isLoading"
-                      :loading="store.isLoading"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="!$vuetify.breakpoint.xsOnly && 'mx-2'"
                     >
                       <v-icon left>
                         done
                       </v-icon>
-                      {{ $t("common.form.saveAndCloseButtonLabel") }}
+                      {{ t("common.form.saveAndCloseButtonLabel") }}
                     </v-btn>
 
                     <v-btn
                       v-if="$route.params.id"
-                      :disabled="!store.isChanged || store.isLoading"
-                      :loading="store.isLoading"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="[
                         $vuetify.breakpoint.xsOnly && 'ml-0 mt-2',
@@ -127,7 +127,7 @@
                       color="accent"
                       @click.stop="onSave"
                     >
-                      {{ $t("common.form.saveButtonLabel") }}
+                      {{ t("common.form.saveButtonLabel") }}
                     </v-btn>
                     <v-spacer />
                   </v-layout>
@@ -142,17 +142,58 @@
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
+import { useEntityForm } from '@/composables/useEntityForm';
+import { useI18n } from '@/composables/useI18n'
 import { Tag as Model } from '@/services/api/factory';
-import Store from '@/common/Entity/EntityModelStore';
-import EntityForm from '@/common/Entity/EntityForm';
+import { defineComponent } from 'vue';
 
-@Observer
-@Component
-export default class Form extends EntityForm {
-  store: Store<Model> = new Store<Model>(Model);
-}
+export default defineComponent({
+  // eslint-disable-next-line vue/match-component-file-name
+  name: 'TagForm',
+
+  setup () {
+    const { t } = useI18n();
+
+    const {
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    } = useEntityForm<Model>(Model);
+
+	const getErrorMessage = (errorKey: string | null): string => {
+      const errorMessage = i18nFieldError(errorKey);
+      return errorMessage ? t(errorMessage) : '';
+    };
+
+    return {
+      t,
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+      getErrorMessage,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    };
+  }
+});
 </script>
 
 <style scoped></style>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/List.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/List.vue
index 59f5d65..eb520c5 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/List.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/List.vue
@@ -18,27 +18,26 @@
               <v-flex>
                 <v-layout align-center>
                   <h2 class="ellipsed mr-1">
-                    {{ $t("tag.list.title") }}
+                    {{ t("tag.list.title") }}
                   </h2>
                   <span
-                    v-if="store.pagination.totalItems"
+                    v-if="pagination.totalItems"
                     class="text--secondary subtitle-2"
                   >
-                    {{ store.pagination.totalItems }}
+                    {{ pagination.totalItems }}
                   </span>
                 </v-layout>
               </v-flex>
               <v-spacer />
               <v-flex shrink>
                 <v-btn
+                  small
                   dark
                   color="success"
                   :to="{ name: 'tagAdd' }"
                 >
-                  <v-icon left>
-                    add
-                  </v-icon>
-                  {{ $t("common.list.addNewLabel") }}
+                  <v-icon>add</v-icon>
+                  {{ t("common.list.addNewLabel") }}
                 </v-btn>
               </v-flex>
             </v-layout>
@@ -64,9 +63,9 @@
                     mr-sm-2
                   >
                     <v-text-field
-                      v-model="store.filters.title"
+                      v-model="filters.title"
                       :placeholder="
-                        $t('tag.list.filter.quickFilterPlaceholder')
+                        t('tag.list.filter.quickFilterPlaceholder')
                       "
                       hide-details
                       @keyup.enter.native="submitFilters()"
@@ -78,9 +77,10 @@
                     mr-sm-10
                   >
                     <multi-filters
-                      :filters="store.filters"
-                      :active-filters="store.activeFilters"
+                      :filters="filters"
+                      :active-filters="activeFilters"
                       @submitFilters="submitFilters"
+                      @update:filters="updateFilters"
                     />
                   </v-flex>
                   <v-flex
@@ -88,8 +88,8 @@
                     mt-sm-4
                   >
                     <vt-compact-pagination
-                      :value="store.pagination.page"
-                      :total-pages="store.pagination.totalPages"
+                      :value="pagination.page"
+                      :total-pages="pagination.totalPages"
                       @input="setCompactPagination"
                     />
                   </v-flex>
@@ -100,9 +100,9 @@
               <v-data-table
                 v-model="selected"
                 :headers="headers"
-                :items="store.list"
-                :options="store.vuetifyTableOptions"
-                :server-items-length="store.pagination.totalItems"
+                :items="list"
+                :options="vuetifyTableOptions"
+                :server-items-length="pagination.totalItems"
                 item-key="id"
                 :footer-props="{
                   itemsPerPageOptions: [10, 25, 50, 100, 500]
@@ -116,7 +116,7 @@
                   }
                 ]"
                 :show-select="false"
-                :loading="store.isLoading"
+                :loading="isLoading"
                 fixed-header
                 @update:options="setPagination"
               >
@@ -161,44 +161,72 @@
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
-import EntityList from '@/common/Entity/EntityList';
-import Store from '@/common/Entity/EntityCollectionStore';
-import {
-  TagSummary as Model,
-  TagSearch as SearchModel
-} from '@/services/api/factory';
+import { computed, defineComponent } from 'vue';
+import { TagSummary, TagSearch } from '@/services/api/factory';
+import { useEntityList } from '@/composables/useEntityList';
+import { useI18n } from '@/composables/useI18n';
+
 import MultiFilters from './components/MultiListFilters.vue';
 
-@Observer
-@Component({
+export default defineComponent({
+  // eslint-disable-next-line vue/multi-word-component-names
   name: 'List',
-  components: { MultiFilters }
-})
-export default class List extends EntityList {
-  store: Store = new Store(Model, SearchModel);
+  components: { MultiFilters },
+
+  setup () {
+    const { t } = useI18n();
 
-  get headers () {
-    return [
+    const {
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters
+    } = useEntityList(Tag, TagSearch);
+
+    const headers = computed(() => [
       {
-        text: this.$t('tag.list.headers.title'),
+        text: t('tag.list.headers.title'),
         value: 'title',
         align: 'left'
       },
       {
-        text: this.$t('tag.list.headers.status'),
+        text: t('tag.list.headers.status'),
         value: 'status',
         sortable: false
       },
       {
-        text: this.$t('tag.list.headers.actions'),
+        text: t('tag.list.headers.actions'),
         value: 'id',
         sortable: false
       }
-    ];
+    ]);
+
+    return {
+      t,
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters,
+      headers
+    };
   }
-}
+});
 </script>
 
 <style lang="scss"></style>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/components/MultiListFilters.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/components/MultiListFilters.vue
index 4e5ae81..523e594 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/components/MultiListFilters.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/components/MultiListFilters.vue
@@ -1,26 +1,43 @@
 <template>
-  <vt-multi-filter
+  <vt-new-multi-filter
     :items="filterItems"
     :filters="filters"
     autofocus
-    :label="$t('common.list.filter.title')"
+    :label="t('common.list.filter.title')"
     @submitFilters="$emit('submitFilters')"
+    @update:filters="$emit('update:filters', $event)"
   />
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
-import EntityListFilters from '@/common/Entity/EntityListFilters';
+import { IFilterItem } from '@/common/MultiFilter/types';
+import { useI18n } from '@/composables/useI18n';
+import { defineComponent } from 'vue';
 
-@Observer
-@Component
-export default class MultiListFilters extends EntityListFilters {
-  filterItems = [
+export default defineComponent({
+  name: 'MultiListFilters',
+
+  props: {
+    filters: {
+      type: Object,
+      required: true
+    },
+    activeFilters: {
+      type: Object,
+      required: true
+    }
+  },
+
+  emits: ['submitFilters', 'update:filters'],
+
+  setup () {
+    const { t } = useI18n();
+
+    const filterItems = [
     {
       id: 'title',
       type: 'input',
-      title: this.$t('tag.list.filter.title'),
+      title: t('tag.list.filter.title'),
       value: null,
       values: null,
       settings: {
@@ -31,7 +48,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'statusId',
       type: 'select',
-      title: this.$t('tag.list.filter.statusId'),
+      title: t('tag.list.filter.statusId'),
       value: null,
       values: null,
       settings: {
@@ -47,7 +64,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'ids',
       type: 'select',
-      title: this.$t('tag.list.filter.ids'),
+      title: t('tag.list.filter.ids'),
       value: null,
       values: null,
       settings: {
@@ -57,6 +74,12 @@ export default class MultiListFilters extends EntityListFilters {
         component: 'v-text-field'
       }
     }
-  ].filter(Boolean)
-}
+  ].filter(Boolean) as IFilterItem[];
+
+    return {
+      t,
+      filterItems
+    };
+  }
+});
 </script>
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/Form.vue b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/Form.vue
index 49ec139..41f5809 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/Form.vue
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/Form.vue
@@ -15,7 +15,7 @@
         >
           <v-flex>
             <h2 class="ellipsed">
-              {{ store.model.title || "..." }}
+              {{ model.title || "..." }}
             </h2>
           </v-flex>
           <v-spacer />
@@ -23,7 +23,7 @@
             <v-btn
               text
               color="primary"
-              :disabled="store.isLoading"
+              :disabled="isLoading"
               @click.stop="navigateBack"
             >
               <v-icon
@@ -32,7 +32,7 @@
                 arrow_back
               </v-icon>
               <template v-if="!$vuetify.breakpoint.xsOnly">
-                {{ $t("common.form.cancelButtonLabel") }}
+                {{ t("common.form.cancelButtonLabel") }}
               </template>
             </v-btn>
             <v-hover
@@ -61,7 +61,7 @@
             Основные
           </v-tab>
         </v-tabs>
-        <v-card v-if="store.model">
+        <v-card v-if="model">
           <v-form
             ref="form"
             @submit.prevent="onSaveAndBack"
@@ -71,27 +71,27 @@
                 <v-tab-item eager>
                   <!--  generated part -->
                   <vt-form-field
-                    v-model="store.model.title"
+                    v-model="model.title"
                     component="v-text-field"
-                    :label="$t('category.form.titleLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.title))"
-                    :disabled="store.isLoading"
+                    :label="t('category.form.titleLabel')"
+                    :error-messages="getErrorMessage(errors.title)"
+                    :disabled="isLoading"
                     placeholder=""
                     required
                   /><vt-form-field
-                    v-model="store.model.orderNumber"
+                    v-model="model.orderNumber"
                     component="v-text-field"
-                    :label="$t('category.form.orderNumberLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.orderNumber))"
-                    :disabled="store.isLoading"
+                    :label="t('category.form.orderNumberLabel')"
+                    :error-messages="getErrorMessage(errors.orderNumber)"
+                    :disabled="isLoading"
                     placeholder=""
                     required
                   /><vt-form-field
-                    v-model="store.model.statusId"
+                    v-model="model.statusId"
                     component="vt-status-select"
-                    :label="$t('category.form.statusIdLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.statusId))"
-                    :disabled="store.isLoading"
+                    :label="t('category.form.statusIdLabel')"
+                    :error-messages="getErrorMessage(errors.statusId)"
+                    :disabled="isLoading"
                     placeholder=""
                     required
                     compact
@@ -111,21 +111,21 @@
                     <v-btn
                       type="submit"
                       color="success"
-                      :disabled="!store.isChanged || store.isLoading"
-                      :loading="store.isLoading"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="!$vuetify.breakpoint.xsOnly && 'mx-2'"
                     >
                       <v-icon left>
                         done
                       </v-icon>
-                      {{ $t("common.form.saveAndCloseButtonLabel") }}
+                      {{ t("common.form.saveAndCloseButtonLabel") }}
                     </v-btn>
 
                     <v-btn
                       v-if="$route.params.id"
-                      :disabled="!store.isChanged || store.isLoading"
-                      :loading="store.isLoading"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="[
                         $vuetify.breakpoint.xsOnly && 'ml-0 mt-2',
@@ -135,7 +135,7 @@
                       color="accent"
                       @click.stop="onSave"
                     >
-                      {{ $t("common.form.saveButtonLabel") }}
+                      {{ t("common.form.saveButtonLabel") }}
                     </v-btn>
                     <v-spacer />
                   </v-layout>
@@ -150,17 +150,58 @@
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
+import { useEntityForm } from '@/composables/useEntityForm';
+import { useI18n } from '@/composables/useI18n'
 import { Category as Model } from '@/services/api/factory';
-import Store from '@/common/Entity/EntityModelStore';
-import EntityForm from '@/common/Entity/EntityForm';
+import { defineComponent } from 'vue';
 
-@Observer
-@Component
-export default class Form extends EntityForm {
-  store: Store<Model> = new Store<Model>(Model);
-}
+export default defineComponent({
+  // eslint-disable-next-line vue/match-component-file-name
+  name: 'CategoryForm',
+
+  setup () {
+    const { t } = useI18n();
+
+    const {
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    } = useEntityForm<Model>(Model);
+
+	const getErrorMessage = (errorKey: string | null): string => {
+      const errorMessage = i18nFieldError(errorKey);
+      return errorMessage ? t(errorMessage) : '';
+    };
+
+    return {
+      t,
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+      getErrorMessage,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    };
+  }
+});
 </script>
 
 <style scoped></style>
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/List.vue b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/List.vue
index f2e6d2a..1c63952 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/List.vue
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/List.vue
@@ -18,27 +18,26 @@
               <v-flex>
                 <v-layout align-center>
                   <h2 class="ellipsed mr-1">
-                    {{ $t("category.list.title") }}
+                    {{ t("category.list.title") }}
                   </h2>
                   <span
-                    v-if="store.pagination.totalItems"
+                    v-if="pagination.totalItems"
                     class="text--secondary subtitle-2"
                   >
-                    {{ store.pagination.totalItems }}
+                    {{ pagination.totalItems }}
                   </span>
                 </v-layout>
               </v-flex>
               <v-spacer />
               <v-flex shrink>
                 <v-btn
+                  small
                   dark
                   color="success"
                   :to="{ name: 'categoryAdd' }"
                 >
-                  <v-icon left>
-                    add
-                  </v-icon>
-                  {{ $t("common.list.addNewLabel") }}
+                  <v-icon>add</v-icon>
+                  {{ t("common.list.addNewLabel") }}
                 </v-btn>
               </v-flex>
             </v-layout>
@@ -64,9 +63,9 @@
                     mr-sm-2
                   >
                     <v-text-field
-                      v-model="store.filters.title"
+                      v-model="filters.title"
                       :placeholder="
-                        $t('category.list.filter.quickFilterPlaceholder')
+                        t('category.list.filter.quickFilterPlaceholder')
                       "
                       hide-details
                       @keyup.enter.native="submitFilters()"
@@ -78,9 +77,10 @@
                     mr-sm-10
                   >
                     <multi-filters
-                      :filters="store.filters"
-                      :active-filters="store.activeFilters"
+                      :filters="filters"
+                      :active-filters="activeFilters"
                       @submitFilters="submitFilters"
+                      @update:filters="updateFilters"
                     />
                   </v-flex>
                   <v-flex
@@ -88,8 +88,8 @@
                     mt-sm-4
                   >
                     <vt-compact-pagination
-                      :value="store.pagination.page"
-                      :total-pages="store.pagination.totalPages"
+                      :value="pagination.page"
+                      :total-pages="pagination.totalPages"
                       @input="setCompactPagination"
                     />
                   </v-flex>
@@ -100,9 +100,9 @@
               <v-data-table
                 v-model="selected"
                 :headers="headers"
-                :items="store.list"
-                :options="store.vuetifyTableOptions"
-                :server-items-length="store.pagination.totalItems"
+                :items="list"
+                :options="vuetifyTableOptions"
+                :server-items-length="pagination.totalItems"
                 item-key="id"
                 :footer-props="{
                   itemsPerPageOptions: [10, 25, 50, 100, 500]
@@ -116,7 +116,7 @@
                   }
                 ]"
                 :show-select="false"
-                :loading="store.isLoading"
+                :loading="isLoading"
                 fixed-header
                 @update:options="setPagination"
               >
@@ -164,48 +164,76 @@
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
-import EntityList from '@/common/Entity/EntityList';
-import Store from '@/common/Entity/EntityCollectionStore';
-import {
-  CategorySummary as Model,
-  CategorySearch as SearchModel
-} from '@/services/api/factory';
+import { computed, defineComponent } from 'vue';
+import { CategorySummary, CategorySearch } from '@/services/api/factory';
+import { useEntityList } from '@/composables/useEntityList';
+import { useI18n } from '@/composables/useI18n';
+
 import MultiFilters from './components/MultiListFilters.vue';
 
-@Observer
-@Component({
+export default defineComponent({
+  // eslint-disable-next-line vue/multi-word-component-names
   name: 'List',
-  components: { MultiFilters }
-})
-export default class List extends EntityList {
-  store: Store = new Store(Model, SearchModel);
+  components: { MultiFilters },
+
+  setup () {
+    const { t } = useI18n();
 
-  get headers () {
-    return [
+    const {
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters
+    } = useEntityList(Category, CategorySearch);
+
+    const headers = computed(() => [
       {
-        text: this.$t('category.list.headers.title'),
+        text: t('category.list.headers.title'),
         value: 'title',
         align: 'left'
       },
       {
-        text: this.$t('category.list.headers.orderNumber'),
+        text: t('category.list.headers.orderNumber'),
         value: 'orderNumber'
       },
       {
-        text: this.$t('category.list.headers.status'),
+        text: t('category.list.headers.status'),
         value: 'status',
         sortable: false
       },
       {
-        text: this.$t('category.list.headers.actions'),
+        text: t('category.list.headers.actions'),
         value: 'id',
         sortable: false
       }
-    ];
+    ]);
+
+    return {
+      t,
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters,
+      headers
+    };
   }
-}
+});
 </script>
 
 <style lang="scss"></style>
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/components/MultiListFilters.vue b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/components/MultiListFilters.vue
index fc765eb..a6fedaf 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/components/MultiListFilters.vue
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/components/MultiListFilters.vue
@@ -1,26 +1,43 @@
 <template>
-  <vt-multi-filter
+  <vt-new-multi-filter
     :items="filterItems"
     :filters="filters"
     autofocus
-    :label="$t('common.list.filter.title')"
+    :label="t('common.list.filter.title')"
     @submitFilters="$emit('submitFilters')"
+    @update:filters="$emit('update:filters', $event)"
   />
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
-import EntityListFilters from '@/common/Entity/EntityListFilters';
+import { IFilterItem } from '@/common/MultiFilter/types';
+import { useI18n } from '@/composables/useI18n';
+import { defineComponent } from 'vue';
 
-@Observer
-@Component
-export default class MultiListFilters extends EntityListFilters {
-  filterItems = [
+export default defineComponent({
+  name: 'MultiListFilters',
+
+  props: {
+    filters: {
+      type: Object,
+      required: true
+    },
+    activeFilters: {
+      type: Object,
+      required: true
+    }
+  },
+
+  emits: ['submitFilters', 'update:filters'],
+
+  setup () {
+    const { t } = useI18n();
+
+    const filterItems = [
     {
       id: 'title',
       type: 'input',
-      title: this.$t('category.list.filter.title'),
+      title: t('category.list.filter.title'),
       value: null,
       values: null,
       settings: {
@@ -31,7 +48,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'orderNumber',
       type: 'input',
-      title: this.$t('category.list.filter.orderNumber'),
+      title: t('category.list.filter.orderNumber'),
       value: null,
       values: null,
       settings: {
@@ -43,7 +60,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'statusId',
       type: 'select',
-      title: this.$t('category.list.filter.statusId'),
+      title: t('category.list.filter.statusId'),
       value: null,
       values: null,
       settings: {
@@ -59,7 +76,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'ids',
       type: 'select',
-      title: this.$t('category.list.filter.ids'),
+      title: t('category.list.filter.ids'),
       value: null,
       values: null,
       settings: {
@@ -69,6 +86,12 @@ export default class MultiListFilters extends EntityListFilters {
         component: 'v-text-field'
       }
     }
-  ].filter(Boolean)
-}
+  ].filter(Boolean) as IFilterItem[];
+
+    return {
+      t,
+      filterItems
+    };
+  }
+});
 </script>
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/Form.vue b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/Form.vue
index e46587a..0391899 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/Form.vue
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/Form.vue
@@ -15,7 +15,7 @@
         >
           <v-flex>
             <h2 class="ellipsed">
-              {{ store.model.title || "..." }}
+              {{ model.title || "..." }}
             </h2>
           </v-flex>
           <v-spacer />
@@ -23,7 +23,7 @@
             <v-btn
               text
               color="primary"
-              :disabled="store.isLoading"
+              :disabled="isLoading"
               @click.stop="navigateBack"
             >
               <v-icon
@@ -32,7 +32,7 @@
                 arrow_back
               </v-icon>
               <template v-if="!$vuetify.breakpoint.xsOnly">
-                {{ $t("common.form.cancelButtonLabel") }}
+                {{ t("common.form.cancelButtonLabel") }}
               </template>
             </v-btn>
             <v-hover
@@ -61,7 +61,7 @@
             Основные
           </v-tab>
         </v-tabs>
-        <v-card v-if="store.model">
+        <v-card v-if="model">
           <v-form
             ref="form"
             @submit.prevent="onSaveAndBack"
@@ -71,19 +71,19 @@
                 <v-tab-item eager>
                   <!--  generated part -->
                   <vt-form-field
-                    v-model="store.model.title"
+                    v-model="model.title"
                     component="v-text-field"
-                    :label="$t('tag.form.titleLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.title))"
-                    :disabled="store.isLoading"
+                    :label="t('tag.form.titleLabel')"
+                    :error-messages="getErrorMessage(errors.title)"
+                    :disabled="isLoading"
                     placeholder=""
                     required
                   /><vt-form-field
-                    v-model="store.model.statusId"
+                    v-model="model.statusId"
                     component="vt-status-select"
-                    :label="$t('tag.form.statusIdLabel')"
-                    :error-messages="$t(i18nFieldError(store.errors.statusId))"
-                    :disabled="store.isLoading"
+                    :label="t('tag.form.statusIdLabel')"
+                    :error-messages="getErrorMessage(errors.statusId)"
+                    :disabled="isLoading"
                     placeholder=""
                     required
                     compact
@@ -103,21 +103,21 @@
                     <v-btn
                       type="submit"
                       color="success"
-                      :disabled="!store.isChanged || store.isLoading"
-                      :loading="store.isLoading"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="!$vuetify.breakpoint.xsOnly && 'mx-2'"
                     >
                       <v-icon left>
                         done
                       </v-icon>
-                      {{ $t("common.form.saveAndCloseButtonLabel") }}
+                      {{ t("common.form.saveAndCloseButtonLabel") }}
                     </v-btn>
 
                     <v-btn
                       v-if="$route.params.id"
-                      :disabled="!store.isChanged || store.isLoading"
-                      :loading="store.isLoading"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="[
                         $vuetify.breakpoint.xsOnly && 'ml-0 mt-2',
@@ -127,7 +127,7 @@
                       color="accent"
                       @click.stop="onSave"
                     >
-                      {{ $t("common.form.saveButtonLabel") }}
+                      {{ t("common.form.saveButtonLabel") }}
                     </v-btn>
                     <v-spacer />
                   </v-layout>
@@ -142,17 +142,58 @@
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
+import { useEntityForm } from '@/composables/useEntityForm';
+import { useI18n } from '@/composables/useI18n'
 import { Tag as Model } from '@/services/api/factory';
-import Store from '@/common/Entity/EntityModelStore';
-import EntityForm from '@/common/Entity/EntityForm';
+import { defineComponent } from 'vue';
 
-@Observer
-@Component
-export default class Form extends EntityForm {
-  store: Store<Model> = new Store<Model>(Model);
-}
+export default defineComponent({
+  // eslint-disable-next-line vue/match-component-file-name
+  name: 'TagForm',
+
+  setup () {
+    const { t } = useI18n();
+
+    const {
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    } = useEntityForm<Model>(Model);
+
+	const getErrorMessage = (errorKey: string | null): string => {
+      const errorMessage = i18nFieldError(errorKey);
+      return errorMessage ? t(errorMessage) : '';
+    };
+
+    return {
+      t,
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+      getErrorMessage,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    };
+  }
+});
 </script>
 
 <style scoped></style>
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/List.vue b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/List.vue
index 59f5d65..eb520c5 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/List.vue
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/List.vue
@@ -18,27 +18,26 @@
               <v-flex>
                 <v-layout align-center>
                   <h2 class="ellipsed mr-1">
-                    {{ $t("tag.list.title") }}
+                    {{ t("tag.list.title") }}
                   </h2>
                   <span
-                    v-if="store.pagination.totalItems"
+                    v-if="pagination.totalItems"
                     class="text--secondary subtitle-2"
                   >
-                    {{ store.pagination.totalItems }}
+                    {{ pagination.totalItems }}
                   </span>
                 </v-layout>
               </v-flex>
               <v-spacer />
               <v-flex shrink>
                 <v-btn
+                  small
                   dark
                   color="success"
                   :to="{ name: 'tagAdd' }"
                 >
-                  <v-icon left>
-                    add
-                  </v-icon>
-                  {{ $t("common.list.addNewLabel") }}
+                  <v-icon>add</v-icon>
+                  {{ t("common.list.addNewLabel") }}
                 </v-btn>
               </v-flex>
             </v-layout>
@@ -64,9 +63,9 @@
                     mr-sm-2
                   >
                     <v-text-field
-                      v-model="store.filters.title"
+                      v-model="filters.title"
                       :placeholder="
-                        $t('tag.list.filter.quickFilterPlaceholder')
+                        t('tag.list.filter.quickFilterPlaceholder')
                       "
                       hide-details
                       @keyup.enter.native="submitFilters()"
@@ -78,9 +77,10 @@
                     mr-sm-10
                   >
                     <multi-filters
-                      :filters="store.filters"
-                      :active-filters="store.activeFilters"
+                      :filters="filters"
+                      :active-filters="activeFilters"
                       @submitFilters="submitFilters"
+                      @update:filters="updateFilters"
                     />
                   </v-flex>
                   <v-flex
@@ -88,8 +88,8 @@
                     mt-sm-4
                   >
                     <vt-compact-pagination
-                      :value="store.pagination.page"
-                      :total-pages="store.pagination.totalPages"
+                      :value="pagination.page"
+                      :total-pages="pagination.totalPages"
                       @input="setCompactPagination"
                     />
                   </v-flex>
@@ -100,9 +100,9 @@
               <v-data-table
                 v-model="selected"
                 :headers="headers"
-                :items="store.list"
-                :options="store.vuetifyTableOptions"
-                :server-items-length="store.pagination.totalItems"
+                :items="list"
+                :options="vuetifyTableOptions"
+                :server-items-length="pagination.totalItems"
                 item-key="id"
                 :footer-props="{
                   itemsPerPageOptions: [10, 25, 50, 100, 500]
@@ -116,7 +116,7 @@
                   }
                 ]"
                 :show-select="false"
-                :loading="store.isLoading"
+                :loading="isLoading"
                 fixed-header
                 @update:options="setPagination"
               >
@@ -161,44 +161,72 @@
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
-import EntityList from '@/common/Entity/EntityList';
-import Store from '@/common/Entity/EntityCollectionStore';
-import {
-  TagSummary as Model,
-  TagSearch as SearchModel
-} from '@/services/api/factory';
+import { computed, defineComponent } from 'vue';
+import { TagSummary, TagSearch } from '@/services/api/factory';
+import { useEntityList } from '@/composables/useEntityList';
+import { useI18n } from '@/composables/useI18n';
+
 import MultiFilters from './components/MultiListFilters.vue';
 
-@Observer
-@Component({
+export default defineComponent({
+  // eslint-disable-next-line vue/multi-word-component-names
   name: 'List',
-  components: { MultiFilters }
-})
-export default class List extends EntityList {
-  store: Store = new Store(Model, SearchModel);
+  components: { MultiFilters },
+
+  setup () {
+    const { t } = useI18n();
 
-  get headers () {
-    return [
+    const {
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters
+    } = useEntityList(Tag, TagSearch);
+
+    const headers = computed(() => [
       {
-        text: this.$t('tag.list.headers.title'),
+        text: t('tag.list.headers.title'),
         value: 'title',
         align: 'left'
       },
       {
-        text: this.$t('tag.list.headers.status'),
+        text: t('tag.list.headers.status'),
         value: 'status',
         sortable: false
       },
       {
-        text: this.$t('tag.list.headers.actions'),
+        text: t('tag.list.headers.actions'),
         value: 'id',
         sortable: false
       }
-    ];
+    ]);
+
+    return {
+      t,
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters,
+      headers
+    };
   }
-}
+});
 </script>
 
 <style lang="scss"></style>
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/components/MultiListFilters.vue b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/components/MultiListFilters.vue
index 4e5ae81..523e594 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/components/MultiListFilters.vue
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/components/MultiListFilters.vue
@@ -1,26 +1,43 @@
 <template>
-  <vt-multi-filter
+  <vt-new-multi-filter
     :items="filterItems"
     :filters="filters"
     autofocus
-    :label="$t('common.list.filter.title')"
+    :label="t('common.list.filter.title')"
     @submitFilters="$emit('submitFilters')"
+    @update:filters="$emit('update:filters', $event)"
   />
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
-import EntityListFilters from '@/common/Entity/EntityListFilters';
+import { IFilterItem } from '@/common/MultiFilter/types';
+import { useI18n } from '@/composables/useI18n';
+import { defineComponent } from 'vue';
 
-@Observer
-@Component
-export default class MultiListFilters extends EntityListFilters {
-  filterItems = [
+export default defineComponent({
+  name: 'MultiListFilters',
+
+  props: {
+    filters: {
+      type: Object,
+      required: true
+    },
+    activeFilters: {
+      type: Object,
+      required: true
+    }
+  },
+
+  emits: ['submitFilters', 'update:filters'],
+
+  setup () {
+    const { t } = useI18n();
+
+    const filterItems = [
     {
       id: 'title',
       type: 'input',
-      title: this.$t('tag.list.filter.title'),
+      title: t('tag.list.filter.title'),
       value: null,
       values: null,
       settings: {
@@ -31,7 +48,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'statusId',
       type: 'select',
-      title: this.$t('tag.list.filter.statusId'),
+      title: t('tag.list.filter.statusId'),
       value: null,
       values: null,
       settings: {
@@ -47,7 +64,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: 'ids',
       type: 'select',
-      title: this.$t('tag.list.filter.ids'),
+      title: t('tag.list.filter.ids'),
       value: null,
       values: null,
       settings: {
@@ -57,6 +74,12 @@ export default class MultiListFilters extends EntityListFilters {
         component: 'v-text-field'
       }
     }
-  ].filter(Boolean)
-}
+  ].filter(Boolean) as IFilterItem[];
+
+    return {
+      t,
+      filterItems
+    };
+  }
+});
 </script>
diff --git a/generators/vt-template/generator.go b/generators/vt-template/generator.go
index 7375f6f..004ac00 100644
--- a/generators/vt-template/generator.go
+++ b/generators/vt-template/generator.go
@@ -93,7 +93,7 @@ func (g *Generator) ReadFlags(command *cobra.Command) error {
 	if g.options.FiltersTemplatePath, err = flags.GetString(filterTemplateFlag); err != nil {
 		return err
 	}
-	if g.options.FiltersTemplatePath, err = flags.GetString(formTemplateFlag); err != nil {
+	if g.options.FormTemplatePath, err = flags.GetString(formTemplateFlag); err != nil {
 		return err
 	}
 
diff --git a/generators/vt-template/template.go b/generators/vt-template/template.go
index 10912aa..e3c059f 100644
--- a/generators/vt-template/template.go
+++ b/generators/vt-template/template.go
@@ -54,27 +54,26 @@ const listDefaultTemplate = `<template>
               <v-flex>
                 <v-layout align-center>
                   <h2 class="ellipsed mr-1">
-                    {{ $t("[[.JSName]].list.title") }}
+                    {{ t("[[.JSName]].list.title") }}
                   </h2>
                   <span
-                    v-if="store.pagination.totalItems"
+                    v-if="pagination.totalItems"
                     class="text--secondary subtitle-2"
                   >
-                    {{ store.pagination.totalItems }}
+                    {{ pagination.totalItems }}
                   </span>
                 </v-layout>
               </v-flex>
               <v-spacer />
               <v-flex shrink>
                 [[if not .ReadOnly]]<v-btn
+                  small
                   dark
                   color="success"
                   :to="{ name: '[[.JSName]]Add' }"
                 >
-                  <v-icon left>
-                    add
-                  </v-icon>
-                  {{ $t("common.list.addNewLabel") }}
+                  <v-icon>add</v-icon>
+                  {{ t("common.list.addNewLabel") }}
                 </v-btn>[[end]]
               </v-flex>
             </v-layout>
@@ -100,9 +99,9 @@ const listDefaultTemplate = `<template>
                     mr-sm-2
                   >
                     <v-text-field
-                      v-model="store.filters.[[.TitleField]]"
+                      v-model="filters.[[.TitleField]]"
                       :placeholder="
-                        $t('[[.JSName]].list.filter.quickFilterPlaceholder')
+                        t('[[.JSName]].list.filter.quickFilterPlaceholder')
                       "
                       hide-details
                       @keyup.enter.native="submitFilters()"
@@ -114,9 +113,10 @@ const listDefaultTemplate = `<template>
                     mr-sm-10
                   >
                     <multi-filters
-                      :filters="store.filters"
-                      :active-filters="store.activeFilters"
+                      :filters="filters"
+                      :active-filters="activeFilters"
                       @submitFilters="submitFilters"
+                      @update:filters="updateFilters"
                     />
                   </v-flex>[[end]]
                   <v-flex
@@ -124,8 +124,8 @@ const listDefaultTemplate = `<template>
                     mt-sm-4
                   >
                     <vt-compact-pagination
-                      :value="store.pagination.page"
-                      :total-pages="store.pagination.totalPages"
+                      :value="pagination.page"
+                      :total-pages="pagination.totalPages"
                       @input="setCompactPagination"
                     />
                   </v-flex>
@@ -136,9 +136,9 @@ const listDefaultTemplate = `<template>
               <v-data-table
                 v-model="selected"
                 :headers="headers"
-                :items="store.list"
-                :options="store.vuetifyTableOptions"
-                :server-items-length="store.pagination.totalItems"
+                :items="list"
+                :options="vuetifyTableOptions"
+                :server-items-length="pagination.totalItems"
                 item-key="[[range .PKs]][[.JSName]][[end]]"
                 :footer-props="{
                   itemsPerPageOptions: [10, 25, 50, 100, 500]
@@ -152,7 +152,7 @@ const listDefaultTemplate = `<template>
                   }
                 ]"
                 :show-select="false"
-                :loading="store.isLoading"
+                :loading="isLoading"
                 fixed-header
                 @update:options="setPagination"
               >[[range .ListColumns]][[if eq .JSName "statusId"]]
@@ -201,34 +201,45 @@ const listDefaultTemplate = `<template>
 </template>
 
 [[raw "<"]]script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
-import EntityList from '@/common/Entity/EntityList';
-import Store from '@/common/Entity/EntityCollectionStore';
-import {
-  [[.Name]]Summary as Model,
-  [[.Name]]Search as SearchModel
-} from '@/services/api/factory';
+import { computed, defineComponent } from 'vue';
+import { [[.Name]]Summary, [[.Name]]Search } from '@/services/api/factory';
+import { useEntityList } from '@/composables/useEntityList';
+import { useI18n } from '@/composables/useI18n';
+
 import MultiFilters from './components/MultiListFilters.vue';
 
-@Observer
-@Component({
+export default defineComponent({
+  // eslint-disable-next-line vue/multi-word-component-names
   name: 'List',
-  components: { MultiFilters }
-})
-export default class List extends EntityList {
-  store: Store = new Store(Model, SearchModel);
+  components: { MultiFilters },
+
+  setup () {
+    const { t } = useI18n();
+
+    const {
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters
+    } = useEntityList([[.Name]], [[.Name]]Search);
 
-  get headers () {
-    return [
+    const headers = computed(() => [
       [[range $i, $e := .ListColumns]][[if ne $i 0]]
       },
       [[end]]{[[if eq .JSName "statusId"]]
-        text: this.$t('[[$.JSName]].list.headers.status'),
+        text: t('[[$.JSName]].list.headers.status'),
         value: 'status',
         sortable: false
       [[- else ]]
-        text: this.$t('[[$.JSName]].list.headers.[[.JSName]]'),
+        text: t('[[$.JSName]].list.headers.[[.JSName]]'),
         value: '[[.JSName]]'[[if eq $i 0]],
         align: 'left'[[end]][[if not .IsSortable]],
         sortable: false[[end]][[end]][[end]]
@@ -237,37 +248,71 @@ export default class List extends EntityList {
       [[- else ]]
       },
       {
-        text: this.$t('[[$.JSName]].list.headers.actions'),
+        text: t('[[$.JSName]].list.headers.actions'),
         value: 'id',
         sortable: false
       }[[end]]
-    ];
+    ]);
+
+    return {
+      t,
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters,
+      headers
+    };
   }
-}
+});
 </script>
 
 <style lang="scss"></style>
 `
 
 const filterDefaultTemplate = `<template>
-  <vt-multi-filter
+  <vt-new-multi-filter
     :items="filterItems"
     :filters="filters"
     autofocus
-    :label="$t('common.list.filter.title')"
+    :label="t('common.list.filter.title')"
     @submitFilters="$emit('submitFilters')"
+    @update:filters="$emit('update:filters', $event)"
   />
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
-import EntityListFilters from '@/common/Entity/EntityListFilters';
+import { IFilterItem } from '@/common/MultiFilter/types';
+import { useI18n } from '@/composables/useI18n';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'MultiListFilters',
+
+  props: {
+    filters: {
+      type: Object,
+      required: true
+    },
+    activeFilters: {
+      type: Object,
+      required: true
+    }
+  },
+
+  emits: ['submitFilters', 'update:filters'],
 
-@Observer
-@Component
-export default class MultiListFilters extends EntityListFilters {
-  filterItems = [
+  setup () {
+    const { t } = useI18n();
+
+    const filterItems = [
 [[- $filtersLen := len .FilterColumns ]]
 [[- range $i, $e := .FilterColumns ]]
     [[- if (isLast $i $filtersLen) ]]
@@ -278,7 +323,7 @@ export default class MultiListFilters extends EntityListFilters {
     {
       id: '[[ .JSName ]]',
       type: '[[ .SearchType ]]',
-      title: this.$t('[[ $.JSName ]].list.filter.[[ .JSName ]]'),
+      title: t('[[ $.JSName ]].list.filter.[[ .JSName ]]'),
       value: [[ if .IsCheckBox ]]true[[ else ]]null[[ end ]],
       values: null,
       settings: {
@@ -307,8 +352,14 @@ export default class MultiListFilters extends EntityListFilters {
       }
     }[[ if (notLast $i $filtersLen) ]],[[ end ]]
 [[- end ]]
-  ].filter(Boolean)
-}
+  ].filter(Boolean) as IFilterItem[];
+
+    return {
+      t,
+      filterItems
+    };
+  }
+});
 </script>
 `
 
@@ -329,7 +380,7 @@ const formDefaultTemplate = `<template>
         >
           <v-flex>
             <h2 class="ellipsed">
-              {{ store.model.[[.TitleField]] || "..." }}
+              {{ model.[[.TitleField]] || "..." }}
             </h2>
           </v-flex>
           <v-spacer />
@@ -337,7 +388,7 @@ const formDefaultTemplate = `<template>
             <v-btn
               text
               color="primary"
-              :disabled="store.isLoading"
+              :disabled="isLoading"
               @click.stop="navigateBack"
             >
               <v-icon
@@ -346,7 +397,7 @@ const formDefaultTemplate = `<template>
                 arrow_back
               </v-icon>
               <template v-if="!$vuetify.breakpoint.xsOnly">
-                {{ $t("common.form.cancelButtonLabel") }}
+                {{ t("common.form.cancelButtonLabel") }}
               </template>
             </v-btn>
             <v-hover
@@ -375,7 +426,7 @@ const formDefaultTemplate = `<template>
             Основные
           </v-tab>
         </v-tabs>
-        <v-card v-if="store.model">
+        <v-card v-if="model">
           <v-form
             ref="form"
             @submit.prevent="onSaveAndBack"
@@ -384,26 +435,26 @@ const formDefaultTemplate = `<template>
               <v-tabs-items v-model="tab">
                 <v-tab-item eager>
                   [[raw "<!--  generated part -->"]]
-                  [[range .FormColumns]][[if .IsCheckBox]]<vt-form-field v-model="store.model.[[.JSName]]">
+                  [[range .FormColumns]][[if .IsCheckBox]]<vt-form-field v-model="model.[[.JSName]]">
 					<template #component-slot>
 	                  [[raw "<v-checkbox"]]
-	                    v-model="store.model.[[.JSName]]"
-						[[raw ":error-messages="]]"$t(i18nFieldError(store.errors.[[.JSName]]))"
-                    	:disabled="store.isLoading"
-						:label="$t('[[$.JSName]].form.[[.JSName]]Label')"
+	                    v-model="model.[[.JSName]]"
+						[[raw ":error-messages="]]"getErrorMessage(errors.[[.JSName]])"
+                    	:disabled="isLoading"
+						:label="t('[[$.JSName]].form.[[.JSName]]Label')"
 						color="primary"
 	                  />
 					</template>
                   </vt-form-field>
                   [[else]][[raw "<vt-form-field"]]
-                    v-model="store.model.[[.JSName]]"[[if .IsFK]]
+                    v-model="model.[[.JSName]]"[[if .IsFK]]
                     entity="[[ .FKJSName | ToLower ]]"
                     search-by="[[.FKJSSearch]]"
                     prefetch[[end]]
                     component="[[.Component]]"
-                    :label="$t('[[$.JSName]].form.[[.JSName]]Label')"
-                    :error-messages="$t(i18nFieldError(store.errors.[[.JSName]]))"
-                    :disabled="store.isLoading"
+                    :label="t('[[$.JSName]].form.[[.JSName]]Label')"
+                    :error-messages="getErrorMessage(errors.[[.JSName]])"
+                    :disabled="isLoading"
                     placeholder=""[[if .Required]]
                     required[[else]]
                     clearable[[end]][[if eq .Component "vt-datetime-picker"]]
@@ -424,21 +475,21 @@ const formDefaultTemplate = `<template>
                     <v-btn
                       type="submit"
                       color="success"
-                      :disabled="!store.isChanged || store.isLoading"
-                      :loading="store.isLoading"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="!$vuetify.breakpoint.xsOnly && 'mx-2'"
                     >
                       <v-icon left>
                         done
                       </v-icon>
-                      {{ $t("common.form.saveAndCloseButtonLabel") }}
+                      {{ t("common.form.saveAndCloseButtonLabel") }}
                     </v-btn>
 
                     <v-btn
                       v-if="$route.params.id"
-                      :disabled="!store.isChanged || store.isLoading"
-                      :loading="store.isLoading"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="[
                         $vuetify.breakpoint.xsOnly && 'ml-0 mt-2',
@@ -448,7 +499,7 @@ const formDefaultTemplate = `<template>
                       color="accent"
                       @click.stop="onSave"
                     >
-                      {{ $t("common.form.saveButtonLabel") }}
+                      {{ t("common.form.saveButtonLabel") }}
                     </v-btn>
                     <v-spacer />
                   </v-layout>
@@ -463,17 +514,58 @@ const formDefaultTemplate = `<template>
 </template>
 
 [[raw "<script"]] lang="ts">
-import { Component } from 'vue-property-decorator';
-import { Observer } from 'mobx-vue';
+import { useEntityForm } from '@/composables/useEntityForm';
+import { useI18n } from '@/composables/useI18n'
 import { [[.Name]] as Model } from '@/services/api/factory';
-import Store from '@/common/Entity/EntityModelStore';
-import EntityForm from '@/common/Entity/EntityForm';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  // eslint-disable-next-line vue/match-component-file-name
+  name: '[[.Name]]Form',
+
+  setup () {
+    const { t } = useI18n();
 
-@Observer
-@Component
-export default class Form extends EntityForm {
-  store: Store<Model> = new Store<Model>(Model);
-}
+    const {
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    } = useEntityForm<Model>(Model);
+
+	const getErrorMessage = (errorKey: string | null): string => {
+      const errorMessage = i18nFieldError(errorKey);
+      return errorMessage ? t(errorMessage) : '';
+    };
+
+    return {
+      t,
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+      getErrorMessage,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    };
+  }
+});
 </script>
 
 <style scoped></style>

From bc99b97bb768a5223e03704454313c27b4efec05 Mon Sep 17 00:00:00 2001
From: andrey <palchikov@uteka.ru>
Date: Wed, 25 Mar 2026 16:02:59 +0300
Subject: [PATCH 2/9] Save routes with part

---
 generators/vt-template/generator.go | 74 +++++++++++++++++++++++++++--
 1 file changed, 71 insertions(+), 3 deletions(-)

diff --git a/generators/vt-template/generator.go b/generators/vt-template/generator.go
index 004ac00..8d4a6c5 100644
--- a/generators/vt-template/generator.go
+++ b/generators/vt-template/generator.go
@@ -4,7 +4,10 @@ import (
 	"bytes"
 	"fmt"
 	"html/template"
+	"os"
 	"path"
+	"regexp"
+	"strings"
 
 	"github.com/vmkteam/mfd-generator/mfd"
 
@@ -115,6 +118,32 @@ func (g *Generator) Generate() error {
 		return err
 	}
 
+	var targetEntities []string
+	isPartial := len(g.options.Namespaces) > 0 || len(g.options.Entities) > 0
+
+	if isPartial {
+		nsList := g.options.Namespaces
+		if len(nsList) == 0 {
+			nsList = project.NamespaceNames
+		}
+		for _, nsName := range nsList {
+			ns := project.VTNamespace(nsName)
+			if ns == nil {
+				continue
+			}
+			entityNames := ns.VTEntityNames()
+			if len(g.options.Entities) != 0 {
+				entityNames = g.options.Entities
+			}
+
+			for _, eName := range entityNames {
+				if entity := ns.VTEntity(eName); entity != nil {
+					targetEntities = append(targetEntities, entity.Name)
+				}
+			}
+		}
+	}
+
 	if len(g.options.Namespaces) == 0 {
 		g.options.Namespaces = project.NamespaceNames
 	}
@@ -141,7 +170,7 @@ func (g *Generator) Generate() error {
 	}
 
 	// generating routes for all namespaces
-	if _, err := g.SaveRoutes(project.VTNamespaces, routesTemplate); err != nil {
+	if _, err := g.SaveRoutes(project.VTNamespaces, routesTemplate, targetEntities); err != nil {
 		return fmt.Errorf("generate routes, err=%w", err)
 	}
 
@@ -221,7 +250,7 @@ func (g *Generator) SaveEntity(entity mfd.VTEntity, output, tmpl string) error {
 }
 
 // SaveRoutes saves all vt namespaces to routes file
-func (g *Generator) SaveRoutes(namespaces []*mfd.VTNamespace, tmpl string) (bool, error) {
+func (g *Generator) SaveRoutes(namespaces []*mfd.VTNamespace, tmpl string, targetEntities []string) (bool, error) {
 	parsed, err := template.New("base").Funcs(mfd.TemplateFunctions).Parse(tmpl)
 	if err != nil {
 		return false, fmt.Errorf("parsing template, err=%w", err)
@@ -237,7 +266,46 @@ func (g *Generator) SaveRoutes(namespaces []*mfd.VTNamespace, tmpl string) (bool
 		return false, fmt.Errorf("processing model template, err=%w", err)
 	}
 
-	return mfd.Save(buffer.Bytes(), path.Join(g.options.Output, "src/pages/Entity/routes.ts"))
+	routesPath := path.Join(g.options.Output, "src/pages/Entity/routes.ts")
+
+	if len(targetEntities) == 0 {
+		return mfd.Save(buffer.Bytes(), routesPath)
+	}
+
+	existingData, err := os.ReadFile(routesPath)
+	if err != nil {
+		return mfd.Save(buffer.Bytes(), routesPath)
+	}
+
+	existingStr := string(existingData)
+	newStr := buffer.String()
+
+	for _, entityName := range targetEntities {
+		pattern := fmt.Sprintf(`(?s)([ \t]*/\*\s*%s\s*\*/.*?)([ \t]*/\*\s*[a-zA-Z0-9_]+\s*\*/|\s*\];)`, entityName)
+		re := regexp.MustCompile(pattern)
+
+		matches := re.FindStringSubmatch(newStr)
+		if len(matches) < 3 {
+			continue
+		}
+
+		cleanBlock := strings.TrimSpace(matches[1])
+
+		if re.MatchString(existingStr) {
+			existingStr = re.ReplaceAllString(existingStr, "   "+cleanBlock+"\n${2}")
+		} else {
+			insertIndex := strings.LastIndex(existingStr, "];")
+			if insertIndex != -1 {
+				leftPart := strings.TrimRight(existingStr[:insertIndex], " \t\r\n,")
+				if strings.HasSuffix(leftPart, "}") {
+					leftPart += ","
+				}
+				existingStr = leftPart + "\n    " + cleanBlock + "\n];\n"
+			}
+		}
+	}
+
+	return mfd.Save([]byte(existingStr), routesPath)
 }
 
 func (g *Generator) SaveLang(entity *mfd.TranslationEntity, lang string) error {

From f0ddd44006f07ffe00b8ad5b757d6b31e7fc38d8 Mon Sep 17 00:00:00 2001
From: andrey <palchikov@uteka.ru>
Date: Wed, 25 Mar 2026 17:13:50 +0300
Subject: [PATCH 3/9] Add partial generate routes, fix tests, update vt
 template

---
 .../all/src/pages/Entity/Category/Form.vue    |   2 +-
 .../all/src/pages/Entity/Category/List.vue    |   2 +-
 .../all/src/pages/Entity/News/Form.vue        |   2 +-
 .../all/src/pages/Entity/News/List.vue        |   2 +-
 .../all/src/pages/Entity/Tag/Form.vue         |   2 +-
 .../all/src/pages/Entity/Tag/List.vue         |   2 +-
 .../src/pages/Entity/Category/Form.vue        |   2 +-
 .../src/pages/Entity/Category/List.vue        |   2 +-
 .../entities/src/pages/Entity/Tag/Form.vue    |   2 +-
 .../entities/src/pages/Entity/Tag/List.vue    |   2 +-
 generators/vt-template/generator.go           |  99 +++++--
 generators/vt-template/generator_test.go      | 246 +++++++++++++++++-
 generators/vt-template/template.go            |  63 ++---
 generators/vt-template/vt_template.go         |   2 +-
 14 files changed, 369 insertions(+), 61 deletions(-)

diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/Form.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/Form.vue
index 41f5809..ab8d2d8 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/Form.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/Form.vue
@@ -176,7 +176,7 @@ export default defineComponent({
       onDelete,
       navigateBack,
       onSaveAndBack
-    } = useEntityForm<Model>(Model);
+    } = useEntityForm<Model>({ Model} );
 
 	const getErrorMessage = (errorKey: string | null): string => {
       const errorMessage = i18nFieldError(errorKey);
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/List.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/List.vue
index 1c63952..261806a 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/List.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/List.vue
@@ -192,7 +192,7 @@ export default defineComponent({
       setCompactPagination,
       setPagination,
       updateFilters
-    } = useEntityList(Category, CategorySearch);
+    } = useEntityList(CategorySummary, CategorySearch);
 
     const headers = computed(() => [
       {
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/News/Form.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/News/Form.vue
index ac58a62..ff0c74e 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/News/Form.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/News/Form.vue
@@ -251,7 +251,7 @@ export default defineComponent({
       onDelete,
       navigateBack,
       onSaveAndBack
-    } = useEntityForm<Model>(Model);
+    } = useEntityForm<Model>({ Model} );
 
 	const getErrorMessage = (errorKey: string | null): string => {
       const errorMessage = i18nFieldError(errorKey);
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/News/List.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/News/List.vue
index e86ccd6..c9dc873 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/News/List.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/News/List.vue
@@ -204,7 +204,7 @@ export default defineComponent({
       setCompactPagination,
       setPagination,
       updateFilters
-    } = useEntityList(News, NewsSearch);
+    } = useEntityList(NewsSummary, NewsSearch);
 
     const headers = computed(() => [
       {
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/Form.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/Form.vue
index 0391899..6630576 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/Form.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/Form.vue
@@ -168,7 +168,7 @@ export default defineComponent({
       onDelete,
       navigateBack,
       onSaveAndBack
-    } = useEntityForm<Model>(Model);
+    } = useEntityForm<Model>({ Model} );
 
 	const getErrorMessage = (errorKey: string | null): string => {
       const errorMessage = i18nFieldError(errorKey);
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/List.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/List.vue
index eb520c5..71dec4b 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/List.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/List.vue
@@ -189,7 +189,7 @@ export default defineComponent({
       setCompactPagination,
       setPagination,
       updateFilters
-    } = useEntityList(Tag, TagSearch);
+    } = useEntityList(TagSummary, TagSearch);
 
     const headers = computed(() => [
       {
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/Form.vue b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/Form.vue
index 41f5809..ab8d2d8 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/Form.vue
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/Form.vue
@@ -176,7 +176,7 @@ export default defineComponent({
       onDelete,
       navigateBack,
       onSaveAndBack
-    } = useEntityForm<Model>(Model);
+    } = useEntityForm<Model>({ Model} );
 
 	const getErrorMessage = (errorKey: string | null): string => {
       const errorMessage = i18nFieldError(errorKey);
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/List.vue b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/List.vue
index 1c63952..261806a 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/List.vue
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/List.vue
@@ -192,7 +192,7 @@ export default defineComponent({
       setCompactPagination,
       setPagination,
       updateFilters
-    } = useEntityList(Category, CategorySearch);
+    } = useEntityList(CategorySummary, CategorySearch);
 
     const headers = computed(() => [
       {
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/Form.vue b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/Form.vue
index 0391899..6630576 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/Form.vue
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/Form.vue
@@ -168,7 +168,7 @@ export default defineComponent({
       onDelete,
       navigateBack,
       onSaveAndBack
-    } = useEntityForm<Model>(Model);
+    } = useEntityForm<Model>({ Model} );
 
 	const getErrorMessage = (errorKey: string | null): string => {
       const errorMessage = i18nFieldError(errorKey);
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/List.vue b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/List.vue
index eb520c5..71dec4b 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/List.vue
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/List.vue
@@ -189,7 +189,7 @@ export default defineComponent({
       setCompactPagination,
       setPagination,
       updateFilters
-    } = useEntityList(Tag, TagSearch);
+    } = useEntityList(TagSummary, TagSearch);
 
     const headers = computed(() => [
       {
diff --git a/generators/vt-template/generator.go b/generators/vt-template/generator.go
index 8d4a6c5..3797172 100644
--- a/generators/vt-template/generator.go
+++ b/generators/vt-template/generator.go
@@ -6,7 +6,6 @@ import (
 	"html/template"
 	"os"
 	"path"
-	"regexp"
 	"strings"
 
 	"github.com/vmkteam/mfd-generator/mfd"
@@ -268,6 +267,7 @@ func (g *Generator) SaveRoutes(namespaces []*mfd.VTNamespace, tmpl string, targe
 
 	routesPath := path.Join(g.options.Output, "src/pages/Entity/routes.ts")
 
+	// base flow when generate all routes
 	if len(targetEntities) == 0 {
 		return mfd.Save(buffer.Bytes(), routesPath)
 	}
@@ -277,35 +277,98 @@ func (g *Generator) SaveRoutes(namespaces []*mfd.VTNamespace, tmpl string, targe
 		return mfd.Save(buffer.Bytes(), routesPath)
 	}
 
-	existingStr := string(existingData)
 	newStr := buffer.String()
+	existingStr := string(existingData)
 
 	for _, entityName := range targetEntities {
-		pattern := fmt.Sprintf(`(?s)([ \t]*/\*\s*%s\s*\*/.*?)([ \t]*/\*\s*[a-zA-Z0-9_]+\s*\*/|\s*\];)`, entityName)
-		re := regexp.MustCompile(pattern)
-
-		matches := re.FindStringSubmatch(newStr)
-		if len(matches) < 3 {
+		// get new code block
+		newBlock := extractEntityBlock(newStr, entityName)
+		if len(newBlock) == 0 {
 			continue
 		}
+		// insert new code with flow
+		existingStr = injectEntityBlock(existingStr, entityName, newBlock)
+	}
+
+	return mfd.Save([]byte(existingStr), routesPath)
+}
+
+// extractEntityBlock get block code from content by entity name
+func extractEntityBlock(content string, entityName string) []string {
+	var block []string
+	inBlock := false
+	marker := fmt.Sprintf("/* %s */", entityName)
+
+	lines := strings.Split(content, "\n")
+	for _, line := range lines {
+		trimmed := strings.TrimSpace(line)
+
+		if inBlock {
+			if strings.HasPrefix(trimmed, "/*") || trimmed == "];" {
+				break
+			}
+			block = append(block, strings.TrimPrefix(line, "  "))
+		} else if trimmed == marker {
+			inBlock = true
+		}
+	}
+
+	return block
+}
+
+// injectEntityBlock update or concat body with new blocks
+func injectEntityBlock(existingContent string, entityName string, newBlock []string) string {
+	var result []string
+	inBlock := false
+	found := false
+	marker := fmt.Sprintf("/* %s */", entityName)
+
+	lines := strings.Split(existingContent, "\n")
+	for _, line := range lines {
+		trimmed := strings.TrimSpace(line)
+
+		if inBlock {
+			if strings.HasPrefix(trimmed, "/*") || trimmed == "];" {
+				inBlock = false
+			} else {
+				continue
+			}
+		}
+
+		// Case 1 - when found
+		if !inBlock && trimmed == marker {
+			inBlock = true
+			found = true
 
-		cleanBlock := strings.TrimSpace(matches[1])
+			result = append(result, "    "+marker)
+			for _, bLine := range newBlock {
+				result = append(result, "  "+bLine)
+			}
+			continue
+		}
 
-		if re.MatchString(existingStr) {
-			existingStr = re.ReplaceAllString(existingStr, "   "+cleanBlock+"\n${2}")
-		} else {
-			insertIndex := strings.LastIndex(existingStr, "];")
-			if insertIndex != -1 {
-				leftPart := strings.TrimRight(existingStr[:insertIndex], " \t\r\n,")
-				if strings.HasSuffix(leftPart, "}") {
-					leftPart += ","
+		// Case 2 - not found, create new
+		if !found && trimmed == "];" {
+			if len(result) > 0 {
+				lastIdx := len(result) - 1
+				if strings.HasSuffix(strings.TrimSpace(result[lastIdx]), "}") {
+					result[lastIdx] += ","
 				}
-				existingStr = leftPart + "\n    " + cleanBlock + "\n];\n"
 			}
+
+			result = append(result, "    "+marker)
+			for _, bLine := range newBlock {
+				result = append(result, "  "+bLine)
+			}
+			found = true
+		}
+
+		if !inBlock {
+			result = append(result, line)
 		}
 	}
 
-	return mfd.Save([]byte(existingStr), routesPath)
+	return strings.Join(result, "\n")
 }
 
 func (g *Generator) SaveLang(entity *mfd.TranslationEntity, lang string) error {
diff --git a/generators/vt-template/generator_test.go b/generators/vt-template/generator_test.go
index 3d5c8de..109d57f 100644
--- a/generators/vt-template/generator_test.go
+++ b/generators/vt-template/generator_test.go
@@ -3,12 +3,12 @@ package vttmpl
 import (
 	"os"
 	"path/filepath"
+	"reflect"
 	"strings"
 	"testing"
 
-	"github.com/vmkteam/mfd-generator/generators/testdata"
-
 	. "github.com/smartystreets/goconvey/convey"
+	"github.com/vmkteam/mfd-generator/generators/testdata"
 )
 
 func TestGenerator_Generate(t *testing.T) {
@@ -124,3 +124,245 @@ func fullFilesPaths(path string) ([]string, error) {
 
 	return filePaths, nil
 }
+
+func TestManualGenerate(t *testing.T) {
+	t.Skip()
+	generator := New()
+
+	generator.options.Output = ""
+	generator.options.MFDPath = ""
+	generator.options.Namespaces = []string{"article", "catalogue"}
+	generator.options.Entities = []string{"tag", "category"}
+
+	err := generator.Generate()
+	if err != nil {
+		t.Error(err)
+	}
+}
+
+func Test_extractEntityBlock(t *testing.T) {
+	type args struct {
+		content    string
+		entityName string
+	}
+	tests := []struct {
+		name string
+		args args
+		want []string
+	}{
+		{
+			name: "middle body contains",
+			args: args{
+				entityName: "Category",
+				content: `export default [
+  
+  /* News */
+  {
+    name: "newsList",
+    path: "/news",
+  },
+  /* Category */
+  {
+    name: "categoryList",
+    path: "/category",
+  },
+  /* Tag */
+  {
+    name: "tagList",
+  },
+];`,
+			},
+			want: []string{
+				`{`,
+				`  name: "categoryList",`,
+				`  path: "/category",`,
+				`},`,
+			},
+		},
+		{
+			name: "last body",
+			args: args{
+				entityName: "Tag",
+				content: `export default [
+  /* Category */
+  {
+    name: "categoryList",
+  },
+  /* Tag */
+  {
+    name: "tagList",
+    path: "/tags",
+  }
+];`,
+			},
+			want: []string{
+				`{`,
+				`  name: "tagList",`,
+				`  path: "/tags",`,
+				`}`,
+			},
+		},
+		{
+			name: "now found",
+			args: args{
+				entityName: "News",
+				content: `export default [
+  /* Category */
+  {
+    name: "categoryList",
+  },
+];`,
+			},
+			want: nil,
+		},
+		{
+			name: "empty content",
+			args: args{
+				entityName: "Category",
+				content:    ``,
+			},
+			want: nil,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			got := extractEntityBlock(tt.args.content, tt.args.entityName)
+
+			if !reflect.DeepEqual(got, tt.want) {
+
+				t.Errorf("extractEntityBlock() =\n%#v\nwant\n%#v", got, tt.want)
+			}
+		})
+	}
+}
+
+func Test_injectEntityBlock(t *testing.T) {
+	sampleNewBlock := []string{
+		`{`,
+		`  name: "tagList",`,
+		`  path: "/tags",`,
+		`},`,
+	}
+
+	type args struct {
+		existingContent string
+		entityName      string
+		newBlock        []string
+	}
+	tests := []struct {
+		name string
+		args args
+		want string
+	}{
+		{
+			name: "update middle body",
+			args: args{
+				entityName: "Tag",
+				newBlock:   sampleNewBlock,
+				existingContent: `export default [
+  /* Category */
+  {
+    name: "categoryList",
+  },
+  /* Tag */
+  {
+    name: "oldTagList",
+  },
+  /* News */
+  {
+    name: "newsList",
+  }
+];`,
+			},
+			want: `export default [
+  /* Category */
+  {
+    name: "categoryList",
+  },
+    /* Tag */
+  {
+    name: "tagList",
+    path: "/tags",
+  },
+  /* News */
+  {
+    name: "newsList",
+  }
+];`,
+		},
+		{
+			name: "insert new data variant 1",
+			args: args{
+				entityName: "Tag",
+				newBlock:   sampleNewBlock,
+				existingContent: `export default [
+  /* Category */
+  {
+    name: "categoryList",
+  },
+];`,
+			},
+			want: `export default [
+  /* Category */
+  {
+    name: "categoryList",
+  },
+    /* Tag */
+  {
+    name: "tagList",
+    path: "/tags",
+  },
+];`,
+		},
+		{
+			name: "insert new data variant 2",
+			args: args{
+				entityName: "Tag",
+				newBlock:   sampleNewBlock,
+				existingContent: `export default [
+  /* Category */
+  {
+    name: "categoryList"
+  }
+];`,
+			},
+			want: `export default [
+  /* Category */
+  {
+    name: "categoryList"
+  },
+    /* Tag */
+  {
+    name: "tagList",
+    path: "/tags",
+  },
+];`,
+		},
+		{
+			name: "insert new data variant 2",
+			args: args{
+				entityName: "Tag",
+				newBlock:   sampleNewBlock,
+				existingContent: `export default [
+];`,
+			},
+			want: `export default [
+    /* Tag */
+  {
+    name: "tagList",
+    path: "/tags",
+  },
+];`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			got := injectEntityBlock(tt.args.existingContent, tt.args.entityName, tt.args.newBlock)
+			if got != tt.want {
+				t.Errorf("injectEntityBlock() failed.\n\n GOT \n%s\n\n WANT \n%s\n", got, tt.want)
+			}
+		})
+	}
+}
diff --git a/generators/vt-template/template.go b/generators/vt-template/template.go
index e3c059f..1d89d0b 100644
--- a/generators/vt-template/template.go
+++ b/generators/vt-template/template.go
@@ -2,34 +2,37 @@ package vttmpl
 
 const routesDefaultTemplate = `/* eslint-disable */
 export default [{{range $model := .Entities}}
-  /* {{.Name}} */
-  {
-    name: "{{.JSName}}List",
-    path: "/{{.TerminalPath}}",
-    component: () =>
-      import("@/pages/Entity/{{.Name}}/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "{{.JSName}}List"]
-    }
-  },
-  {{if not .ReadOnly}}{
-    name: "{{.JSName}}Edit",
-    path: "/{{.TerminalPath}}/:id/edit",
-    component: () =>
-      import("@/pages/Entity/{{.Name}}/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "{{.JSName}}List", "{{.JSName}}Edit"]
-    }
-  },
-  {
-    name: "{{.JSName}}Add",
-    path: "/{{.TerminalPath}}/add",
-    component: () =>
-      import("@/pages/Entity/{{.Name}}/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "{{.JSName}}List", "{{.JSName}}Add"]
-    }
-  },{{end}}{{end}}
+    /* {{.Name}} */
+    {
+        name: "{{.JSName}}List",
+        path: "/{{.TerminalPath}}",
+        component: () =>
+            import("@/pages/Entity/{{.Name}}/List.vue"),
+        meta: {
+            title: "{{.Name}}List",
+            breadcrumbs: ["dashboard", "{{.JSName}}List"]
+        }
+    },
+    {{if not .ReadOnly}}{
+        name: "{{.JSName}}Edit",
+        path: "/{{.TerminalPath}}/:id/edit",
+        component: () =>
+            import("@/pages/Entity/{{.Name}}/Form.vue"),
+        meta: {
+            title: "{{.Name}}Edit",
+            breadcrumbs: ["dashboard", "{{.JSName}}List", "{{.JSName}}Edit"]
+        }
+    },
+    {
+        name: "{{.JSName}}Add",
+        path: "/{{.TerminalPath}}/add",
+        component: () =>
+            import("@/pages/Entity/{{.Name}}/Form.vue"),
+        meta: {
+            title: "{{.Name}}Add",
+            breadcrumbs: ["dashboard", "{{.JSName}}List", "{{.JSName}}Add"]
+        }
+    },{{end}}{{end}}
 ];
 `
 
@@ -229,7 +232,7 @@ export default defineComponent({
       setCompactPagination,
       setPagination,
       updateFilters
-    } = useEntityList([[.Name]], [[.Name]]Search);
+    } = useEntityList([[.Name]]Summary, [[.Name]]Search);
 
     const headers = computed(() => [
       [[range $i, $e := .ListColumns]][[if ne $i 0]]
@@ -540,7 +543,7 @@ export default defineComponent({
       onDelete,
       navigateBack,
       onSaveAndBack
-    } = useEntityForm<Model>(Model);
+    } = useEntityForm<Model>({ Model} );
 
 	const getErrorMessage = (errorKey: string | null): string => {
       const errorMessage = i18nFieldError(errorKey);
diff --git a/generators/vt-template/vt_template.go b/generators/vt-template/vt_template.go
index cd51ad4..ced2534 100644
--- a/generators/vt-template/vt_template.go
+++ b/generators/vt-template/vt_template.go
@@ -164,7 +164,7 @@ func PackInput(tmpl mfd.TmplAttribute, vtEntity mfd.VTEntity, isSearch bool) Inp
 			trasliteratingValue := template.HTML(mfd.VarName(title.Name))
 
 			inp.Component = "vt-transliterator"
-			inp.Params = append(inp.Params, `:value-for-transliterating="store.model.`+trasliteratingValue+`"`)
+			inp.Params = append(inp.Params, `:value-for-transliterating="model.`+trasliteratingValue+`"`)
 		}
 	}
 

From 4d529e3026afe9559139e4543653d27592388c81 Mon Sep 17 00:00:00 2001
From: andrey <palchikov@uteka.ru>
Date: Wed, 25 Mar 2026 17:14:15 +0300
Subject: [PATCH 4/9] Add partial generate routes, fix tests, update vt
 template

---
 .../all/src/pages/Entity/routes.ts            | 177 +++++++++---------
 .../entities/src/pages/Entity/routes.ts       | 118 ++++++------
 2 files changed, 155 insertions(+), 140 deletions(-)

diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/routes.ts b/generators/testdata/expected/vt-template/all/src/pages/Entity/routes.ts
index 7c69d18..a84606f 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/routes.ts
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/routes.ts
@@ -1,89 +1,98 @@
 /* eslint-disable */
 export default [
-  /* Category */
-  {
-    name: "categoryList",
-    path: "/categories",
-    component: () =>
-      import("@/pages/Entity/Category/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "categoryList"]
-    }
-  },
-  {
-    name: "categoryEdit",
-    path: "/categories/:id/edit",
-    component: () =>
-      import("@/pages/Entity/Category/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "categoryList", "categoryEdit"]
-    }
-  },
-  {
-    name: "categoryAdd",
-    path: "/categories/add",
-    component: () =>
-      import("@/pages/Entity/Category/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "categoryList", "categoryAdd"]
-    }
-  },
-  /* News */
-  {
-    name: "newsList",
-    path: "/news",
-    component: () =>
-      import("@/pages/Entity/News/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "newsList"]
-    }
-  },
-  {
-    name: "newsEdit",
-    path: "/news/:id/edit",
-    component: () =>
-      import("@/pages/Entity/News/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "newsList", "newsEdit"]
-    }
-  },
-  {
-    name: "newsAdd",
-    path: "/news/add",
-    component: () =>
-      import("@/pages/Entity/News/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "newsList", "newsAdd"]
-    }
-  },
-  /* Tag */
-  {
-    name: "tagList",
-    path: "/tags",
-    component: () =>
-      import("@/pages/Entity/Tag/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "tagList"]
-    }
-  },
-  {
-    name: "tagEdit",
-    path: "/tags/:id/edit",
-    component: () =>
-      import("@/pages/Entity/Tag/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "tagList", "tagEdit"]
-    }
-  },
-  {
-    name: "tagAdd",
-    path: "/tags/add",
-    component: () =>
-      import("@/pages/Entity/Tag/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "tagList", "tagAdd"]
-    }
-  },
+    /* Category */
+    {
+        name: "categoryList",
+        path: "/categories",
+        component: () =>
+            import("@/pages/Entity/Category/List.vue"),
+        meta: {
+            title: "CategoryList",
+            breadcrumbs: ["dashboard", "categoryList"]
+        }
+    },
+    {
+        name: "categoryEdit",
+        path: "/categories/:id/edit",
+        component: () =>
+            import("@/pages/Entity/Category/Form.vue"),
+        meta: {
+            title: "CategoryEdit",
+            breadcrumbs: ["dashboard", "categoryList", "categoryEdit"]
+        }
+    },
+    {
+        name: "categoryAdd",
+        path: "/categories/add",
+        component: () =>
+            import("@/pages/Entity/Category/Form.vue"),
+        meta: {
+            title: "CategoryAdd",
+            breadcrumbs: ["dashboard", "categoryList", "categoryAdd"]
+        }
+    },
+    /* News */
+    {
+        name: "newsList",
+        path: "/news",
+        component: () =>
+            import("@/pages/Entity/News/List.vue"),
+        meta: {
+            title: "NewsList",
+            breadcrumbs: ["dashboard", "newsList"]
+        }
+    },
+    {
+        name: "newsEdit",
+        path: "/news/:id/edit",
+        component: () =>
+            import("@/pages/Entity/News/Form.vue"),
+        meta: {
+            title: "NewsEdit",
+            breadcrumbs: ["dashboard", "newsList", "newsEdit"]
+        }
+    },
+    {
+        name: "newsAdd",
+        path: "/news/add",
+        component: () =>
+            import("@/pages/Entity/News/Form.vue"),
+        meta: {
+            title: "NewsAdd",
+            breadcrumbs: ["dashboard", "newsList", "newsAdd"]
+        }
+    },
+    /* Tag */
+    {
+        name: "tagList",
+        path: "/tags",
+        component: () =>
+            import("@/pages/Entity/Tag/List.vue"),
+        meta: {
+            title: "TagList",
+            breadcrumbs: ["dashboard", "tagList"]
+        }
+    },
+    {
+        name: "tagEdit",
+        path: "/tags/:id/edit",
+        component: () =>
+            import("@/pages/Entity/Tag/Form.vue"),
+        meta: {
+            title: "TagEdit",
+            breadcrumbs: ["dashboard", "tagList", "tagEdit"]
+        }
+    },
+    {
+        name: "tagAdd",
+        path: "/tags/add",
+        component: () =>
+            import("@/pages/Entity/Tag/Form.vue"),
+        meta: {
+            title: "TagAdd",
+            breadcrumbs: ["dashboard", "tagList", "tagAdd"]
+        }
+    },
   /* City */
   {
     name: "cityList",
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/routes.ts b/generators/testdata/expected/vt-template/entities/src/pages/Entity/routes.ts
index 7c69d18..b168d22 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/routes.ts
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/routes.ts
@@ -1,33 +1,36 @@
 /* eslint-disable */
 export default [
-  /* Category */
-  {
-    name: "categoryList",
-    path: "/categories",
-    component: () =>
-      import("@/pages/Entity/Category/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "categoryList"]
-    }
-  },
-  {
-    name: "categoryEdit",
-    path: "/categories/:id/edit",
-    component: () =>
-      import("@/pages/Entity/Category/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "categoryList", "categoryEdit"]
-    }
-  },
-  {
-    name: "categoryAdd",
-    path: "/categories/add",
-    component: () =>
-      import("@/pages/Entity/Category/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "categoryList", "categoryAdd"]
-    }
-  },
+    /* Category */
+    {
+        name: "categoryList",
+        path: "/categories",
+        component: () =>
+            import("@/pages/Entity/Category/List.vue"),
+        meta: {
+            title: "CategoryList",
+            breadcrumbs: ["dashboard", "categoryList"]
+        }
+    },
+    {
+        name: "categoryEdit",
+        path: "/categories/:id/edit",
+        component: () =>
+            import("@/pages/Entity/Category/Form.vue"),
+        meta: {
+            title: "CategoryEdit",
+            breadcrumbs: ["dashboard", "categoryList", "categoryEdit"]
+        }
+    },
+    {
+        name: "categoryAdd",
+        path: "/categories/add",
+        component: () =>
+            import("@/pages/Entity/Category/Form.vue"),
+        meta: {
+            title: "CategoryAdd",
+            breadcrumbs: ["dashboard", "categoryList", "categoryAdd"]
+        }
+    },
   /* News */
   {
     name: "newsList",
@@ -56,34 +59,37 @@ export default [
       breadcrumbs: ["dashboard", "newsList", "newsAdd"]
     }
   },
-  /* Tag */
-  {
-    name: "tagList",
-    path: "/tags",
-    component: () =>
-      import("@/pages/Entity/Tag/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "tagList"]
-    }
-  },
-  {
-    name: "tagEdit",
-    path: "/tags/:id/edit",
-    component: () =>
-      import("@/pages/Entity/Tag/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "tagList", "tagEdit"]
-    }
-  },
-  {
-    name: "tagAdd",
-    path: "/tags/add",
-    component: () =>
-      import("@/pages/Entity/Tag/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "tagList", "tagAdd"]
-    }
-  },
+    /* Tag */
+    {
+        name: "tagList",
+        path: "/tags",
+        component: () =>
+            import("@/pages/Entity/Tag/List.vue"),
+        meta: {
+            title: "TagList",
+            breadcrumbs: ["dashboard", "tagList"]
+        }
+    },
+    {
+        name: "tagEdit",
+        path: "/tags/:id/edit",
+        component: () =>
+            import("@/pages/Entity/Tag/Form.vue"),
+        meta: {
+            title: "TagEdit",
+            breadcrumbs: ["dashboard", "tagList", "tagEdit"]
+        }
+    },
+    {
+        name: "tagAdd",
+        path: "/tags/add",
+        component: () =>
+            import("@/pages/Entity/Tag/Form.vue"),
+        meta: {
+            title: "TagAdd",
+            breadcrumbs: ["dashboard", "tagList", "tagAdd"]
+        }
+    },
   /* City */
   {
     name: "cityList",

From 5180d94853ce9801cc3b419f5126912ef8edff7d Mon Sep 17 00:00:00 2001
From: andrey <palchikov@uteka.ru>
Date: Wed, 25 Mar 2026 17:28:56 +0300
Subject: [PATCH 5/9] Fix linter

---
 generators/vt-template/generator.go      | 65 +++++++++++++-----------
 generators/vt-template/generator_test.go |  4 +-
 2 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/generators/vt-template/generator.go b/generators/vt-template/generator.go
index 3797172..9239f76 100644
--- a/generators/vt-template/generator.go
+++ b/generators/vt-template/generator.go
@@ -117,32 +117,6 @@ func (g *Generator) Generate() error {
 		return err
 	}
 
-	var targetEntities []string
-	isPartial := len(g.options.Namespaces) > 0 || len(g.options.Entities) > 0
-
-	if isPartial {
-		nsList := g.options.Namespaces
-		if len(nsList) == 0 {
-			nsList = project.NamespaceNames
-		}
-		for _, nsName := range nsList {
-			ns := project.VTNamespace(nsName)
-			if ns == nil {
-				continue
-			}
-			entityNames := ns.VTEntityNames()
-			if len(g.options.Entities) != 0 {
-				entityNames = g.options.Entities
-			}
-
-			for _, eName := range entityNames {
-				if entity := ns.VTEntity(eName); entity != nil {
-					targetEntities = append(targetEntities, entity.Name)
-				}
-			}
-		}
-	}
-
 	if len(g.options.Namespaces) == 0 {
 		g.options.Namespaces = project.NamespaceNames
 	}
@@ -169,7 +143,7 @@ func (g *Generator) Generate() error {
 	}
 
 	// generating routes for all namespaces
-	if _, err := g.SaveRoutes(project.VTNamespaces, routesTemplate, targetEntities); err != nil {
+	if _, err := g.SaveRoutes(project, routesTemplate); err != nil {
 		return fmt.Errorf("generate routes, err=%w", err)
 	}
 
@@ -227,6 +201,32 @@ func (g *Generator) Generate() error {
 	return mfd.SaveMFD(g.options.MFDPath, project)
 }
 
+func (g *Generator) getTargetEntities(project *mfd.Project) []string {
+	var targetEntities []string
+	nsList := g.options.Namespaces
+	if len(nsList) == 0 {
+		nsList = project.NamespaceNames
+	}
+	for _, nsName := range nsList {
+		ns := project.VTNamespace(nsName)
+		if ns == nil {
+			continue
+		}
+		entityNames := ns.VTEntityNames()
+		if len(g.options.Entities) != 0 {
+			entityNames = g.options.Entities
+		}
+
+		for _, eName := range entityNames {
+			if entity := ns.VTEntity(eName); entity != nil {
+				targetEntities = append(targetEntities, entity.Name)
+			}
+		}
+	}
+
+	return targetEntities
+}
+
 // SaveEntity saves vt entity to template with special delims
 func (g *Generator) SaveEntity(entity mfd.VTEntity, output, tmpl string) error {
 	parsed, err := template.New("base").
@@ -249,13 +249,20 @@ func (g *Generator) SaveEntity(entity mfd.VTEntity, output, tmpl string) error {
 }
 
 // SaveRoutes saves all vt namespaces to routes file
-func (g *Generator) SaveRoutes(namespaces []*mfd.VTNamespace, tmpl string, targetEntities []string) (bool, error) {
+func (g *Generator) SaveRoutes(project *mfd.Project, tmpl string) (bool, error) {
+	var targetEntities []string
+	isPartial := len(g.options.Namespaces) > 0 || len(g.options.Entities) > 0
+
+	if isPartial {
+		targetEntities = g.getTargetEntities(project)
+	}
+
 	parsed, err := template.New("base").Funcs(mfd.TemplateFunctions).Parse(tmpl)
 	if err != nil {
 		return false, fmt.Errorf("parsing template, err=%w", err)
 	}
 
-	pack, err := PackRoutesNamespace(namespaces)
+	pack, err := PackRoutesNamespace(project.VTNamespaces)
 	if err != nil {
 		return false, fmt.Errorf("packing data, err=%w", err)
 	}
diff --git a/generators/vt-template/generator_test.go b/generators/vt-template/generator_test.go
index 109d57f..5e597d6 100644
--- a/generators/vt-template/generator_test.go
+++ b/generators/vt-template/generator_test.go
@@ -7,8 +7,9 @@ import (
 	"strings"
 	"testing"
 
-	. "github.com/smartystreets/goconvey/convey"
 	"github.com/vmkteam/mfd-generator/generators/testdata"
+
+	. "github.com/smartystreets/goconvey/convey"
 )
 
 func TestGenerator_Generate(t *testing.T) {
@@ -230,7 +231,6 @@ func Test_extractEntityBlock(t *testing.T) {
 			got := extractEntityBlock(tt.args.content, tt.args.entityName)
 
 			if !reflect.DeepEqual(got, tt.want) {
-
 				t.Errorf("extractEntityBlock() =\n%#v\nwant\n%#v", got, tt.want)
 			}
 		})

From 5fb6c5a1ddf4a424430013461e5f2415c2776897 Mon Sep 17 00:00:00 2001
From: andrey <palchikov@uteka.ru>
Date: Thu, 26 Mar 2026 11:06:31 +0300
Subject: [PATCH 6/9] Fix test

---
 generators/vt-template/generator_test.go | 1 +
 1 file changed, 1 insertion(+)

diff --git a/generators/vt-template/generator_test.go b/generators/vt-template/generator_test.go
index 5e597d6..bf7727b 100644
--- a/generators/vt-template/generator_test.go
+++ b/generators/vt-template/generator_test.go
@@ -57,6 +57,7 @@ func TestGenerator_Generate(t *testing.T) {
 
 		Convey("Check correct generate with entities", func() {
 			generator.options.Output = filepath.Join(testdata.PathActual, "vt-template", "entities")
+			// two Entities
 			generator.options.Entities = []string{"Category", "Tag"}
 
 			t.Log("Generate vt-template with entities")

From 6393cbe1972c2025417510f67315a34f320518a3 Mon Sep 17 00:00:00 2001
From: andrey <palchikov@uteka.ru>
Date: Thu, 26 Mar 2026 11:51:43 +0300
Subject: [PATCH 7/9] Fix test

---
 .../all/src/pages/Entity/routes.ts            | 472 ++++++++--------
 .../entities/src/pages/Entity/routes.ts       | 531 +++++++++---------
 2 files changed, 527 insertions(+), 476 deletions(-)

diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/routes.ts b/generators/testdata/expected/vt-template/all/src/pages/Entity/routes.ts
index a84606f..198b28f 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/routes.ts
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/routes.ts
@@ -93,228 +93,252 @@ export default [
             breadcrumbs: ["dashboard", "tagList", "tagAdd"]
         }
     },
-  /* City */
-  {
-    name: "cityList",
-    path: "/cities",
-    component: () =>
-      import("@/pages/Entity/City/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "cityList"]
-    }
-  },
-  {
-    name: "cityEdit",
-    path: "/cities/:id/edit",
-    component: () =>
-      import("@/pages/Entity/City/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "cityList", "cityEdit"]
-    }
-  },
-  {
-    name: "cityAdd",
-    path: "/cities/add",
-    component: () =>
-      import("@/pages/Entity/City/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "cityList", "cityAdd"]
-    }
-  },
-  /* Country */
-  {
-    name: "countryList",
-    path: "/countries",
-    component: () =>
-      import("@/pages/Entity/Country/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "countryList"]
-    }
-  },
-  {
-    name: "countryEdit",
-    path: "/countries/:id/edit",
-    component: () =>
-      import("@/pages/Entity/Country/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "countryList", "countryEdit"]
-    }
-  },
-  {
-    name: "countryAdd",
-    path: "/countries/add",
-    component: () =>
-      import("@/pages/Entity/Country/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "countryList", "countryAdd"]
-    }
-  },
-  /* Region */
-  {
-    name: "regionList",
-    path: "/regions",
-    component: () =>
-      import("@/pages/Entity/Region/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "regionList"]
-    }
-  },
-  {
-    name: "regionEdit",
-    path: "/regions/:id/edit",
-    component: () =>
-      import("@/pages/Entity/Region/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "regionList", "regionEdit"]
-    }
-  },
-  {
-    name: "regionAdd",
-    path: "/regions/add",
-    component: () =>
-      import("@/pages/Entity/Region/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "regionList", "regionAdd"]
-    }
-  },
-  /* EncryptionKey */
-  {
-    name: "encryptionKeyList",
-    path: "/encryption-keys",
-    component: () =>
-      import("@/pages/Entity/EncryptionKey/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "encryptionKeyList"]
-    }
-  },
-  {
-    name: "encryptionKeyEdit",
-    path: "/encryption-keys/:id/edit",
-    component: () =>
-      import("@/pages/Entity/EncryptionKey/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyEdit"]
-    }
-  },
-  {
-    name: "encryptionKeyAdd",
-    path: "/encryption-keys/add",
-    component: () =>
-      import("@/pages/Entity/EncryptionKey/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyAdd"]
-    }
-  },
-  /* LoginCode */
-  {
-    name: "loginCodeList",
-    path: "/login-codes",
-    component: () =>
-      import("@/pages/Entity/LoginCode/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "loginCodeList"]
-    }
-  },
-  {
-    name: "loginCodeEdit",
-    path: "/login-codes/:id/edit",
-    component: () =>
-      import("@/pages/Entity/LoginCode/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "loginCodeList", "loginCodeEdit"]
-    }
-  },
-  {
-    name: "loginCodeAdd",
-    path: "/login-codes/add",
-    component: () =>
-      import("@/pages/Entity/LoginCode/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "loginCodeList", "loginCodeAdd"]
-    }
-  },
-  /* SiteUser */
-  {
-    name: "siteUserList",
-    path: "/site-users",
-    component: () =>
-      import("@/pages/Entity/SiteUser/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "siteUserList"]
-    }
-  },
-  {
-    name: "siteUserEdit",
-    path: "/site-users/:id/edit",
-    component: () =>
-      import("@/pages/Entity/SiteUser/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "siteUserList", "siteUserEdit"]
-    }
-  },
-  {
-    name: "siteUserAdd",
-    path: "/site-users/add",
-    component: () =>
-      import("@/pages/Entity/SiteUser/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "siteUserList", "siteUserAdd"]
-    }
-  },
-  /* VfsFile */
-  {
-    name: "vfsFileList",
-    path: "/vfs-files",
-    component: () =>
-      import("@/pages/Entity/VfsFile/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "vfsFileList"]
-    }
-  },
-  {
-    name: "vfsFileEdit",
-    path: "/vfs-files/:id/edit",
-    component: () =>
-      import("@/pages/Entity/VfsFile/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "vfsFileList", "vfsFileEdit"]
-    }
-  },
-  {
-    name: "vfsFileAdd",
-    path: "/vfs-files/add",
-    component: () =>
-      import("@/pages/Entity/VfsFile/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "vfsFileList", "vfsFileAdd"]
-    }
-  },
-  /* VfsFolder */
-  {
-    name: "vfsFolderList",
-    path: "/vfs-folders",
-    component: () =>
-      import("@/pages/Entity/VfsFolder/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "vfsFolderList"]
-    }
-  },
-  {
-    name: "vfsFolderEdit",
-    path: "/vfs-folders/:id/edit",
-    component: () =>
-      import("@/pages/Entity/VfsFolder/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderEdit"]
-    }
-  },
-  {
-    name: "vfsFolderAdd",
-    path: "/vfs-folders/add",
-    component: () =>
-      import("@/pages/Entity/VfsFolder/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderAdd"]
-    }
-  },
+    /* City */
+    {
+        name: "cityList",
+        path: "/cities",
+        component: () =>
+            import("@/pages/Entity/City/List.vue"),
+        meta: {
+            title: "CityList",
+            breadcrumbs: ["dashboard", "cityList"]
+        }
+    },
+    {
+        name: "cityEdit",
+        path: "/cities/:id/edit",
+        component: () =>
+            import("@/pages/Entity/City/Form.vue"),
+        meta: {
+            title: "CityEdit",
+            breadcrumbs: ["dashboard", "cityList", "cityEdit"]
+        }
+    },
+    {
+        name: "cityAdd",
+        path: "/cities/add",
+        component: () =>
+            import("@/pages/Entity/City/Form.vue"),
+        meta: {
+            title: "CityAdd",
+            breadcrumbs: ["dashboard", "cityList", "cityAdd"]
+        }
+    },
+    /* Country */
+    {
+        name: "countryList",
+        path: "/countries",
+        component: () =>
+            import("@/pages/Entity/Country/List.vue"),
+        meta: {
+            title: "CountryList",
+            breadcrumbs: ["dashboard", "countryList"]
+        }
+    },
+    {
+        name: "countryEdit",
+        path: "/countries/:id/edit",
+        component: () =>
+            import("@/pages/Entity/Country/Form.vue"),
+        meta: {
+            title: "CountryEdit",
+            breadcrumbs: ["dashboard", "countryList", "countryEdit"]
+        }
+    },
+    {
+        name: "countryAdd",
+        path: "/countries/add",
+        component: () =>
+            import("@/pages/Entity/Country/Form.vue"),
+        meta: {
+            title: "CountryAdd",
+            breadcrumbs: ["dashboard", "countryList", "countryAdd"]
+        }
+    },
+    /* Region */
+    {
+        name: "regionList",
+        path: "/regions",
+        component: () =>
+            import("@/pages/Entity/Region/List.vue"),
+        meta: {
+            title: "RegionList",
+            breadcrumbs: ["dashboard", "regionList"]
+        }
+    },
+    {
+        name: "regionEdit",
+        path: "/regions/:id/edit",
+        component: () =>
+            import("@/pages/Entity/Region/Form.vue"),
+        meta: {
+            title: "RegionEdit",
+            breadcrumbs: ["dashboard", "regionList", "regionEdit"]
+        }
+    },
+    {
+        name: "regionAdd",
+        path: "/regions/add",
+        component: () =>
+            import("@/pages/Entity/Region/Form.vue"),
+        meta: {
+            title: "RegionAdd",
+            breadcrumbs: ["dashboard", "regionList", "regionAdd"]
+        }
+    },
+    /* EncryptionKey */
+    {
+        name: "encryptionKeyList",
+        path: "/encryption-keys",
+        component: () =>
+            import("@/pages/Entity/EncryptionKey/List.vue"),
+        meta: {
+            title: "EncryptionKeyList",
+            breadcrumbs: ["dashboard", "encryptionKeyList"]
+        }
+    },
+    {
+        name: "encryptionKeyEdit",
+        path: "/encryption-keys/:id/edit",
+        component: () =>
+            import("@/pages/Entity/EncryptionKey/Form.vue"),
+        meta: {
+            title: "EncryptionKeyEdit",
+            breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyEdit"]
+        }
+    },
+    {
+        name: "encryptionKeyAdd",
+        path: "/encryption-keys/add",
+        component: () =>
+            import("@/pages/Entity/EncryptionKey/Form.vue"),
+        meta: {
+            title: "EncryptionKeyAdd",
+            breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyAdd"]
+        }
+    },
+    /* LoginCode */
+    {
+        name: "loginCodeList",
+        path: "/login-codes",
+        component: () =>
+            import("@/pages/Entity/LoginCode/List.vue"),
+        meta: {
+            title: "LoginCodeList",
+            breadcrumbs: ["dashboard", "loginCodeList"]
+        }
+    },
+    {
+        name: "loginCodeEdit",
+        path: "/login-codes/:id/edit",
+        component: () =>
+            import("@/pages/Entity/LoginCode/Form.vue"),
+        meta: {
+            title: "LoginCodeEdit",
+            breadcrumbs: ["dashboard", "loginCodeList", "loginCodeEdit"]
+        }
+    },
+    {
+        name: "loginCodeAdd",
+        path: "/login-codes/add",
+        component: () =>
+            import("@/pages/Entity/LoginCode/Form.vue"),
+        meta: {
+            title: "LoginCodeAdd",
+            breadcrumbs: ["dashboard", "loginCodeList", "loginCodeAdd"]
+        }
+    },
+    /* SiteUser */
+    {
+        name: "siteUserList",
+        path: "/site-users",
+        component: () =>
+            import("@/pages/Entity/SiteUser/List.vue"),
+        meta: {
+            title: "SiteUserList",
+            breadcrumbs: ["dashboard", "siteUserList"]
+        }
+    },
+    {
+        name: "siteUserEdit",
+        path: "/site-users/:id/edit",
+        component: () =>
+            import("@/pages/Entity/SiteUser/Form.vue"),
+        meta: {
+            title: "SiteUserEdit",
+            breadcrumbs: ["dashboard", "siteUserList", "siteUserEdit"]
+        }
+    },
+    {
+        name: "siteUserAdd",
+        path: "/site-users/add",
+        component: () =>
+            import("@/pages/Entity/SiteUser/Form.vue"),
+        meta: {
+            title: "SiteUserAdd",
+            breadcrumbs: ["dashboard", "siteUserList", "siteUserAdd"]
+        }
+    },
+    /* VfsFile */
+    {
+        name: "vfsFileList",
+        path: "/vfs-files",
+        component: () =>
+            import("@/pages/Entity/VfsFile/List.vue"),
+        meta: {
+            title: "VfsFileList",
+            breadcrumbs: ["dashboard", "vfsFileList"]
+        }
+    },
+    {
+        name: "vfsFileEdit",
+        path: "/vfs-files/:id/edit",
+        component: () =>
+            import("@/pages/Entity/VfsFile/Form.vue"),
+        meta: {
+            title: "VfsFileEdit",
+            breadcrumbs: ["dashboard", "vfsFileList", "vfsFileEdit"]
+        }
+    },
+    {
+        name: "vfsFileAdd",
+        path: "/vfs-files/add",
+        component: () =>
+            import("@/pages/Entity/VfsFile/Form.vue"),
+        meta: {
+            title: "VfsFileAdd",
+            breadcrumbs: ["dashboard", "vfsFileList", "vfsFileAdd"]
+        }
+    },
+    /* VfsFolder */
+    {
+        name: "vfsFolderList",
+        path: "/vfs-folders",
+        component: () =>
+            import("@/pages/Entity/VfsFolder/List.vue"),
+        meta: {
+            title: "VfsFolderList",
+            breadcrumbs: ["dashboard", "vfsFolderList"]
+        }
+    },
+    {
+        name: "vfsFolderEdit",
+        path: "/vfs-folders/:id/edit",
+        component: () =>
+            import("@/pages/Entity/VfsFolder/Form.vue"),
+        meta: {
+            title: "VfsFolderEdit",
+            breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderEdit"]
+        }
+    },
+    {
+        name: "vfsFolderAdd",
+        path: "/vfs-folders/add",
+        component: () =>
+            import("@/pages/Entity/VfsFolder/Form.vue"),
+        meta: {
+            title: "VfsFolderAdd",
+            breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderAdd"]
+        }
+    },
 ];
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/routes.ts b/generators/testdata/expected/vt-template/entities/src/pages/Entity/routes.ts
index b168d22..198b28f 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/routes.ts
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/routes.ts
@@ -31,34 +31,37 @@ export default [
             breadcrumbs: ["dashboard", "categoryList", "categoryAdd"]
         }
     },
-  /* News */
-  {
-    name: "newsList",
-    path: "/news",
-    component: () =>
-      import("@/pages/Entity/News/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "newsList"]
-    }
-  },
-  {
-    name: "newsEdit",
-    path: "/news/:id/edit",
-    component: () =>
-      import("@/pages/Entity/News/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "newsList", "newsEdit"]
-    }
-  },
-  {
-    name: "newsAdd",
-    path: "/news/add",
-    component: () =>
-      import("@/pages/Entity/News/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "newsList", "newsAdd"]
-    }
-  },
+    /* News */
+    {
+        name: "newsList",
+        path: "/news",
+        component: () =>
+            import("@/pages/Entity/News/List.vue"),
+        meta: {
+            title: "NewsList",
+            breadcrumbs: ["dashboard", "newsList"]
+        }
+    },
+    {
+        name: "newsEdit",
+        path: "/news/:id/edit",
+        component: () =>
+            import("@/pages/Entity/News/Form.vue"),
+        meta: {
+            title: "NewsEdit",
+            breadcrumbs: ["dashboard", "newsList", "newsEdit"]
+        }
+    },
+    {
+        name: "newsAdd",
+        path: "/news/add",
+        component: () =>
+            import("@/pages/Entity/News/Form.vue"),
+        meta: {
+            title: "NewsAdd",
+            breadcrumbs: ["dashboard", "newsList", "newsAdd"]
+        }
+    },
     /* Tag */
     {
         name: "tagList",
@@ -90,228 +93,252 @@ export default [
             breadcrumbs: ["dashboard", "tagList", "tagAdd"]
         }
     },
-  /* City */
-  {
-    name: "cityList",
-    path: "/cities",
-    component: () =>
-      import("@/pages/Entity/City/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "cityList"]
-    }
-  },
-  {
-    name: "cityEdit",
-    path: "/cities/:id/edit",
-    component: () =>
-      import("@/pages/Entity/City/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "cityList", "cityEdit"]
-    }
-  },
-  {
-    name: "cityAdd",
-    path: "/cities/add",
-    component: () =>
-      import("@/pages/Entity/City/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "cityList", "cityAdd"]
-    }
-  },
-  /* Country */
-  {
-    name: "countryList",
-    path: "/countries",
-    component: () =>
-      import("@/pages/Entity/Country/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "countryList"]
-    }
-  },
-  {
-    name: "countryEdit",
-    path: "/countries/:id/edit",
-    component: () =>
-      import("@/pages/Entity/Country/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "countryList", "countryEdit"]
-    }
-  },
-  {
-    name: "countryAdd",
-    path: "/countries/add",
-    component: () =>
-      import("@/pages/Entity/Country/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "countryList", "countryAdd"]
-    }
-  },
-  /* Region */
-  {
-    name: "regionList",
-    path: "/regions",
-    component: () =>
-      import("@/pages/Entity/Region/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "regionList"]
-    }
-  },
-  {
-    name: "regionEdit",
-    path: "/regions/:id/edit",
-    component: () =>
-      import("@/pages/Entity/Region/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "regionList", "regionEdit"]
-    }
-  },
-  {
-    name: "regionAdd",
-    path: "/regions/add",
-    component: () =>
-      import("@/pages/Entity/Region/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "regionList", "regionAdd"]
-    }
-  },
-  /* EncryptionKey */
-  {
-    name: "encryptionKeyList",
-    path: "/encryption-keys",
-    component: () =>
-      import("@/pages/Entity/EncryptionKey/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "encryptionKeyList"]
-    }
-  },
-  {
-    name: "encryptionKeyEdit",
-    path: "/encryption-keys/:id/edit",
-    component: () =>
-      import("@/pages/Entity/EncryptionKey/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyEdit"]
-    }
-  },
-  {
-    name: "encryptionKeyAdd",
-    path: "/encryption-keys/add",
-    component: () =>
-      import("@/pages/Entity/EncryptionKey/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyAdd"]
-    }
-  },
-  /* LoginCode */
-  {
-    name: "loginCodeList",
-    path: "/login-codes",
-    component: () =>
-      import("@/pages/Entity/LoginCode/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "loginCodeList"]
-    }
-  },
-  {
-    name: "loginCodeEdit",
-    path: "/login-codes/:id/edit",
-    component: () =>
-      import("@/pages/Entity/LoginCode/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "loginCodeList", "loginCodeEdit"]
-    }
-  },
-  {
-    name: "loginCodeAdd",
-    path: "/login-codes/add",
-    component: () =>
-      import("@/pages/Entity/LoginCode/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "loginCodeList", "loginCodeAdd"]
-    }
-  },
-  /* SiteUser */
-  {
-    name: "siteUserList",
-    path: "/site-users",
-    component: () =>
-      import("@/pages/Entity/SiteUser/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "siteUserList"]
-    }
-  },
-  {
-    name: "siteUserEdit",
-    path: "/site-users/:id/edit",
-    component: () =>
-      import("@/pages/Entity/SiteUser/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "siteUserList", "siteUserEdit"]
-    }
-  },
-  {
-    name: "siteUserAdd",
-    path: "/site-users/add",
-    component: () =>
-      import("@/pages/Entity/SiteUser/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "siteUserList", "siteUserAdd"]
-    }
-  },
-  /* VfsFile */
-  {
-    name: "vfsFileList",
-    path: "/vfs-files",
-    component: () =>
-      import("@/pages/Entity/VfsFile/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "vfsFileList"]
-    }
-  },
-  {
-    name: "vfsFileEdit",
-    path: "/vfs-files/:id/edit",
-    component: () =>
-      import("@/pages/Entity/VfsFile/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "vfsFileList", "vfsFileEdit"]
-    }
-  },
-  {
-    name: "vfsFileAdd",
-    path: "/vfs-files/add",
-    component: () =>
-      import("@/pages/Entity/VfsFile/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "vfsFileList", "vfsFileAdd"]
-    }
-  },
-  /* VfsFolder */
-  {
-    name: "vfsFolderList",
-    path: "/vfs-folders",
-    component: () =>
-      import("@/pages/Entity/VfsFolder/List.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "vfsFolderList"]
-    }
-  },
-  {
-    name: "vfsFolderEdit",
-    path: "/vfs-folders/:id/edit",
-    component: () =>
-      import("@/pages/Entity/VfsFolder/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderEdit"]
-    }
-  },
-  {
-    name: "vfsFolderAdd",
-    path: "/vfs-folders/add",
-    component: () =>
-      import("@/pages/Entity/VfsFolder/Form.vue"),
-    meta: {
-      breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderAdd"]
-    }
-  },
+    /* City */
+    {
+        name: "cityList",
+        path: "/cities",
+        component: () =>
+            import("@/pages/Entity/City/List.vue"),
+        meta: {
+            title: "CityList",
+            breadcrumbs: ["dashboard", "cityList"]
+        }
+    },
+    {
+        name: "cityEdit",
+        path: "/cities/:id/edit",
+        component: () =>
+            import("@/pages/Entity/City/Form.vue"),
+        meta: {
+            title: "CityEdit",
+            breadcrumbs: ["dashboard", "cityList", "cityEdit"]
+        }
+    },
+    {
+        name: "cityAdd",
+        path: "/cities/add",
+        component: () =>
+            import("@/pages/Entity/City/Form.vue"),
+        meta: {
+            title: "CityAdd",
+            breadcrumbs: ["dashboard", "cityList", "cityAdd"]
+        }
+    },
+    /* Country */
+    {
+        name: "countryList",
+        path: "/countries",
+        component: () =>
+            import("@/pages/Entity/Country/List.vue"),
+        meta: {
+            title: "CountryList",
+            breadcrumbs: ["dashboard", "countryList"]
+        }
+    },
+    {
+        name: "countryEdit",
+        path: "/countries/:id/edit",
+        component: () =>
+            import("@/pages/Entity/Country/Form.vue"),
+        meta: {
+            title: "CountryEdit",
+            breadcrumbs: ["dashboard", "countryList", "countryEdit"]
+        }
+    },
+    {
+        name: "countryAdd",
+        path: "/countries/add",
+        component: () =>
+            import("@/pages/Entity/Country/Form.vue"),
+        meta: {
+            title: "CountryAdd",
+            breadcrumbs: ["dashboard", "countryList", "countryAdd"]
+        }
+    },
+    /* Region */
+    {
+        name: "regionList",
+        path: "/regions",
+        component: () =>
+            import("@/pages/Entity/Region/List.vue"),
+        meta: {
+            title: "RegionList",
+            breadcrumbs: ["dashboard", "regionList"]
+        }
+    },
+    {
+        name: "regionEdit",
+        path: "/regions/:id/edit",
+        component: () =>
+            import("@/pages/Entity/Region/Form.vue"),
+        meta: {
+            title: "RegionEdit",
+            breadcrumbs: ["dashboard", "regionList", "regionEdit"]
+        }
+    },
+    {
+        name: "regionAdd",
+        path: "/regions/add",
+        component: () =>
+            import("@/pages/Entity/Region/Form.vue"),
+        meta: {
+            title: "RegionAdd",
+            breadcrumbs: ["dashboard", "regionList", "regionAdd"]
+        }
+    },
+    /* EncryptionKey */
+    {
+        name: "encryptionKeyList",
+        path: "/encryption-keys",
+        component: () =>
+            import("@/pages/Entity/EncryptionKey/List.vue"),
+        meta: {
+            title: "EncryptionKeyList",
+            breadcrumbs: ["dashboard", "encryptionKeyList"]
+        }
+    },
+    {
+        name: "encryptionKeyEdit",
+        path: "/encryption-keys/:id/edit",
+        component: () =>
+            import("@/pages/Entity/EncryptionKey/Form.vue"),
+        meta: {
+            title: "EncryptionKeyEdit",
+            breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyEdit"]
+        }
+    },
+    {
+        name: "encryptionKeyAdd",
+        path: "/encryption-keys/add",
+        component: () =>
+            import("@/pages/Entity/EncryptionKey/Form.vue"),
+        meta: {
+            title: "EncryptionKeyAdd",
+            breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyAdd"]
+        }
+    },
+    /* LoginCode */
+    {
+        name: "loginCodeList",
+        path: "/login-codes",
+        component: () =>
+            import("@/pages/Entity/LoginCode/List.vue"),
+        meta: {
+            title: "LoginCodeList",
+            breadcrumbs: ["dashboard", "loginCodeList"]
+        }
+    },
+    {
+        name: "loginCodeEdit",
+        path: "/login-codes/:id/edit",
+        component: () =>
+            import("@/pages/Entity/LoginCode/Form.vue"),
+        meta: {
+            title: "LoginCodeEdit",
+            breadcrumbs: ["dashboard", "loginCodeList", "loginCodeEdit"]
+        }
+    },
+    {
+        name: "loginCodeAdd",
+        path: "/login-codes/add",
+        component: () =>
+            import("@/pages/Entity/LoginCode/Form.vue"),
+        meta: {
+            title: "LoginCodeAdd",
+            breadcrumbs: ["dashboard", "loginCodeList", "loginCodeAdd"]
+        }
+    },
+    /* SiteUser */
+    {
+        name: "siteUserList",
+        path: "/site-users",
+        component: () =>
+            import("@/pages/Entity/SiteUser/List.vue"),
+        meta: {
+            title: "SiteUserList",
+            breadcrumbs: ["dashboard", "siteUserList"]
+        }
+    },
+    {
+        name: "siteUserEdit",
+        path: "/site-users/:id/edit",
+        component: () =>
+            import("@/pages/Entity/SiteUser/Form.vue"),
+        meta: {
+            title: "SiteUserEdit",
+            breadcrumbs: ["dashboard", "siteUserList", "siteUserEdit"]
+        }
+    },
+    {
+        name: "siteUserAdd",
+        path: "/site-users/add",
+        component: () =>
+            import("@/pages/Entity/SiteUser/Form.vue"),
+        meta: {
+            title: "SiteUserAdd",
+            breadcrumbs: ["dashboard", "siteUserList", "siteUserAdd"]
+        }
+    },
+    /* VfsFile */
+    {
+        name: "vfsFileList",
+        path: "/vfs-files",
+        component: () =>
+            import("@/pages/Entity/VfsFile/List.vue"),
+        meta: {
+            title: "VfsFileList",
+            breadcrumbs: ["dashboard", "vfsFileList"]
+        }
+    },
+    {
+        name: "vfsFileEdit",
+        path: "/vfs-files/:id/edit",
+        component: () =>
+            import("@/pages/Entity/VfsFile/Form.vue"),
+        meta: {
+            title: "VfsFileEdit",
+            breadcrumbs: ["dashboard", "vfsFileList", "vfsFileEdit"]
+        }
+    },
+    {
+        name: "vfsFileAdd",
+        path: "/vfs-files/add",
+        component: () =>
+            import("@/pages/Entity/VfsFile/Form.vue"),
+        meta: {
+            title: "VfsFileAdd",
+            breadcrumbs: ["dashboard", "vfsFileList", "vfsFileAdd"]
+        }
+    },
+    /* VfsFolder */
+    {
+        name: "vfsFolderList",
+        path: "/vfs-folders",
+        component: () =>
+            import("@/pages/Entity/VfsFolder/List.vue"),
+        meta: {
+            title: "VfsFolderList",
+            breadcrumbs: ["dashboard", "vfsFolderList"]
+        }
+    },
+    {
+        name: "vfsFolderEdit",
+        path: "/vfs-folders/:id/edit",
+        component: () =>
+            import("@/pages/Entity/VfsFolder/Form.vue"),
+        meta: {
+            title: "VfsFolderEdit",
+            breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderEdit"]
+        }
+    },
+    {
+        name: "vfsFolderAdd",
+        path: "/vfs-folders/add",
+        component: () =>
+            import("@/pages/Entity/VfsFolder/Form.vue"),
+        meta: {
+            title: "VfsFolderAdd",
+            breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderAdd"]
+        }
+    },
 ];

From 8b5aaf655ddb31139aa8ed6f39f6a706924e3ee7 Mon Sep 17 00:00:00 2001
From: andrey <palchikov@uteka.ru>
Date: Mon, 3 Aug 2026 15:06:46 +0300
Subject: [PATCH 8/9] MFD-89 Update testdata, add composition template, update
 readme

---
 generators/testdata/consts.go                 |  33 +-
 .../all/src/pages/Entity/Category/Form.vue    | 103 +--
 .../all/src/pages/Entity/Category/List.vue    | 106 ++-
 .../Category/components/MultiListFilters.vue  |  53 +-
 .../all/src/pages/Entity/News/Form.vue        | 159 ++---
 .../all/src/pages/Entity/News/List.vue        | 114 ++-
 .../News/components/MultiListFilters.vue      |  67 +-
 .../all/src/pages/Entity/Tag/Form.vue         |  95 +--
 .../all/src/pages/Entity/Tag/List.vue         | 104 +--
 .../Tag/components/MultiListFilters.vue       |  51 +-
 .../all/src/pages/Entity/routes.ts            | 649 +++++++++---------
 .../src/pages/Entity/Category/Form.vue        | 207 ++++++
 .../src/pages/Entity/Category/List.vue        | 239 +++++++
 .../Category/components/MultiListFilters.vue  |  97 +++
 .../src/pages/Entity/Category/en.json         |  30 +
 .../src/pages/Entity/News/Form.vue            | 282 ++++++++
 .../src/pages/Entity/News/List.vue            | 270 ++++++++
 .../News/components/MultiListFilters.vue      | 187 +++++
 .../composition/src/pages/Entity/News/en.json |  48 ++
 .../composition/src/pages/Entity/Tag/Form.vue | 199 ++++++
 .../composition/src/pages/Entity/Tag/List.vue | 232 +++++++
 .../Tag/components/MultiListFilters.vue       |  85 +++
 .../composition/src/pages/Entity/Tag/en.json  |  27 +
 .../composition/src/pages/Entity/routes.ts    | 344 ++++++++++
 .../src/pages/Entity/Category/Form.vue        | 103 +--
 .../src/pages/Entity/Category/List.vue        | 106 ++-
 .../Category/components/MultiListFilters.vue  |  53 +-
 .../entities/src/pages/Entity/Tag/Form.vue    |  95 +--
 .../entities/src/pages/Entity/Tag/List.vue    | 104 +--
 .../Tag/components/MultiListFilters.vue       |  51 +-
 .../entities/src/pages/Entity/routes.ts       | 649 +++++++++---------
 generators/vt-template/README.md              |  17 +-
 generators/vt-template/generator.go           |  24 +-
 generators/vt-template/generator_test.go      |  69 ++
 generators/vt-template/template.go            | 307 +++------
 .../vt-template/template_composition.go       | 575 ++++++++++++++++
 generators/xml/README.md                      |   2 +
 mfd/model.go                                  |   1 +
 38 files changed, 4122 insertions(+), 1815 deletions(-)
 create mode 100644 generators/testdata/expected/vt-template/composition/src/pages/Entity/Category/Form.vue
 create mode 100644 generators/testdata/expected/vt-template/composition/src/pages/Entity/Category/List.vue
 create mode 100644 generators/testdata/expected/vt-template/composition/src/pages/Entity/Category/components/MultiListFilters.vue
 create mode 100644 generators/testdata/expected/vt-template/composition/src/pages/Entity/Category/en.json
 create mode 100644 generators/testdata/expected/vt-template/composition/src/pages/Entity/News/Form.vue
 create mode 100644 generators/testdata/expected/vt-template/composition/src/pages/Entity/News/List.vue
 create mode 100644 generators/testdata/expected/vt-template/composition/src/pages/Entity/News/components/MultiListFilters.vue
 create mode 100644 generators/testdata/expected/vt-template/composition/src/pages/Entity/News/en.json
 create mode 100644 generators/testdata/expected/vt-template/composition/src/pages/Entity/Tag/Form.vue
 create mode 100644 generators/testdata/expected/vt-template/composition/src/pages/Entity/Tag/List.vue
 create mode 100644 generators/testdata/expected/vt-template/composition/src/pages/Entity/Tag/components/MultiListFilters.vue
 create mode 100644 generators/testdata/expected/vt-template/composition/src/pages/Entity/Tag/en.json
 create mode 100644 generators/testdata/expected/vt-template/composition/src/pages/Entity/routes.ts
 create mode 100644 generators/vt-template/template_composition.go

diff --git a/generators/testdata/consts.go b/generators/testdata/consts.go
index bee57ea..27ff1eb 100644
--- a/generators/testdata/consts.go
+++ b/generators/testdata/consts.go
@@ -16,25 +16,28 @@ const (
 	PackageVTUpdated  = "vt-updated"
 	PackageDBTest     = "test"
 
-	PrefixAll    = "all"
-	PrefixEntity = "entities"
+	PrefixAll         = "all"
+	PrefixEntity      = "entities"
+	PrefixComposition = "composition"
 )
 
 var (
 	PathActual   = filepath.Join(DirParent, DirTestdata, "actual")
 	PathExpected = filepath.Join(DirParent, DirTestdata, "expected")
 
-	PathActualMFD                = filepath.Join(PathActual, FilenameMFD)
-	PathExpectedMFD              = filepath.Join(PathExpected, FilenameMFD)
-	PathActualDB                 = filepath.Join(PathActual, PackageDB)
-	PathExpectedDB               = filepath.Join(PathExpected, PackageDB)
-	PathActualVT                 = filepath.Join(PathActual, PackageVT)
-	PathUpdatedVT                = filepath.Join(PathExpected, PackageVTUpdated)
-	PathExpectedVT               = filepath.Join(PathExpected, PackageVT)
-	PathActualVTTemplateAll      = filepath.Join(PathActual, PackageVTTemplate, PrefixAll)
-	PathExpectedVTTemplateAll    = filepath.Join(PathExpected, PackageVTTemplate, PrefixAll)
-	PathActualVTTemplateEntity   = filepath.Join(PathActual, PackageVTTemplate, PrefixEntity)
-	PathExpectedVTTemplateEntity = filepath.Join(PathExpected, PackageVTTemplate, PrefixEntity)
-	PathActualDBTest             = filepath.Join(PathActual, PackageDB, PackageDBTest)
-	PathExpectedDBTest           = filepath.Join(PathExpected, PackageDB, PackageDBTest)
+	PathActualMFD                     = filepath.Join(PathActual, FilenameMFD)
+	PathExpectedMFD                   = filepath.Join(PathExpected, FilenameMFD)
+	PathActualDB                      = filepath.Join(PathActual, PackageDB)
+	PathExpectedDB                    = filepath.Join(PathExpected, PackageDB)
+	PathActualVT                      = filepath.Join(PathActual, PackageVT)
+	PathUpdatedVT                     = filepath.Join(PathExpected, PackageVTUpdated)
+	PathExpectedVT                    = filepath.Join(PathExpected, PackageVT)
+	PathActualVTTemplateAll           = filepath.Join(PathActual, PackageVTTemplate, PrefixAll)
+	PathExpectedVTTemplateAll         = filepath.Join(PathExpected, PackageVTTemplate, PrefixAll)
+	PathActualVTTemplateEntity        = filepath.Join(PathActual, PackageVTTemplate, PrefixEntity)
+	PathExpectedVTTemplateEntity      = filepath.Join(PathExpected, PackageVTTemplate, PrefixEntity)
+	PathActualVTTemplateComposition   = filepath.Join(PathActual, PackageVTTemplate, PrefixComposition)
+	PathExpectedVTTemplateComposition = filepath.Join(PathExpected, PackageVTTemplate, PrefixComposition)
+	PathActualDBTest                  = filepath.Join(PathActual, PackageDB, PackageDBTest)
+	PathExpectedDBTest                = filepath.Join(PathExpected, PackageDB, PackageDBTest)
 )
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/Form.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/Form.vue
index ab8d2d8..49ec139 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/Form.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/Form.vue
@@ -15,7 +15,7 @@
         >
           <v-flex>
             <h2 class="ellipsed">
-              {{ model.title || "..." }}
+              {{ store.model.title || "..." }}
             </h2>
           </v-flex>
           <v-spacer />
@@ -23,7 +23,7 @@
             <v-btn
               text
               color="primary"
-              :disabled="isLoading"
+              :disabled="store.isLoading"
               @click.stop="navigateBack"
             >
               <v-icon
@@ -32,7 +32,7 @@
                 arrow_back
               </v-icon>
               <template v-if="!$vuetify.breakpoint.xsOnly">
-                {{ t("common.form.cancelButtonLabel") }}
+                {{ $t("common.form.cancelButtonLabel") }}
               </template>
             </v-btn>
             <v-hover
@@ -61,7 +61,7 @@
             Основные
           </v-tab>
         </v-tabs>
-        <v-card v-if="model">
+        <v-card v-if="store.model">
           <v-form
             ref="form"
             @submit.prevent="onSaveAndBack"
@@ -71,27 +71,27 @@
                 <v-tab-item eager>
                   <!--  generated part -->
                   <vt-form-field
-                    v-model="model.title"
+                    v-model="store.model.title"
                     component="v-text-field"
-                    :label="t('category.form.titleLabel')"
-                    :error-messages="getErrorMessage(errors.title)"
-                    :disabled="isLoading"
+                    :label="$t('category.form.titleLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.title))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     required
                   /><vt-form-field
-                    v-model="model.orderNumber"
+                    v-model="store.model.orderNumber"
                     component="v-text-field"
-                    :label="t('category.form.orderNumberLabel')"
-                    :error-messages="getErrorMessage(errors.orderNumber)"
-                    :disabled="isLoading"
+                    :label="$t('category.form.orderNumberLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.orderNumber))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     required
                   /><vt-form-field
-                    v-model="model.statusId"
+                    v-model="store.model.statusId"
                     component="vt-status-select"
-                    :label="t('category.form.statusIdLabel')"
-                    :error-messages="getErrorMessage(errors.statusId)"
-                    :disabled="isLoading"
+                    :label="$t('category.form.statusIdLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.statusId))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     required
                     compact
@@ -111,21 +111,21 @@
                     <v-btn
                       type="submit"
                       color="success"
-                      :disabled="!isChanged || isLoading"
-                      :loading="isLoading"
+                      :disabled="!store.isChanged || store.isLoading"
+                      :loading="store.isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="!$vuetify.breakpoint.xsOnly && 'mx-2'"
                     >
                       <v-icon left>
                         done
                       </v-icon>
-                      {{ t("common.form.saveAndCloseButtonLabel") }}
+                      {{ $t("common.form.saveAndCloseButtonLabel") }}
                     </v-btn>
 
                     <v-btn
                       v-if="$route.params.id"
-                      :disabled="!isChanged || isLoading"
-                      :loading="isLoading"
+                      :disabled="!store.isChanged || store.isLoading"
+                      :loading="store.isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="[
                         $vuetify.breakpoint.xsOnly && 'ml-0 mt-2',
@@ -135,7 +135,7 @@
                       color="accent"
                       @click.stop="onSave"
                     >
-                      {{ t("common.form.saveButtonLabel") }}
+                      {{ $t("common.form.saveButtonLabel") }}
                     </v-btn>
                     <v-spacer />
                   </v-layout>
@@ -150,58 +150,17 @@
 </template>
 
 <script lang="ts">
-import { useEntityForm } from '@/composables/useEntityForm';
-import { useI18n } from '@/composables/useI18n'
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
 import { Category as Model } from '@/services/api/factory';
-import { defineComponent } from 'vue';
+import Store from '@/common/Entity/EntityModelStore';
+import EntityForm from '@/common/Entity/EntityForm';
 
-export default defineComponent({
-  // eslint-disable-next-line vue/match-component-file-name
-  name: 'CategoryForm',
-
-  setup () {
-    const { t } = useI18n();
-
-    const {
-      tab,
-      form,
-      model,
-      errors,
-      isLoading,
-      isChanged,
-      i18nFieldError,
-      tabsHasError,
-
-      onSave,
-      onDelete,
-      navigateBack,
-      onSaveAndBack
-    } = useEntityForm<Model>({ Model} );
-
-	const getErrorMessage = (errorKey: string | null): string => {
-      const errorMessage = i18nFieldError(errorKey);
-      return errorMessage ? t(errorMessage) : '';
-    };
-
-    return {
-      t,
-      tab,
-      form,
-      model,
-      errors,
-      isLoading,
-      isChanged,
-      i18nFieldError,
-      tabsHasError,
-      getErrorMessage,
-
-      onSave,
-      onDelete,
-      navigateBack,
-      onSaveAndBack
-    };
-  }
-});
+@Observer
+@Component
+export default class Form extends EntityForm {
+  store: Store<Model> = new Store<Model>(Model);
+}
 </script>
 
 <style scoped></style>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/List.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/List.vue
index 261806a..f2e6d2a 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/List.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/List.vue
@@ -18,26 +18,27 @@
               <v-flex>
                 <v-layout align-center>
                   <h2 class="ellipsed mr-1">
-                    {{ t("category.list.title") }}
+                    {{ $t("category.list.title") }}
                   </h2>
                   <span
-                    v-if="pagination.totalItems"
+                    v-if="store.pagination.totalItems"
                     class="text--secondary subtitle-2"
                   >
-                    {{ pagination.totalItems }}
+                    {{ store.pagination.totalItems }}
                   </span>
                 </v-layout>
               </v-flex>
               <v-spacer />
               <v-flex shrink>
                 <v-btn
-                  small
                   dark
                   color="success"
                   :to="{ name: 'categoryAdd' }"
                 >
-                  <v-icon>add</v-icon>
-                  {{ t("common.list.addNewLabel") }}
+                  <v-icon left>
+                    add
+                  </v-icon>
+                  {{ $t("common.list.addNewLabel") }}
                 </v-btn>
               </v-flex>
             </v-layout>
@@ -63,9 +64,9 @@
                     mr-sm-2
                   >
                     <v-text-field
-                      v-model="filters.title"
+                      v-model="store.filters.title"
                       :placeholder="
-                        t('category.list.filter.quickFilterPlaceholder')
+                        $t('category.list.filter.quickFilterPlaceholder')
                       "
                       hide-details
                       @keyup.enter.native="submitFilters()"
@@ -77,10 +78,9 @@
                     mr-sm-10
                   >
                     <multi-filters
-                      :filters="filters"
-                      :active-filters="activeFilters"
+                      :filters="store.filters"
+                      :active-filters="store.activeFilters"
                       @submitFilters="submitFilters"
-                      @update:filters="updateFilters"
                     />
                   </v-flex>
                   <v-flex
@@ -88,8 +88,8 @@
                     mt-sm-4
                   >
                     <vt-compact-pagination
-                      :value="pagination.page"
-                      :total-pages="pagination.totalPages"
+                      :value="store.pagination.page"
+                      :total-pages="store.pagination.totalPages"
                       @input="setCompactPagination"
                     />
                   </v-flex>
@@ -100,9 +100,9 @@
               <v-data-table
                 v-model="selected"
                 :headers="headers"
-                :items="list"
-                :options="vuetifyTableOptions"
-                :server-items-length="pagination.totalItems"
+                :items="store.list"
+                :options="store.vuetifyTableOptions"
+                :server-items-length="store.pagination.totalItems"
                 item-key="id"
                 :footer-props="{
                   itemsPerPageOptions: [10, 25, 50, 100, 500]
@@ -116,7 +116,7 @@
                   }
                 ]"
                 :show-select="false"
-                :loading="isLoading"
+                :loading="store.isLoading"
                 fixed-header
                 @update:options="setPagination"
               >
@@ -164,76 +164,48 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
-import { CategorySummary, CategorySearch } from '@/services/api/factory';
-import { useEntityList } from '@/composables/useEntityList';
-import { useI18n } from '@/composables/useI18n';
-
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
+import EntityList from '@/common/Entity/EntityList';
+import Store from '@/common/Entity/EntityCollectionStore';
+import {
+  CategorySummary as Model,
+  CategorySearch as SearchModel
+} from '@/services/api/factory';
 import MultiFilters from './components/MultiListFilters.vue';
 
-export default defineComponent({
-  // eslint-disable-next-line vue/multi-word-component-names
+@Observer
+@Component({
   name: 'List',
-  components: { MultiFilters },
-
-  setup () {
-    const { t } = useI18n();
+  components: { MultiFilters }
+})
+export default class List extends EntityList {
+  store: Store = new Store(Model, SearchModel);
 
-    const {
-      selected,
-      pagination,
-      filters,
-      activeFilters,
-      list,
-      isLoading,
-      vuetifyTableOptions,
-      deleteItem,
-      submitFilters,
-      setCompactPagination,
-      setPagination,
-      updateFilters
-    } = useEntityList(CategorySummary, CategorySearch);
-
-    const headers = computed(() => [
+  get headers () {
+    return [
       {
-        text: t('category.list.headers.title'),
+        text: this.$t('category.list.headers.title'),
         value: 'title',
         align: 'left'
       },
       {
-        text: t('category.list.headers.orderNumber'),
+        text: this.$t('category.list.headers.orderNumber'),
         value: 'orderNumber'
       },
       {
-        text: t('category.list.headers.status'),
+        text: this.$t('category.list.headers.status'),
         value: 'status',
         sortable: false
       },
       {
-        text: t('category.list.headers.actions'),
+        text: this.$t('category.list.headers.actions'),
         value: 'id',
         sortable: false
       }
-    ]);
-
-    return {
-      t,
-      selected,
-      pagination,
-      filters,
-      activeFilters,
-      list,
-      isLoading,
-      vuetifyTableOptions,
-      deleteItem,
-      submitFilters,
-      setCompactPagination,
-      setPagination,
-      updateFilters,
-      headers
-    };
+    ];
   }
-});
+}
 </script>
 
 <style lang="scss"></style>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/components/MultiListFilters.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/components/MultiListFilters.vue
index a6fedaf..fc765eb 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/components/MultiListFilters.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/Category/components/MultiListFilters.vue
@@ -1,43 +1,26 @@
 <template>
-  <vt-new-multi-filter
+  <vt-multi-filter
     :items="filterItems"
     :filters="filters"
     autofocus
-    :label="t('common.list.filter.title')"
+    :label="$t('common.list.filter.title')"
     @submitFilters="$emit('submitFilters')"
-    @update:filters="$emit('update:filters', $event)"
   />
 </template>
 
 <script lang="ts">
-import { IFilterItem } from '@/common/MultiFilter/types';
-import { useI18n } from '@/composables/useI18n';
-import { defineComponent } from 'vue';
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
+import EntityListFilters from '@/common/Entity/EntityListFilters';
 
-export default defineComponent({
-  name: 'MultiListFilters',
-
-  props: {
-    filters: {
-      type: Object,
-      required: true
-    },
-    activeFilters: {
-      type: Object,
-      required: true
-    }
-  },
-
-  emits: ['submitFilters', 'update:filters'],
-
-  setup () {
-    const { t } = useI18n();
-
-    const filterItems = [
+@Observer
+@Component
+export default class MultiListFilters extends EntityListFilters {
+  filterItems = [
     {
       id: 'title',
       type: 'input',
-      title: t('category.list.filter.title'),
+      title: this.$t('category.list.filter.title'),
       value: null,
       values: null,
       settings: {
@@ -48,7 +31,7 @@ export default defineComponent({
     {
       id: 'orderNumber',
       type: 'input',
-      title: t('category.list.filter.orderNumber'),
+      title: this.$t('category.list.filter.orderNumber'),
       value: null,
       values: null,
       settings: {
@@ -60,7 +43,7 @@ export default defineComponent({
     {
       id: 'statusId',
       type: 'select',
-      title: t('category.list.filter.statusId'),
+      title: this.$t('category.list.filter.statusId'),
       value: null,
       values: null,
       settings: {
@@ -76,7 +59,7 @@ export default defineComponent({
     {
       id: 'ids',
       type: 'select',
-      title: t('category.list.filter.ids'),
+      title: this.$t('category.list.filter.ids'),
       value: null,
       values: null,
       settings: {
@@ -86,12 +69,6 @@ export default defineComponent({
         component: 'v-text-field'
       }
     }
-  ].filter(Boolean) as IFilterItem[];
-
-    return {
-      t,
-      filterItems
-    };
-  }
-});
+  ].filter(Boolean)
+}
 </script>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/News/Form.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/News/Form.vue
index ff0c74e..3892583 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/News/Form.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/News/Form.vue
@@ -15,7 +15,7 @@
         >
           <v-flex>
             <h2 class="ellipsed">
-              {{ model.title || "..." }}
+              {{ store.model.title || "..." }}
             </h2>
           </v-flex>
           <v-spacer />
@@ -23,7 +23,7 @@
             <v-btn
               text
               color="primary"
-              :disabled="isLoading"
+              :disabled="store.isLoading"
               @click.stop="navigateBack"
             >
               <v-icon
@@ -32,7 +32,7 @@
                 arrow_back
               </v-icon>
               <template v-if="!$vuetify.breakpoint.xsOnly">
-                {{ t("common.form.cancelButtonLabel") }}
+                {{ $t("common.form.cancelButtonLabel") }}
               </template>
             </v-btn>
             <v-hover
@@ -61,7 +61,7 @@
             Основные
           </v-tab>
         </v-tabs>
-        <v-card v-if="model">
+        <v-card v-if="store.model">
           <v-form
             ref="form"
             @submit.prevent="onSaveAndBack"
@@ -71,102 +71,102 @@
                 <v-tab-item eager>
                   <!--  generated part -->
                   <vt-form-field
-                    v-model="model.title"
+                    v-model="store.model.title"
                     component="v-text-field"
-                    :label="t('news.form.titleLabel')"
-                    :error-messages="getErrorMessage(errors.title)"
-                    :disabled="isLoading"
+                    :label="$t('news.form.titleLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.title))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     required
                   /><vt-form-field
-                    v-model="model.preview"
+                    v-model="store.model.preview"
                     component="v-text-field"
-                    :label="t('news.form.previewLabel')"
-                    :error-messages="getErrorMessage(errors.preview)"
-                    :disabled="isLoading"
+                    :label="$t('news.form.previewLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.preview))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     clearable
                   /><vt-form-field
-                    v-model="model.content"
+                    v-model="store.model.content"
                     component="vt-tinymce-editor"
-                    :label="t('news.form.contentLabel')"
-                    :error-messages="getErrorMessage(errors.content)"
-                    :disabled="isLoading"
+                    :label="$t('news.form.contentLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.content))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     clearable
                     without-help
                   /><vt-form-field
-                    v-model="model.categoryId"
+                    v-model="store.model.categoryId"
                     entity="category"
                     search-by="title"
                     prefetch
                     component="vt-entity-autocomplete"
-                    :label="t('news.form.categoryIdLabel')"
-                    :error-messages="getErrorMessage(errors.categoryId)"
-                    :disabled="isLoading"
+                    :label="$t('news.form.categoryIdLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.categoryId))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     required
                   /><vt-form-field
-                    v-model="model.countryId"
+                    v-model="store.model.countryId"
                     entity="country"
                     search-by="title"
                     prefetch
                     component="vt-entity-autocomplete"
-                    :label="t('news.form.countryIdLabel')"
-                    :error-messages="getErrorMessage(errors.countryId)"
-                    :disabled="isLoading"
+                    :label="$t('news.form.countryIdLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.countryId))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     clearable
                   /><vt-form-field
-                    v-model="model.regionId"
+                    v-model="store.model.regionId"
                     entity="region"
                     search-by="title"
                     prefetch
                     component="vt-entity-autocomplete"
-                    :label="t('news.form.regionIdLabel')"
-                    :error-messages="getErrorMessage(errors.regionId)"
-                    :disabled="isLoading"
+                    :label="$t('news.form.regionIdLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.regionId))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     clearable
                   /><vt-form-field
-                    v-model="model.cityId"
+                    v-model="store.model.cityId"
                     entity="city"
                     search-by="title"
                     prefetch
                     component="vt-entity-autocomplete"
-                    :label="t('news.form.cityIdLabel')"
-                    :error-messages="getErrorMessage(errors.cityId)"
-                    :disabled="isLoading"
+                    :label="$t('news.form.cityIdLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.cityId))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     clearable
                   /><vt-form-field
-                    v-model="model.tagIds"
+                    v-model="store.model.tagIds"
                     entity="tag"
                     search-by="title"
                     prefetch
                     component="vt-entity-autocomplete"
-                    :label="t('news.form.tagIdsLabel')"
-                    :error-messages="getErrorMessage(errors.tagIds)"
-                    :disabled="isLoading"
+                    :label="$t('news.form.tagIdsLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.tagIds))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     clearable
                     multiple
                     chips
                   /><vt-form-field
-                    v-model="model.publishedAt"
+                    v-model="store.model.publishedAt"
                     component="vt-datetime-picker"
-                    :label="t('news.form.publishedAtLabel')"
-                    :error-messages="getErrorMessage(errors.publishedAt)"
-                    :disabled="isLoading"
+                    :label="$t('news.form.publishedAtLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.publishedAt))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     clearable
                     iso
                   /><vt-form-field
-                    v-model="model.statusId"
+                    v-model="store.model.statusId"
                     component="vt-status-select"
-                    :label="t('news.form.statusIdLabel')"
-                    :error-messages="getErrorMessage(errors.statusId)"
-                    :disabled="isLoading"
+                    :label="$t('news.form.statusIdLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.statusId))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     required
                     compact
@@ -186,21 +186,21 @@
                     <v-btn
                       type="submit"
                       color="success"
-                      :disabled="!isChanged || isLoading"
-                      :loading="isLoading"
+                      :disabled="!store.isChanged || store.isLoading"
+                      :loading="store.isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="!$vuetify.breakpoint.xsOnly && 'mx-2'"
                     >
                       <v-icon left>
                         done
                       </v-icon>
-                      {{ t("common.form.saveAndCloseButtonLabel") }}
+                      {{ $t("common.form.saveAndCloseButtonLabel") }}
                     </v-btn>
 
                     <v-btn
                       v-if="$route.params.id"
-                      :disabled="!isChanged || isLoading"
-                      :loading="isLoading"
+                      :disabled="!store.isChanged || store.isLoading"
+                      :loading="store.isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="[
                         $vuetify.breakpoint.xsOnly && 'ml-0 mt-2',
@@ -210,7 +210,7 @@
                       color="accent"
                       @click.stop="onSave"
                     >
-                      {{ t("common.form.saveButtonLabel") }}
+                      {{ $t("common.form.saveButtonLabel") }}
                     </v-btn>
                     <v-spacer />
                   </v-layout>
@@ -225,58 +225,17 @@
 </template>
 
 <script lang="ts">
-import { useEntityForm } from '@/composables/useEntityForm';
-import { useI18n } from '@/composables/useI18n'
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
 import { News as Model } from '@/services/api/factory';
-import { defineComponent } from 'vue';
+import Store from '@/common/Entity/EntityModelStore';
+import EntityForm from '@/common/Entity/EntityForm';
 
-export default defineComponent({
-  // eslint-disable-next-line vue/match-component-file-name
-  name: 'NewsForm',
-
-  setup () {
-    const { t } = useI18n();
-
-    const {
-      tab,
-      form,
-      model,
-      errors,
-      isLoading,
-      isChanged,
-      i18nFieldError,
-      tabsHasError,
-
-      onSave,
-      onDelete,
-      navigateBack,
-      onSaveAndBack
-    } = useEntityForm<Model>({ Model} );
-
-	const getErrorMessage = (errorKey: string | null): string => {
-      const errorMessage = i18nFieldError(errorKey);
-      return errorMessage ? t(errorMessage) : '';
-    };
-
-    return {
-      t,
-      tab,
-      form,
-      model,
-      errors,
-      isLoading,
-      isChanged,
-      i18nFieldError,
-      tabsHasError,
-      getErrorMessage,
-
-      onSave,
-      onDelete,
-      navigateBack,
-      onSaveAndBack
-    };
-  }
-});
+@Observer
+@Component
+export default class Form extends EntityForm {
+  store: Store<Model> = new Store<Model>(Model);
+}
 </script>
 
 <style scoped></style>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/News/List.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/News/List.vue
index c9dc873..8cc4aa6 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/News/List.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/News/List.vue
@@ -18,26 +18,27 @@
               <v-flex>
                 <v-layout align-center>
                   <h2 class="ellipsed mr-1">
-                    {{ t("news.list.title") }}
+                    {{ $t("news.list.title") }}
                   </h2>
                   <span
-                    v-if="pagination.totalItems"
+                    v-if="store.pagination.totalItems"
                     class="text--secondary subtitle-2"
                   >
-                    {{ pagination.totalItems }}
+                    {{ store.pagination.totalItems }}
                   </span>
                 </v-layout>
               </v-flex>
               <v-spacer />
               <v-flex shrink>
                 <v-btn
-                  small
                   dark
                   color="success"
                   :to="{ name: 'newsAdd' }"
                 >
-                  <v-icon>add</v-icon>
-                  {{ t("common.list.addNewLabel") }}
+                  <v-icon left>
+                    add
+                  </v-icon>
+                  {{ $t("common.list.addNewLabel") }}
                 </v-btn>
               </v-flex>
             </v-layout>
@@ -63,9 +64,9 @@
                     mr-sm-2
                   >
                     <v-text-field
-                      v-model="filters.title"
+                      v-model="store.filters.title"
                       :placeholder="
-                        t('news.list.filter.quickFilterPlaceholder')
+                        $t('news.list.filter.quickFilterPlaceholder')
                       "
                       hide-details
                       @keyup.enter.native="submitFilters()"
@@ -77,10 +78,9 @@
                     mr-sm-10
                   >
                     <multi-filters
-                      :filters="filters"
-                      :active-filters="activeFilters"
+                      :filters="store.filters"
+                      :active-filters="store.activeFilters"
                       @submitFilters="submitFilters"
-                      @update:filters="updateFilters"
                     />
                   </v-flex>
                   <v-flex
@@ -88,8 +88,8 @@
                     mt-sm-4
                   >
                     <vt-compact-pagination
-                      :value="pagination.page"
-                      :total-pages="pagination.totalPages"
+                      :value="store.pagination.page"
+                      :total-pages="store.pagination.totalPages"
                       @input="setCompactPagination"
                     />
                   </v-flex>
@@ -100,9 +100,9 @@
               <v-data-table
                 v-model="selected"
                 :headers="headers"
-                :items="list"
-                :options="vuetifyTableOptions"
-                :server-items-length="pagination.totalItems"
+                :items="store.list"
+                :options="store.vuetifyTableOptions"
+                :server-items-length="store.pagination.totalItems"
                 item-key="id"
                 :footer-props="{
                   itemsPerPageOptions: [10, 25, 50, 100, 500]
@@ -116,7 +116,7 @@
                   }
                 ]"
                 :show-select="false"
-                :loading="isLoading"
+                :loading="store.isLoading"
                 fixed-header
                 @update:options="setPagination"
               >
@@ -176,95 +176,67 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
-import { NewsSummary, NewsSearch } from '@/services/api/factory';
-import { useEntityList } from '@/composables/useEntityList';
-import { useI18n } from '@/composables/useI18n';
-
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
+import EntityList from '@/common/Entity/EntityList';
+import Store from '@/common/Entity/EntityCollectionStore';
+import {
+  NewsSummary as Model,
+  NewsSearch as SearchModel
+} from '@/services/api/factory';
 import MultiFilters from './components/MultiListFilters.vue';
 
-export default defineComponent({
-  // eslint-disable-next-line vue/multi-word-component-names
+@Observer
+@Component({
   name: 'List',
-  components: { MultiFilters },
-
-  setup () {
-    const { t } = useI18n();
+  components: { MultiFilters }
+})
+export default class List extends EntityList {
+  store: Store = new Store(Model, SearchModel);
 
-    const {
-      selected,
-      pagination,
-      filters,
-      activeFilters,
-      list,
-      isLoading,
-      vuetifyTableOptions,
-      deleteItem,
-      submitFilters,
-      setCompactPagination,
-      setPagination,
-      updateFilters
-    } = useEntityList(NewsSummary, NewsSearch);
-
-    const headers = computed(() => [
+  get headers () {
+    return [
       {
-        text: t('news.list.headers.title'),
+        text: this.$t('news.list.headers.title'),
         value: 'title',
         align: 'left'
       },
       {
-        text: t('news.list.headers.preview'),
+        text: this.$t('news.list.headers.preview'),
         value: 'preview'
       },
       {
-        text: t('news.list.headers.content'),
+        text: this.$t('news.list.headers.content'),
         value: 'content'
       },
       {
-        text: t('news.list.headers.category'),
+        text: this.$t('news.list.headers.category'),
         value: 'category',
         sortable: false
       },
       {
-        text: t('news.list.headers.country'),
+        text: this.$t('news.list.headers.country'),
         value: 'country',
         sortable: false
       },
       {
-        text: t('news.list.headers.region'),
+        text: this.$t('news.list.headers.region'),
         value: 'region',
         sortable: false
       },
       {
-        text: t('news.list.headers.status'),
+        text: this.$t('news.list.headers.status'),
         value: 'status',
         sortable: false
       },
       {
-        text: t('news.list.headers.actions'),
+        text: this.$t('news.list.headers.actions'),
         value: 'id',
         sortable: false
       }
-    ]);
-
-    return {
-      t,
-      selected,
-      pagination,
-      filters,
-      activeFilters,
-      list,
-      isLoading,
-      vuetifyTableOptions,
-      deleteItem,
-      submitFilters,
-      setCompactPagination,
-      setPagination,
-      updateFilters,
-      headers
-    };
+    ];
   }
-});
+}
 </script>
 
 <style lang="scss"></style>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/News/components/MultiListFilters.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/News/components/MultiListFilters.vue
index 7f1ec20..83bb31e 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/News/components/MultiListFilters.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/News/components/MultiListFilters.vue
@@ -1,43 +1,26 @@
 <template>
-  <vt-new-multi-filter
+  <vt-multi-filter
     :items="filterItems"
     :filters="filters"
     autofocus
-    :label="t('common.list.filter.title')"
+    :label="$t('common.list.filter.title')"
     @submitFilters="$emit('submitFilters')"
-    @update:filters="$emit('update:filters', $event)"
   />
 </template>
 
 <script lang="ts">
-import { IFilterItem } from '@/common/MultiFilter/types';
-import { useI18n } from '@/composables/useI18n';
-import { defineComponent } from 'vue';
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
+import EntityListFilters from '@/common/Entity/EntityListFilters';
 
-export default defineComponent({
-  name: 'MultiListFilters',
-
-  props: {
-    filters: {
-      type: Object,
-      required: true
-    },
-    activeFilters: {
-      type: Object,
-      required: true
-    }
-  },
-
-  emits: ['submitFilters', 'update:filters'],
-
-  setup () {
-    const { t } = useI18n();
-
-    const filterItems = [
+@Observer
+@Component
+export default class MultiListFilters extends EntityListFilters {
+  filterItems = [
     {
       id: 'title',
       type: 'input',
-      title: t('news.list.filter.title'),
+      title: this.$t('news.list.filter.title'),
       value: null,
       values: null,
       settings: {
@@ -48,7 +31,7 @@ export default defineComponent({
     {
       id: 'preview',
       type: 'input',
-      title: t('news.list.filter.preview'),
+      title: this.$t('news.list.filter.preview'),
       value: null,
       values: null,
       settings: {
@@ -59,7 +42,7 @@ export default defineComponent({
     {
       id: 'content',
       type: 'input',
-      title: t('news.list.filter.content'),
+      title: this.$t('news.list.filter.content'),
       value: null,
       values: null,
       settings: {
@@ -70,7 +53,7 @@ export default defineComponent({
     {
       id: 'categoryId',
       type: 'select',
-      title: t('news.list.filter.categoryId'),
+      title: this.$t('news.list.filter.categoryId'),
       value: null,
       values: null,
       settings: {
@@ -84,7 +67,7 @@ export default defineComponent({
     {
       id: 'countryId',
       type: 'select',
-      title: t('news.list.filter.countryId'),
+      title: this.$t('news.list.filter.countryId'),
       value: null,
       values: null,
       settings: {
@@ -98,7 +81,7 @@ export default defineComponent({
     {
       id: 'regionId',
       type: 'select',
-      title: t('news.list.filter.regionId'),
+      title: this.$t('news.list.filter.regionId'),
       value: null,
       values: null,
       settings: {
@@ -112,7 +95,7 @@ export default defineComponent({
     {
       id: 'cityId',
       type: 'select',
-      title: t('news.list.filter.cityId'),
+      title: this.$t('news.list.filter.cityId'),
       value: null,
       values: null,
       settings: {
@@ -126,7 +109,7 @@ export default defineComponent({
     {
       id: 'createdAt',
       type: 'datetime',
-      title: t('news.list.filter.createdAt'),
+      title: this.$t('news.list.filter.createdAt'),
       value: null,
       values: null,
       settings: {
@@ -138,7 +121,7 @@ export default defineComponent({
     {
       id: 'publishedAt',
       type: 'datetime',
-      title: t('news.list.filter.publishedAt'),
+      title: this.$t('news.list.filter.publishedAt'),
       value: null,
       values: null,
       settings: {
@@ -150,7 +133,7 @@ export default defineComponent({
     {
       id: 'statusId',
       type: 'select',
-      title: t('news.list.filter.statusId'),
+      title: this.$t('news.list.filter.statusId'),
       value: null,
       values: null,
       settings: {
@@ -166,7 +149,7 @@ export default defineComponent({
     {
       id: 'ids',
       type: 'select',
-      title: t('news.list.filter.ids'),
+      title: this.$t('news.list.filter.ids'),
       value: null,
       values: null,
       settings: {
@@ -176,12 +159,6 @@ export default defineComponent({
         component: 'v-text-field'
       }
     }
-  ].filter(Boolean) as IFilterItem[];
-
-    return {
-      t,
-      filterItems
-    };
-  }
-});
+  ].filter(Boolean)
+}
 </script>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/Form.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/Form.vue
index 6630576..e46587a 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/Form.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/Form.vue
@@ -15,7 +15,7 @@
         >
           <v-flex>
             <h2 class="ellipsed">
-              {{ model.title || "..." }}
+              {{ store.model.title || "..." }}
             </h2>
           </v-flex>
           <v-spacer />
@@ -23,7 +23,7 @@
             <v-btn
               text
               color="primary"
-              :disabled="isLoading"
+              :disabled="store.isLoading"
               @click.stop="navigateBack"
             >
               <v-icon
@@ -32,7 +32,7 @@
                 arrow_back
               </v-icon>
               <template v-if="!$vuetify.breakpoint.xsOnly">
-                {{ t("common.form.cancelButtonLabel") }}
+                {{ $t("common.form.cancelButtonLabel") }}
               </template>
             </v-btn>
             <v-hover
@@ -61,7 +61,7 @@
             Основные
           </v-tab>
         </v-tabs>
-        <v-card v-if="model">
+        <v-card v-if="store.model">
           <v-form
             ref="form"
             @submit.prevent="onSaveAndBack"
@@ -71,19 +71,19 @@
                 <v-tab-item eager>
                   <!--  generated part -->
                   <vt-form-field
-                    v-model="model.title"
+                    v-model="store.model.title"
                     component="v-text-field"
-                    :label="t('tag.form.titleLabel')"
-                    :error-messages="getErrorMessage(errors.title)"
-                    :disabled="isLoading"
+                    :label="$t('tag.form.titleLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.title))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     required
                   /><vt-form-field
-                    v-model="model.statusId"
+                    v-model="store.model.statusId"
                     component="vt-status-select"
-                    :label="t('tag.form.statusIdLabel')"
-                    :error-messages="getErrorMessage(errors.statusId)"
-                    :disabled="isLoading"
+                    :label="$t('tag.form.statusIdLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.statusId))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     required
                     compact
@@ -103,21 +103,21 @@
                     <v-btn
                       type="submit"
                       color="success"
-                      :disabled="!isChanged || isLoading"
-                      :loading="isLoading"
+                      :disabled="!store.isChanged || store.isLoading"
+                      :loading="store.isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="!$vuetify.breakpoint.xsOnly && 'mx-2'"
                     >
                       <v-icon left>
                         done
                       </v-icon>
-                      {{ t("common.form.saveAndCloseButtonLabel") }}
+                      {{ $t("common.form.saveAndCloseButtonLabel") }}
                     </v-btn>
 
                     <v-btn
                       v-if="$route.params.id"
-                      :disabled="!isChanged || isLoading"
-                      :loading="isLoading"
+                      :disabled="!store.isChanged || store.isLoading"
+                      :loading="store.isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="[
                         $vuetify.breakpoint.xsOnly && 'ml-0 mt-2',
@@ -127,7 +127,7 @@
                       color="accent"
                       @click.stop="onSave"
                     >
-                      {{ t("common.form.saveButtonLabel") }}
+                      {{ $t("common.form.saveButtonLabel") }}
                     </v-btn>
                     <v-spacer />
                   </v-layout>
@@ -142,58 +142,17 @@
 </template>
 
 <script lang="ts">
-import { useEntityForm } from '@/composables/useEntityForm';
-import { useI18n } from '@/composables/useI18n'
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
 import { Tag as Model } from '@/services/api/factory';
-import { defineComponent } from 'vue';
+import Store from '@/common/Entity/EntityModelStore';
+import EntityForm from '@/common/Entity/EntityForm';
 
-export default defineComponent({
-  // eslint-disable-next-line vue/match-component-file-name
-  name: 'TagForm',
-
-  setup () {
-    const { t } = useI18n();
-
-    const {
-      tab,
-      form,
-      model,
-      errors,
-      isLoading,
-      isChanged,
-      i18nFieldError,
-      tabsHasError,
-
-      onSave,
-      onDelete,
-      navigateBack,
-      onSaveAndBack
-    } = useEntityForm<Model>({ Model} );
-
-	const getErrorMessage = (errorKey: string | null): string => {
-      const errorMessage = i18nFieldError(errorKey);
-      return errorMessage ? t(errorMessage) : '';
-    };
-
-    return {
-      t,
-      tab,
-      form,
-      model,
-      errors,
-      isLoading,
-      isChanged,
-      i18nFieldError,
-      tabsHasError,
-      getErrorMessage,
-
-      onSave,
-      onDelete,
-      navigateBack,
-      onSaveAndBack
-    };
-  }
-});
+@Observer
+@Component
+export default class Form extends EntityForm {
+  store: Store<Model> = new Store<Model>(Model);
+}
 </script>
 
 <style scoped></style>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/List.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/List.vue
index 71dec4b..59f5d65 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/List.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/List.vue
@@ -18,26 +18,27 @@
               <v-flex>
                 <v-layout align-center>
                   <h2 class="ellipsed mr-1">
-                    {{ t("tag.list.title") }}
+                    {{ $t("tag.list.title") }}
                   </h2>
                   <span
-                    v-if="pagination.totalItems"
+                    v-if="store.pagination.totalItems"
                     class="text--secondary subtitle-2"
                   >
-                    {{ pagination.totalItems }}
+                    {{ store.pagination.totalItems }}
                   </span>
                 </v-layout>
               </v-flex>
               <v-spacer />
               <v-flex shrink>
                 <v-btn
-                  small
                   dark
                   color="success"
                   :to="{ name: 'tagAdd' }"
                 >
-                  <v-icon>add</v-icon>
-                  {{ t("common.list.addNewLabel") }}
+                  <v-icon left>
+                    add
+                  </v-icon>
+                  {{ $t("common.list.addNewLabel") }}
                 </v-btn>
               </v-flex>
             </v-layout>
@@ -63,9 +64,9 @@
                     mr-sm-2
                   >
                     <v-text-field
-                      v-model="filters.title"
+                      v-model="store.filters.title"
                       :placeholder="
-                        t('tag.list.filter.quickFilterPlaceholder')
+                        $t('tag.list.filter.quickFilterPlaceholder')
                       "
                       hide-details
                       @keyup.enter.native="submitFilters()"
@@ -77,10 +78,9 @@
                     mr-sm-10
                   >
                     <multi-filters
-                      :filters="filters"
-                      :active-filters="activeFilters"
+                      :filters="store.filters"
+                      :active-filters="store.activeFilters"
                       @submitFilters="submitFilters"
-                      @update:filters="updateFilters"
                     />
                   </v-flex>
                   <v-flex
@@ -88,8 +88,8 @@
                     mt-sm-4
                   >
                     <vt-compact-pagination
-                      :value="pagination.page"
-                      :total-pages="pagination.totalPages"
+                      :value="store.pagination.page"
+                      :total-pages="store.pagination.totalPages"
                       @input="setCompactPagination"
                     />
                   </v-flex>
@@ -100,9 +100,9 @@
               <v-data-table
                 v-model="selected"
                 :headers="headers"
-                :items="list"
-                :options="vuetifyTableOptions"
-                :server-items-length="pagination.totalItems"
+                :items="store.list"
+                :options="store.vuetifyTableOptions"
+                :server-items-length="store.pagination.totalItems"
                 item-key="id"
                 :footer-props="{
                   itemsPerPageOptions: [10, 25, 50, 100, 500]
@@ -116,7 +116,7 @@
                   }
                 ]"
                 :show-select="false"
-                :loading="isLoading"
+                :loading="store.isLoading"
                 fixed-header
                 @update:options="setPagination"
               >
@@ -161,72 +161,44 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
-import { TagSummary, TagSearch } from '@/services/api/factory';
-import { useEntityList } from '@/composables/useEntityList';
-import { useI18n } from '@/composables/useI18n';
-
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
+import EntityList from '@/common/Entity/EntityList';
+import Store from '@/common/Entity/EntityCollectionStore';
+import {
+  TagSummary as Model,
+  TagSearch as SearchModel
+} from '@/services/api/factory';
 import MultiFilters from './components/MultiListFilters.vue';
 
-export default defineComponent({
-  // eslint-disable-next-line vue/multi-word-component-names
+@Observer
+@Component({
   name: 'List',
-  components: { MultiFilters },
-
-  setup () {
-    const { t } = useI18n();
+  components: { MultiFilters }
+})
+export default class List extends EntityList {
+  store: Store = new Store(Model, SearchModel);
 
-    const {
-      selected,
-      pagination,
-      filters,
-      activeFilters,
-      list,
-      isLoading,
-      vuetifyTableOptions,
-      deleteItem,
-      submitFilters,
-      setCompactPagination,
-      setPagination,
-      updateFilters
-    } = useEntityList(TagSummary, TagSearch);
-
-    const headers = computed(() => [
+  get headers () {
+    return [
       {
-        text: t('tag.list.headers.title'),
+        text: this.$t('tag.list.headers.title'),
         value: 'title',
         align: 'left'
       },
       {
-        text: t('tag.list.headers.status'),
+        text: this.$t('tag.list.headers.status'),
         value: 'status',
         sortable: false
       },
       {
-        text: t('tag.list.headers.actions'),
+        text: this.$t('tag.list.headers.actions'),
         value: 'id',
         sortable: false
       }
-    ]);
-
-    return {
-      t,
-      selected,
-      pagination,
-      filters,
-      activeFilters,
-      list,
-      isLoading,
-      vuetifyTableOptions,
-      deleteItem,
-      submitFilters,
-      setCompactPagination,
-      setPagination,
-      updateFilters,
-      headers
-    };
+    ];
   }
-});
+}
 </script>
 
 <style lang="scss"></style>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/components/MultiListFilters.vue b/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/components/MultiListFilters.vue
index 523e594..4e5ae81 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/components/MultiListFilters.vue
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/Tag/components/MultiListFilters.vue
@@ -1,43 +1,26 @@
 <template>
-  <vt-new-multi-filter
+  <vt-multi-filter
     :items="filterItems"
     :filters="filters"
     autofocus
-    :label="t('common.list.filter.title')"
+    :label="$t('common.list.filter.title')"
     @submitFilters="$emit('submitFilters')"
-    @update:filters="$emit('update:filters', $event)"
   />
 </template>
 
 <script lang="ts">
-import { IFilterItem } from '@/common/MultiFilter/types';
-import { useI18n } from '@/composables/useI18n';
-import { defineComponent } from 'vue';
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
+import EntityListFilters from '@/common/Entity/EntityListFilters';
 
-export default defineComponent({
-  name: 'MultiListFilters',
-
-  props: {
-    filters: {
-      type: Object,
-      required: true
-    },
-    activeFilters: {
-      type: Object,
-      required: true
-    }
-  },
-
-  emits: ['submitFilters', 'update:filters'],
-
-  setup () {
-    const { t } = useI18n();
-
-    const filterItems = [
+@Observer
+@Component
+export default class MultiListFilters extends EntityListFilters {
+  filterItems = [
     {
       id: 'title',
       type: 'input',
-      title: t('tag.list.filter.title'),
+      title: this.$t('tag.list.filter.title'),
       value: null,
       values: null,
       settings: {
@@ -48,7 +31,7 @@ export default defineComponent({
     {
       id: 'statusId',
       type: 'select',
-      title: t('tag.list.filter.statusId'),
+      title: this.$t('tag.list.filter.statusId'),
       value: null,
       values: null,
       settings: {
@@ -64,7 +47,7 @@ export default defineComponent({
     {
       id: 'ids',
       type: 'select',
-      title: t('tag.list.filter.ids'),
+      title: this.$t('tag.list.filter.ids'),
       value: null,
       values: null,
       settings: {
@@ -74,12 +57,6 @@ export default defineComponent({
         component: 'v-text-field'
       }
     }
-  ].filter(Boolean) as IFilterItem[];
-
-    return {
-      t,
-      filterItems
-    };
-  }
-});
+  ].filter(Boolean)
+}
 </script>
diff --git a/generators/testdata/expected/vt-template/all/src/pages/Entity/routes.ts b/generators/testdata/expected/vt-template/all/src/pages/Entity/routes.ts
index 198b28f..7c69d18 100644
--- a/generators/testdata/expected/vt-template/all/src/pages/Entity/routes.ts
+++ b/generators/testdata/expected/vt-template/all/src/pages/Entity/routes.ts
@@ -1,344 +1,311 @@
 /* eslint-disable */
 export default [
-    /* Category */
-    {
-        name: "categoryList",
-        path: "/categories",
-        component: () =>
-            import("@/pages/Entity/Category/List.vue"),
-        meta: {
-            title: "CategoryList",
-            breadcrumbs: ["dashboard", "categoryList"]
-        }
-    },
-    {
-        name: "categoryEdit",
-        path: "/categories/:id/edit",
-        component: () =>
-            import("@/pages/Entity/Category/Form.vue"),
-        meta: {
-            title: "CategoryEdit",
-            breadcrumbs: ["dashboard", "categoryList", "categoryEdit"]
-        }
-    },
-    {
-        name: "categoryAdd",
-        path: "/categories/add",
-        component: () =>
-            import("@/pages/Entity/Category/Form.vue"),
-        meta: {
-            title: "CategoryAdd",
-            breadcrumbs: ["dashboard", "categoryList", "categoryAdd"]
-        }
-    },
-    /* News */
-    {
-        name: "newsList",
-        path: "/news",
-        component: () =>
-            import("@/pages/Entity/News/List.vue"),
-        meta: {
-            title: "NewsList",
-            breadcrumbs: ["dashboard", "newsList"]
-        }
-    },
-    {
-        name: "newsEdit",
-        path: "/news/:id/edit",
-        component: () =>
-            import("@/pages/Entity/News/Form.vue"),
-        meta: {
-            title: "NewsEdit",
-            breadcrumbs: ["dashboard", "newsList", "newsEdit"]
-        }
-    },
-    {
-        name: "newsAdd",
-        path: "/news/add",
-        component: () =>
-            import("@/pages/Entity/News/Form.vue"),
-        meta: {
-            title: "NewsAdd",
-            breadcrumbs: ["dashboard", "newsList", "newsAdd"]
-        }
-    },
-    /* Tag */
-    {
-        name: "tagList",
-        path: "/tags",
-        component: () =>
-            import("@/pages/Entity/Tag/List.vue"),
-        meta: {
-            title: "TagList",
-            breadcrumbs: ["dashboard", "tagList"]
-        }
-    },
-    {
-        name: "tagEdit",
-        path: "/tags/:id/edit",
-        component: () =>
-            import("@/pages/Entity/Tag/Form.vue"),
-        meta: {
-            title: "TagEdit",
-            breadcrumbs: ["dashboard", "tagList", "tagEdit"]
-        }
-    },
-    {
-        name: "tagAdd",
-        path: "/tags/add",
-        component: () =>
-            import("@/pages/Entity/Tag/Form.vue"),
-        meta: {
-            title: "TagAdd",
-            breadcrumbs: ["dashboard", "tagList", "tagAdd"]
-        }
-    },
-    /* City */
-    {
-        name: "cityList",
-        path: "/cities",
-        component: () =>
-            import("@/pages/Entity/City/List.vue"),
-        meta: {
-            title: "CityList",
-            breadcrumbs: ["dashboard", "cityList"]
-        }
-    },
-    {
-        name: "cityEdit",
-        path: "/cities/:id/edit",
-        component: () =>
-            import("@/pages/Entity/City/Form.vue"),
-        meta: {
-            title: "CityEdit",
-            breadcrumbs: ["dashboard", "cityList", "cityEdit"]
-        }
-    },
-    {
-        name: "cityAdd",
-        path: "/cities/add",
-        component: () =>
-            import("@/pages/Entity/City/Form.vue"),
-        meta: {
-            title: "CityAdd",
-            breadcrumbs: ["dashboard", "cityList", "cityAdd"]
-        }
-    },
-    /* Country */
-    {
-        name: "countryList",
-        path: "/countries",
-        component: () =>
-            import("@/pages/Entity/Country/List.vue"),
-        meta: {
-            title: "CountryList",
-            breadcrumbs: ["dashboard", "countryList"]
-        }
-    },
-    {
-        name: "countryEdit",
-        path: "/countries/:id/edit",
-        component: () =>
-            import("@/pages/Entity/Country/Form.vue"),
-        meta: {
-            title: "CountryEdit",
-            breadcrumbs: ["dashboard", "countryList", "countryEdit"]
-        }
-    },
-    {
-        name: "countryAdd",
-        path: "/countries/add",
-        component: () =>
-            import("@/pages/Entity/Country/Form.vue"),
-        meta: {
-            title: "CountryAdd",
-            breadcrumbs: ["dashboard", "countryList", "countryAdd"]
-        }
-    },
-    /* Region */
-    {
-        name: "regionList",
-        path: "/regions",
-        component: () =>
-            import("@/pages/Entity/Region/List.vue"),
-        meta: {
-            title: "RegionList",
-            breadcrumbs: ["dashboard", "regionList"]
-        }
-    },
-    {
-        name: "regionEdit",
-        path: "/regions/:id/edit",
-        component: () =>
-            import("@/pages/Entity/Region/Form.vue"),
-        meta: {
-            title: "RegionEdit",
-            breadcrumbs: ["dashboard", "regionList", "regionEdit"]
-        }
-    },
-    {
-        name: "regionAdd",
-        path: "/regions/add",
-        component: () =>
-            import("@/pages/Entity/Region/Form.vue"),
-        meta: {
-            title: "RegionAdd",
-            breadcrumbs: ["dashboard", "regionList", "regionAdd"]
-        }
-    },
-    /* EncryptionKey */
-    {
-        name: "encryptionKeyList",
-        path: "/encryption-keys",
-        component: () =>
-            import("@/pages/Entity/EncryptionKey/List.vue"),
-        meta: {
-            title: "EncryptionKeyList",
-            breadcrumbs: ["dashboard", "encryptionKeyList"]
-        }
-    },
-    {
-        name: "encryptionKeyEdit",
-        path: "/encryption-keys/:id/edit",
-        component: () =>
-            import("@/pages/Entity/EncryptionKey/Form.vue"),
-        meta: {
-            title: "EncryptionKeyEdit",
-            breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyEdit"]
-        }
-    },
-    {
-        name: "encryptionKeyAdd",
-        path: "/encryption-keys/add",
-        component: () =>
-            import("@/pages/Entity/EncryptionKey/Form.vue"),
-        meta: {
-            title: "EncryptionKeyAdd",
-            breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyAdd"]
-        }
-    },
-    /* LoginCode */
-    {
-        name: "loginCodeList",
-        path: "/login-codes",
-        component: () =>
-            import("@/pages/Entity/LoginCode/List.vue"),
-        meta: {
-            title: "LoginCodeList",
-            breadcrumbs: ["dashboard", "loginCodeList"]
-        }
-    },
-    {
-        name: "loginCodeEdit",
-        path: "/login-codes/:id/edit",
-        component: () =>
-            import("@/pages/Entity/LoginCode/Form.vue"),
-        meta: {
-            title: "LoginCodeEdit",
-            breadcrumbs: ["dashboard", "loginCodeList", "loginCodeEdit"]
-        }
-    },
-    {
-        name: "loginCodeAdd",
-        path: "/login-codes/add",
-        component: () =>
-            import("@/pages/Entity/LoginCode/Form.vue"),
-        meta: {
-            title: "LoginCodeAdd",
-            breadcrumbs: ["dashboard", "loginCodeList", "loginCodeAdd"]
-        }
-    },
-    /* SiteUser */
-    {
-        name: "siteUserList",
-        path: "/site-users",
-        component: () =>
-            import("@/pages/Entity/SiteUser/List.vue"),
-        meta: {
-            title: "SiteUserList",
-            breadcrumbs: ["dashboard", "siteUserList"]
-        }
-    },
-    {
-        name: "siteUserEdit",
-        path: "/site-users/:id/edit",
-        component: () =>
-            import("@/pages/Entity/SiteUser/Form.vue"),
-        meta: {
-            title: "SiteUserEdit",
-            breadcrumbs: ["dashboard", "siteUserList", "siteUserEdit"]
-        }
-    },
-    {
-        name: "siteUserAdd",
-        path: "/site-users/add",
-        component: () =>
-            import("@/pages/Entity/SiteUser/Form.vue"),
-        meta: {
-            title: "SiteUserAdd",
-            breadcrumbs: ["dashboard", "siteUserList", "siteUserAdd"]
-        }
-    },
-    /* VfsFile */
-    {
-        name: "vfsFileList",
-        path: "/vfs-files",
-        component: () =>
-            import("@/pages/Entity/VfsFile/List.vue"),
-        meta: {
-            title: "VfsFileList",
-            breadcrumbs: ["dashboard", "vfsFileList"]
-        }
-    },
-    {
-        name: "vfsFileEdit",
-        path: "/vfs-files/:id/edit",
-        component: () =>
-            import("@/pages/Entity/VfsFile/Form.vue"),
-        meta: {
-            title: "VfsFileEdit",
-            breadcrumbs: ["dashboard", "vfsFileList", "vfsFileEdit"]
-        }
-    },
-    {
-        name: "vfsFileAdd",
-        path: "/vfs-files/add",
-        component: () =>
-            import("@/pages/Entity/VfsFile/Form.vue"),
-        meta: {
-            title: "VfsFileAdd",
-            breadcrumbs: ["dashboard", "vfsFileList", "vfsFileAdd"]
-        }
-    },
-    /* VfsFolder */
-    {
-        name: "vfsFolderList",
-        path: "/vfs-folders",
-        component: () =>
-            import("@/pages/Entity/VfsFolder/List.vue"),
-        meta: {
-            title: "VfsFolderList",
-            breadcrumbs: ["dashboard", "vfsFolderList"]
-        }
-    },
-    {
-        name: "vfsFolderEdit",
-        path: "/vfs-folders/:id/edit",
-        component: () =>
-            import("@/pages/Entity/VfsFolder/Form.vue"),
-        meta: {
-            title: "VfsFolderEdit",
-            breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderEdit"]
-        }
-    },
-    {
-        name: "vfsFolderAdd",
-        path: "/vfs-folders/add",
-        component: () =>
-            import("@/pages/Entity/VfsFolder/Form.vue"),
-        meta: {
-            title: "VfsFolderAdd",
-            breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderAdd"]
-        }
-    },
+  /* Category */
+  {
+    name: "categoryList",
+    path: "/categories",
+    component: () =>
+      import("@/pages/Entity/Category/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "categoryList"]
+    }
+  },
+  {
+    name: "categoryEdit",
+    path: "/categories/:id/edit",
+    component: () =>
+      import("@/pages/Entity/Category/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "categoryList", "categoryEdit"]
+    }
+  },
+  {
+    name: "categoryAdd",
+    path: "/categories/add",
+    component: () =>
+      import("@/pages/Entity/Category/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "categoryList", "categoryAdd"]
+    }
+  },
+  /* News */
+  {
+    name: "newsList",
+    path: "/news",
+    component: () =>
+      import("@/pages/Entity/News/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "newsList"]
+    }
+  },
+  {
+    name: "newsEdit",
+    path: "/news/:id/edit",
+    component: () =>
+      import("@/pages/Entity/News/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "newsList", "newsEdit"]
+    }
+  },
+  {
+    name: "newsAdd",
+    path: "/news/add",
+    component: () =>
+      import("@/pages/Entity/News/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "newsList", "newsAdd"]
+    }
+  },
+  /* Tag */
+  {
+    name: "tagList",
+    path: "/tags",
+    component: () =>
+      import("@/pages/Entity/Tag/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "tagList"]
+    }
+  },
+  {
+    name: "tagEdit",
+    path: "/tags/:id/edit",
+    component: () =>
+      import("@/pages/Entity/Tag/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "tagList", "tagEdit"]
+    }
+  },
+  {
+    name: "tagAdd",
+    path: "/tags/add",
+    component: () =>
+      import("@/pages/Entity/Tag/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "tagList", "tagAdd"]
+    }
+  },
+  /* City */
+  {
+    name: "cityList",
+    path: "/cities",
+    component: () =>
+      import("@/pages/Entity/City/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "cityList"]
+    }
+  },
+  {
+    name: "cityEdit",
+    path: "/cities/:id/edit",
+    component: () =>
+      import("@/pages/Entity/City/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "cityList", "cityEdit"]
+    }
+  },
+  {
+    name: "cityAdd",
+    path: "/cities/add",
+    component: () =>
+      import("@/pages/Entity/City/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "cityList", "cityAdd"]
+    }
+  },
+  /* Country */
+  {
+    name: "countryList",
+    path: "/countries",
+    component: () =>
+      import("@/pages/Entity/Country/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "countryList"]
+    }
+  },
+  {
+    name: "countryEdit",
+    path: "/countries/:id/edit",
+    component: () =>
+      import("@/pages/Entity/Country/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "countryList", "countryEdit"]
+    }
+  },
+  {
+    name: "countryAdd",
+    path: "/countries/add",
+    component: () =>
+      import("@/pages/Entity/Country/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "countryList", "countryAdd"]
+    }
+  },
+  /* Region */
+  {
+    name: "regionList",
+    path: "/regions",
+    component: () =>
+      import("@/pages/Entity/Region/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "regionList"]
+    }
+  },
+  {
+    name: "regionEdit",
+    path: "/regions/:id/edit",
+    component: () =>
+      import("@/pages/Entity/Region/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "regionList", "regionEdit"]
+    }
+  },
+  {
+    name: "regionAdd",
+    path: "/regions/add",
+    component: () =>
+      import("@/pages/Entity/Region/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "regionList", "regionAdd"]
+    }
+  },
+  /* EncryptionKey */
+  {
+    name: "encryptionKeyList",
+    path: "/encryption-keys",
+    component: () =>
+      import("@/pages/Entity/EncryptionKey/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "encryptionKeyList"]
+    }
+  },
+  {
+    name: "encryptionKeyEdit",
+    path: "/encryption-keys/:id/edit",
+    component: () =>
+      import("@/pages/Entity/EncryptionKey/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyEdit"]
+    }
+  },
+  {
+    name: "encryptionKeyAdd",
+    path: "/encryption-keys/add",
+    component: () =>
+      import("@/pages/Entity/EncryptionKey/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyAdd"]
+    }
+  },
+  /* LoginCode */
+  {
+    name: "loginCodeList",
+    path: "/login-codes",
+    component: () =>
+      import("@/pages/Entity/LoginCode/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "loginCodeList"]
+    }
+  },
+  {
+    name: "loginCodeEdit",
+    path: "/login-codes/:id/edit",
+    component: () =>
+      import("@/pages/Entity/LoginCode/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "loginCodeList", "loginCodeEdit"]
+    }
+  },
+  {
+    name: "loginCodeAdd",
+    path: "/login-codes/add",
+    component: () =>
+      import("@/pages/Entity/LoginCode/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "loginCodeList", "loginCodeAdd"]
+    }
+  },
+  /* SiteUser */
+  {
+    name: "siteUserList",
+    path: "/site-users",
+    component: () =>
+      import("@/pages/Entity/SiteUser/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "siteUserList"]
+    }
+  },
+  {
+    name: "siteUserEdit",
+    path: "/site-users/:id/edit",
+    component: () =>
+      import("@/pages/Entity/SiteUser/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "siteUserList", "siteUserEdit"]
+    }
+  },
+  {
+    name: "siteUserAdd",
+    path: "/site-users/add",
+    component: () =>
+      import("@/pages/Entity/SiteUser/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "siteUserList", "siteUserAdd"]
+    }
+  },
+  /* VfsFile */
+  {
+    name: "vfsFileList",
+    path: "/vfs-files",
+    component: () =>
+      import("@/pages/Entity/VfsFile/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "vfsFileList"]
+    }
+  },
+  {
+    name: "vfsFileEdit",
+    path: "/vfs-files/:id/edit",
+    component: () =>
+      import("@/pages/Entity/VfsFile/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "vfsFileList", "vfsFileEdit"]
+    }
+  },
+  {
+    name: "vfsFileAdd",
+    path: "/vfs-files/add",
+    component: () =>
+      import("@/pages/Entity/VfsFile/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "vfsFileList", "vfsFileAdd"]
+    }
+  },
+  /* VfsFolder */
+  {
+    name: "vfsFolderList",
+    path: "/vfs-folders",
+    component: () =>
+      import("@/pages/Entity/VfsFolder/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "vfsFolderList"]
+    }
+  },
+  {
+    name: "vfsFolderEdit",
+    path: "/vfs-folders/:id/edit",
+    component: () =>
+      import("@/pages/Entity/VfsFolder/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderEdit"]
+    }
+  },
+  {
+    name: "vfsFolderAdd",
+    path: "/vfs-folders/add",
+    component: () =>
+      import("@/pages/Entity/VfsFolder/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderAdd"]
+    }
+  },
 ];
diff --git a/generators/testdata/expected/vt-template/composition/src/pages/Entity/Category/Form.vue b/generators/testdata/expected/vt-template/composition/src/pages/Entity/Category/Form.vue
new file mode 100644
index 0000000..ab8d2d8
--- /dev/null
+++ b/generators/testdata/expected/vt-template/composition/src/pages/Entity/Category/Form.vue
@@ -0,0 +1,207 @@
+<template>
+  <vt-entity-view>
+    <v-layout
+      align-start
+      justify-center
+    >
+      <v-flex
+        xs12
+        md8
+        mb-2
+      >
+        <v-layout
+          mb-2
+          wrap
+        >
+          <v-flex>
+            <h2 class="ellipsed">
+              {{ model.title || "..." }}
+            </h2>
+          </v-flex>
+          <v-spacer />
+          <v-flex shrink>
+            <v-btn
+              text
+              color="primary"
+              :disabled="isLoading"
+              @click.stop="navigateBack"
+            >
+              <v-icon
+                :left="!$vuetify.breakpoint.xsOnly"
+              >
+                arrow_back
+              </v-icon>
+              <template v-if="!$vuetify.breakpoint.xsOnly">
+                {{ t("common.form.cancelButtonLabel") }}
+              </template>
+            </v-btn>
+            <v-hover
+              v-if="$route.params.id"
+              v-slot="{ hover }"
+            >
+              <v-btn
+                :color="hover ? 'error' : ''"
+                icon
+                @click.stop="onDelete('title')"
+              >
+                <v-icon>delete</v-icon>
+              </v-btn>
+            </v-hover>
+          </v-flex>
+        </v-layout>
+        <v-tabs
+          v-model="tab"
+          mobile-break-point="0"
+        >
+          <v-tab
+            :class="{
+              'error--text': tabsHasError.includes(0)
+            }"
+          >
+            Основные
+          </v-tab>
+        </v-tabs>
+        <v-card v-if="model">
+          <v-form
+            ref="form"
+            @submit.prevent="onSaveAndBack"
+          >
+            <v-card-text>
+              <v-tabs-items v-model="tab">
+                <v-tab-item eager>
+                  <!--  generated part -->
+                  <vt-form-field
+                    v-model="model.title"
+                    component="v-text-field"
+                    :label="t('category.form.titleLabel')"
+                    :error-messages="getErrorMessage(errors.title)"
+                    :disabled="isLoading"
+                    placeholder=""
+                    required
+                  /><vt-form-field
+                    v-model="model.orderNumber"
+                    component="v-text-field"
+                    :label="t('category.form.orderNumberLabel')"
+                    :error-messages="getErrorMessage(errors.orderNumber)"
+                    :disabled="isLoading"
+                    placeholder=""
+                    required
+                  /><vt-form-field
+                    v-model="model.statusId"
+                    component="vt-status-select"
+                    :label="t('category.form.statusIdLabel')"
+                    :error-messages="getErrorMessage(errors.statusId)"
+                    :disabled="isLoading"
+                    placeholder=""
+                    required
+                    compact
+                    :row="$vuetify.breakpoint.smAndUp"
+                  /><!--  end generated part -->
+                </v-tab-item>
+              </v-tabs-items>
+            </v-card-text>
+            <v-card-actions>
+              <v-layout wrap>
+                <v-flex
+                  v-if="$vuetify.breakpoint.smAndUp"
+                  xs3
+                />
+                <v-flex>
+                  <v-layout wrap>
+                    <v-btn
+                      type="submit"
+                      color="success"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
+                      :block="$vuetify.breakpoint.xsOnly"
+                      :class="!$vuetify.breakpoint.xsOnly && 'mx-2'"
+                    >
+                      <v-icon left>
+                        done
+                      </v-icon>
+                      {{ t("common.form.saveAndCloseButtonLabel") }}
+                    </v-btn>
+
+                    <v-btn
+                      v-if="$route.params.id"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
+                      :block="$vuetify.breakpoint.xsOnly"
+                      :class="[
+                        $vuetify.breakpoint.xsOnly && 'ml-0 mt-2',
+                        $vuetify.breakpoint.smAndUp && 'ml-2'
+                      ]"
+                      outlined
+                      color="accent"
+                      @click.stop="onSave"
+                    >
+                      {{ t("common.form.saveButtonLabel") }}
+                    </v-btn>
+                    <v-spacer />
+                  </v-layout>
+                </v-flex>
+              </v-layout>
+            </v-card-actions>
+          </v-form>
+        </v-card>
+      </v-flex>
+    </v-layout>
+  </vt-entity-view>
+</template>
+
+<script lang="ts">
+import { useEntityForm } from '@/composables/useEntityForm';
+import { useI18n } from '@/composables/useI18n'
+import { Category as Model } from '@/services/api/factory';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  // eslint-disable-next-line vue/match-component-file-name
+  name: 'CategoryForm',
+
+  setup () {
+    const { t } = useI18n();
+
+    const {
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    } = useEntityForm<Model>({ Model} );
+
+	const getErrorMessage = (errorKey: string | null): string => {
+      const errorMessage = i18nFieldError(errorKey);
+      return errorMessage ? t(errorMessage) : '';
+    };
+
+    return {
+      t,
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+      getErrorMessage,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    };
+  }
+});
+</script>
+
+<style scoped></style>
diff --git a/generators/testdata/expected/vt-template/composition/src/pages/Entity/Category/List.vue b/generators/testdata/expected/vt-template/composition/src/pages/Entity/Category/List.vue
new file mode 100644
index 0000000..261806a
--- /dev/null
+++ b/generators/testdata/expected/vt-template/composition/src/pages/Entity/Category/List.vue
@@ -0,0 +1,239 @@
+<template>
+  <vt-entity-view>
+    <v-layout
+      align-start
+      justify-center
+    >
+      <v-flex column>
+        <v-layout justify-center>
+          <v-flex
+            xs12
+            md8
+          >
+            <v-layout
+              align-center
+              mb-2
+              wrap
+            >
+              <v-flex>
+                <v-layout align-center>
+                  <h2 class="ellipsed mr-1">
+                    {{ t("category.list.title") }}
+                  </h2>
+                  <span
+                    v-if="pagination.totalItems"
+                    class="text--secondary subtitle-2"
+                  >
+                    {{ pagination.totalItems }}
+                  </span>
+                </v-layout>
+              </v-flex>
+              <v-spacer />
+              <v-flex shrink>
+                <v-btn
+                  small
+                  dark
+                  color="success"
+                  :to="{ name: 'categoryAdd' }"
+                >
+                  <v-icon>add</v-icon>
+                  {{ t("common.list.addNewLabel") }}
+                </v-btn>
+              </v-flex>
+            </v-layout>
+          </v-flex>
+        </v-layout>
+
+        <!-- Complex Table -->
+        <v-layout justify-center>
+          <v-flex shrink>
+            <v-card>
+              <!-- Quick filter, chips -->
+              <v-card-title class="pt-0">
+                <v-layout
+                  justify-space-between
+                  align-end
+                  wrap
+                  class="flex-sm-nowrap"
+                >
+                  <v-flex
+                    xs12
+                    sm4
+                    md3
+                    mr-sm-2
+                  >
+                    <v-text-field
+                      v-model="filters.title"
+                      :placeholder="
+                        t('category.list.filter.quickFilterPlaceholder')
+                      "
+                      hide-details
+                      @keyup.enter.native="submitFilters()"
+                    />
+                  </v-flex>
+                  <v-flex
+                    xs12
+                    ml-sm-10
+                    mr-sm-10
+                  >
+                    <multi-filters
+                      :filters="filters"
+                      :active-filters="activeFilters"
+                      @submitFilters="submitFilters"
+                      @update:filters="updateFilters"
+                    />
+                  </v-flex>
+                  <v-flex
+                    v-if="$vuetify.breakpoint.smAndUp"
+                    mt-sm-4
+                  >
+                    <vt-compact-pagination
+                      :value="pagination.page"
+                      :total-pages="pagination.totalPages"
+                      @input="setCompactPagination"
+                    />
+                  </v-flex>
+                </v-layout>
+              </v-card-title>
+
+              <!-- Table -->
+              <v-data-table
+                v-model="selected"
+                :headers="headers"
+                :items="list"
+                :options="vuetifyTableOptions"
+                :server-items-length="pagination.totalItems"
+                item-key="id"
+                :footer-props="{
+                  itemsPerPageOptions: [10, 25, 50, 100, 500]
+                }"
+                :class="[
+                  'data-table-wrapper-sticky-fix',
+                  {
+                    'min-width-table': $vuetify.breakpoint.mdAndUp,
+                    'min-width-table-full': $vuetify.breakpoint.smAndDown,
+                    smAndDown: $vuetify.breakpoint.smAndDown
+                  }
+                ]"
+                :show-select="false"
+                :loading="isLoading"
+                fixed-header
+                @update:options="setPagination"
+              >
+                <template #item.title="{ item }">
+                  <router-link
+                    :to="{ name: 'categoryEdit', params: { id: item.id } }"
+                    class="font-weight-medium"
+                  >
+                    {{ item.title }}
+                  </router-link>
+                </template>
+                <template #item.orderNumber="{ item }">
+                  {{ item.orderNumber }}
+                </template>
+                <template #item.status="{ item }">
+                  <span class="text-no-wrap">
+                    <vt-status-badge
+                      v-model="item.status"
+                      small
+                    />
+                  </span>
+                </template>
+                <template #item.id="{ item }">
+                  <span class="text-no-wrap">
+                    <v-hover v-slot="{ hover }">
+                      <v-btn
+                        text
+                        dark
+                        icon
+                        :color="hover ? 'red' : 'grey'"
+                        @click="deleteItem(item, 'title')"
+                      >
+                        <v-icon small>delete</v-icon>
+                      </v-btn>
+                    </v-hover>
+                  </span>
+                </template>
+              </v-data-table>
+            </v-card>
+          </v-flex>
+        </v-layout>
+      </v-flex>
+    </v-layout>
+  </vt-entity-view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { CategorySummary, CategorySearch } from '@/services/api/factory';
+import { useEntityList } from '@/composables/useEntityList';
+import { useI18n } from '@/composables/useI18n';
+
+import MultiFilters from './components/MultiListFilters.vue';
+
+export default defineComponent({
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'List',
+  components: { MultiFilters },
+
+  setup () {
+    const { t } = useI18n();
+
+    const {
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters
+    } = useEntityList(CategorySummary, CategorySearch);
+
+    const headers = computed(() => [
+      {
+        text: t('category.list.headers.title'),
+        value: 'title',
+        align: 'left'
+      },
+      {
+        text: t('category.list.headers.orderNumber'),
+        value: 'orderNumber'
+      },
+      {
+        text: t('category.list.headers.status'),
+        value: 'status',
+        sortable: false
+      },
+      {
+        text: t('category.list.headers.actions'),
+        value: 'id',
+        sortable: false
+      }
+    ]);
+
+    return {
+      t,
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters,
+      headers
+    };
+  }
+});
+</script>
+
+<style lang="scss"></style>
diff --git a/generators/testdata/expected/vt-template/composition/src/pages/Entity/Category/components/MultiListFilters.vue b/generators/testdata/expected/vt-template/composition/src/pages/Entity/Category/components/MultiListFilters.vue
new file mode 100644
index 0000000..a6fedaf
--- /dev/null
+++ b/generators/testdata/expected/vt-template/composition/src/pages/Entity/Category/components/MultiListFilters.vue
@@ -0,0 +1,97 @@
+<template>
+  <vt-new-multi-filter
+    :items="filterItems"
+    :filters="filters"
+    autofocus
+    :label="t('common.list.filter.title')"
+    @submitFilters="$emit('submitFilters')"
+    @update:filters="$emit('update:filters', $event)"
+  />
+</template>
+
+<script lang="ts">
+import { IFilterItem } from '@/common/MultiFilter/types';
+import { useI18n } from '@/composables/useI18n';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'MultiListFilters',
+
+  props: {
+    filters: {
+      type: Object,
+      required: true
+    },
+    activeFilters: {
+      type: Object,
+      required: true
+    }
+  },
+
+  emits: ['submitFilters', 'update:filters'],
+
+  setup () {
+    const { t } = useI18n();
+
+    const filterItems = [
+    {
+      id: 'title',
+      type: 'input',
+      title: t('category.list.filter.title'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        component: 'v-text-field'
+      }
+    },
+    {
+      id: 'orderNumber',
+      type: 'input',
+      title: t('category.list.filter.orderNumber'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        type: 'number',
+        component: 'v-text-field'
+      }
+    },
+    {
+      id: 'statusId',
+      type: 'select',
+      title: t('category.list.filter.statusId'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        itemText: 'text',
+        itemValue: 'value',
+        component: 'vt-status-select'
+      }
+    },
+    {
+      type: 'divider'
+    },
+    {
+      id: 'ids',
+      type: 'select',
+      title: t('category.list.filter.ids'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        itemText: 'text',
+        itemValue: 'value',
+        component: 'v-text-field'
+      }
+    }
+  ].filter(Boolean) as IFilterItem[];
+
+    return {
+      t,
+      filterItems
+    };
+  }
+});
+</script>
diff --git a/generators/testdata/expected/vt-template/composition/src/pages/Entity/Category/en.json b/generators/testdata/expected/vt-template/composition/src/pages/Entity/Category/en.json
new file mode 100644
index 0000000..33b0135
--- /dev/null
+++ b/generators/testdata/expected/vt-template/composition/src/pages/Entity/Category/en.json
@@ -0,0 +1,30 @@
+{
+    "breadcrumbs": {
+        "categoryAdd": "Add",
+        "categoryEdit": "Edit",
+        "categoryList": "Categories"
+    },
+    "category": {
+        "form": {
+            "orderNumberLabel": "Order Number",
+            "statusIdLabel": "Status",
+            "titleLabel": "Title"
+        },
+        "list": {
+            "title": "Categories",
+            "filter": {
+                "ids": "Ids",
+                "orderNumber": "Order Number",
+                "quickFilterPlaceholder": "",
+                "statusId": "Status",
+                "title": "Title"
+            },
+            "headers": {
+                "actions": "Actions",
+                "orderNumber": "Order Number",
+                "status": "Status",
+                "title": "Title"
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/generators/testdata/expected/vt-template/composition/src/pages/Entity/News/Form.vue b/generators/testdata/expected/vt-template/composition/src/pages/Entity/News/Form.vue
new file mode 100644
index 0000000..ff0c74e
--- /dev/null
+++ b/generators/testdata/expected/vt-template/composition/src/pages/Entity/News/Form.vue
@@ -0,0 +1,282 @@
+<template>
+  <vt-entity-view>
+    <v-layout
+      align-start
+      justify-center
+    >
+      <v-flex
+        xs12
+        md8
+        mb-2
+      >
+        <v-layout
+          mb-2
+          wrap
+        >
+          <v-flex>
+            <h2 class="ellipsed">
+              {{ model.title || "..." }}
+            </h2>
+          </v-flex>
+          <v-spacer />
+          <v-flex shrink>
+            <v-btn
+              text
+              color="primary"
+              :disabled="isLoading"
+              @click.stop="navigateBack"
+            >
+              <v-icon
+                :left="!$vuetify.breakpoint.xsOnly"
+              >
+                arrow_back
+              </v-icon>
+              <template v-if="!$vuetify.breakpoint.xsOnly">
+                {{ t("common.form.cancelButtonLabel") }}
+              </template>
+            </v-btn>
+            <v-hover
+              v-if="$route.params.id"
+              v-slot="{ hover }"
+            >
+              <v-btn
+                :color="hover ? 'error' : ''"
+                icon
+                @click.stop="onDelete('title')"
+              >
+                <v-icon>delete</v-icon>
+              </v-btn>
+            </v-hover>
+          </v-flex>
+        </v-layout>
+        <v-tabs
+          v-model="tab"
+          mobile-break-point="0"
+        >
+          <v-tab
+            :class="{
+              'error--text': tabsHasError.includes(0)
+            }"
+          >
+            Основные
+          </v-tab>
+        </v-tabs>
+        <v-card v-if="model">
+          <v-form
+            ref="form"
+            @submit.prevent="onSaveAndBack"
+          >
+            <v-card-text>
+              <v-tabs-items v-model="tab">
+                <v-tab-item eager>
+                  <!--  generated part -->
+                  <vt-form-field
+                    v-model="model.title"
+                    component="v-text-field"
+                    :label="t('news.form.titleLabel')"
+                    :error-messages="getErrorMessage(errors.title)"
+                    :disabled="isLoading"
+                    placeholder=""
+                    required
+                  /><vt-form-field
+                    v-model="model.preview"
+                    component="v-text-field"
+                    :label="t('news.form.previewLabel')"
+                    :error-messages="getErrorMessage(errors.preview)"
+                    :disabled="isLoading"
+                    placeholder=""
+                    clearable
+                  /><vt-form-field
+                    v-model="model.content"
+                    component="vt-tinymce-editor"
+                    :label="t('news.form.contentLabel')"
+                    :error-messages="getErrorMessage(errors.content)"
+                    :disabled="isLoading"
+                    placeholder=""
+                    clearable
+                    without-help
+                  /><vt-form-field
+                    v-model="model.categoryId"
+                    entity="category"
+                    search-by="title"
+                    prefetch
+                    component="vt-entity-autocomplete"
+                    :label="t('news.form.categoryIdLabel')"
+                    :error-messages="getErrorMessage(errors.categoryId)"
+                    :disabled="isLoading"
+                    placeholder=""
+                    required
+                  /><vt-form-field
+                    v-model="model.countryId"
+                    entity="country"
+                    search-by="title"
+                    prefetch
+                    component="vt-entity-autocomplete"
+                    :label="t('news.form.countryIdLabel')"
+                    :error-messages="getErrorMessage(errors.countryId)"
+                    :disabled="isLoading"
+                    placeholder=""
+                    clearable
+                  /><vt-form-field
+                    v-model="model.regionId"
+                    entity="region"
+                    search-by="title"
+                    prefetch
+                    component="vt-entity-autocomplete"
+                    :label="t('news.form.regionIdLabel')"
+                    :error-messages="getErrorMessage(errors.regionId)"
+                    :disabled="isLoading"
+                    placeholder=""
+                    clearable
+                  /><vt-form-field
+                    v-model="model.cityId"
+                    entity="city"
+                    search-by="title"
+                    prefetch
+                    component="vt-entity-autocomplete"
+                    :label="t('news.form.cityIdLabel')"
+                    :error-messages="getErrorMessage(errors.cityId)"
+                    :disabled="isLoading"
+                    placeholder=""
+                    clearable
+                  /><vt-form-field
+                    v-model="model.tagIds"
+                    entity="tag"
+                    search-by="title"
+                    prefetch
+                    component="vt-entity-autocomplete"
+                    :label="t('news.form.tagIdsLabel')"
+                    :error-messages="getErrorMessage(errors.tagIds)"
+                    :disabled="isLoading"
+                    placeholder=""
+                    clearable
+                    multiple
+                    chips
+                  /><vt-form-field
+                    v-model="model.publishedAt"
+                    component="vt-datetime-picker"
+                    :label="t('news.form.publishedAtLabel')"
+                    :error-messages="getErrorMessage(errors.publishedAt)"
+                    :disabled="isLoading"
+                    placeholder=""
+                    clearable
+                    iso
+                  /><vt-form-field
+                    v-model="model.statusId"
+                    component="vt-status-select"
+                    :label="t('news.form.statusIdLabel')"
+                    :error-messages="getErrorMessage(errors.statusId)"
+                    :disabled="isLoading"
+                    placeholder=""
+                    required
+                    compact
+                    :row="$vuetify.breakpoint.smAndUp"
+                  /><!--  end generated part -->
+                </v-tab-item>
+              </v-tabs-items>
+            </v-card-text>
+            <v-card-actions>
+              <v-layout wrap>
+                <v-flex
+                  v-if="$vuetify.breakpoint.smAndUp"
+                  xs3
+                />
+                <v-flex>
+                  <v-layout wrap>
+                    <v-btn
+                      type="submit"
+                      color="success"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
+                      :block="$vuetify.breakpoint.xsOnly"
+                      :class="!$vuetify.breakpoint.xsOnly && 'mx-2'"
+                    >
+                      <v-icon left>
+                        done
+                      </v-icon>
+                      {{ t("common.form.saveAndCloseButtonLabel") }}
+                    </v-btn>
+
+                    <v-btn
+                      v-if="$route.params.id"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
+                      :block="$vuetify.breakpoint.xsOnly"
+                      :class="[
+                        $vuetify.breakpoint.xsOnly && 'ml-0 mt-2',
+                        $vuetify.breakpoint.smAndUp && 'ml-2'
+                      ]"
+                      outlined
+                      color="accent"
+                      @click.stop="onSave"
+                    >
+                      {{ t("common.form.saveButtonLabel") }}
+                    </v-btn>
+                    <v-spacer />
+                  </v-layout>
+                </v-flex>
+              </v-layout>
+            </v-card-actions>
+          </v-form>
+        </v-card>
+      </v-flex>
+    </v-layout>
+  </vt-entity-view>
+</template>
+
+<script lang="ts">
+import { useEntityForm } from '@/composables/useEntityForm';
+import { useI18n } from '@/composables/useI18n'
+import { News as Model } from '@/services/api/factory';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  // eslint-disable-next-line vue/match-component-file-name
+  name: 'NewsForm',
+
+  setup () {
+    const { t } = useI18n();
+
+    const {
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    } = useEntityForm<Model>({ Model} );
+
+	const getErrorMessage = (errorKey: string | null): string => {
+      const errorMessage = i18nFieldError(errorKey);
+      return errorMessage ? t(errorMessage) : '';
+    };
+
+    return {
+      t,
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+      getErrorMessage,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    };
+  }
+});
+</script>
+
+<style scoped></style>
diff --git a/generators/testdata/expected/vt-template/composition/src/pages/Entity/News/List.vue b/generators/testdata/expected/vt-template/composition/src/pages/Entity/News/List.vue
new file mode 100644
index 0000000..c9dc873
--- /dev/null
+++ b/generators/testdata/expected/vt-template/composition/src/pages/Entity/News/List.vue
@@ -0,0 +1,270 @@
+<template>
+  <vt-entity-view>
+    <v-layout
+      align-start
+      justify-center
+    >
+      <v-flex column>
+        <v-layout justify-center>
+          <v-flex
+            xs12
+            md8
+          >
+            <v-layout
+              align-center
+              mb-2
+              wrap
+            >
+              <v-flex>
+                <v-layout align-center>
+                  <h2 class="ellipsed mr-1">
+                    {{ t("news.list.title") }}
+                  </h2>
+                  <span
+                    v-if="pagination.totalItems"
+                    class="text--secondary subtitle-2"
+                  >
+                    {{ pagination.totalItems }}
+                  </span>
+                </v-layout>
+              </v-flex>
+              <v-spacer />
+              <v-flex shrink>
+                <v-btn
+                  small
+                  dark
+                  color="success"
+                  :to="{ name: 'newsAdd' }"
+                >
+                  <v-icon>add</v-icon>
+                  {{ t("common.list.addNewLabel") }}
+                </v-btn>
+              </v-flex>
+            </v-layout>
+          </v-flex>
+        </v-layout>
+
+        <!-- Complex Table -->
+        <v-layout justify-center>
+          <v-flex shrink>
+            <v-card>
+              <!-- Quick filter, chips -->
+              <v-card-title class="pt-0">
+                <v-layout
+                  justify-space-between
+                  align-end
+                  wrap
+                  class="flex-sm-nowrap"
+                >
+                  <v-flex
+                    xs12
+                    sm4
+                    md3
+                    mr-sm-2
+                  >
+                    <v-text-field
+                      v-model="filters.title"
+                      :placeholder="
+                        t('news.list.filter.quickFilterPlaceholder')
+                      "
+                      hide-details
+                      @keyup.enter.native="submitFilters()"
+                    />
+                  </v-flex>
+                  <v-flex
+                    xs12
+                    ml-sm-10
+                    mr-sm-10
+                  >
+                    <multi-filters
+                      :filters="filters"
+                      :active-filters="activeFilters"
+                      @submitFilters="submitFilters"
+                      @update:filters="updateFilters"
+                    />
+                  </v-flex>
+                  <v-flex
+                    v-if="$vuetify.breakpoint.smAndUp"
+                    mt-sm-4
+                  >
+                    <vt-compact-pagination
+                      :value="pagination.page"
+                      :total-pages="pagination.totalPages"
+                      @input="setCompactPagination"
+                    />
+                  </v-flex>
+                </v-layout>
+              </v-card-title>
+
+              <!-- Table -->
+              <v-data-table
+                v-model="selected"
+                :headers="headers"
+                :items="list"
+                :options="vuetifyTableOptions"
+                :server-items-length="pagination.totalItems"
+                item-key="id"
+                :footer-props="{
+                  itemsPerPageOptions: [10, 25, 50, 100, 500]
+                }"
+                :class="[
+                  'data-table-wrapper-sticky-fix',
+                  {
+                    'min-width-table': $vuetify.breakpoint.mdAndUp,
+                    'min-width-table-full': $vuetify.breakpoint.smAndDown,
+                    smAndDown: $vuetify.breakpoint.smAndDown
+                  }
+                ]"
+                :show-select="false"
+                :loading="isLoading"
+                fixed-header
+                @update:options="setPagination"
+              >
+                <template #item.title="{ item }">
+                  <router-link
+                    :to="{ name: 'newsEdit', params: { id: item.id } }"
+                    class="font-weight-medium"
+                  >
+                    {{ item.title }}
+                  </router-link>
+                </template>
+                <template #item.preview="{ item }">
+                  {{ item.preview }}
+                </template>
+                <template #item.content="{ item }">
+                  {{ item.content }}
+                </template>
+                <template #item.category="{ item }">
+                  {{ item.category | getField("title") }}
+                </template>
+                <template #item.country="{ item }">
+                  {{ item.country | getField("title") }}
+                </template>
+                <template #item.region="{ item }">
+                  {{ item.region | getField("title") }}
+                </template>
+                <template #item.status="{ item }">
+                  <span class="text-no-wrap">
+                    <vt-status-badge
+                      v-model="item.status"
+                      small
+                    />
+                  </span>
+                </template>
+                <template #item.id="{ item }">
+                  <span class="text-no-wrap">
+                    <v-hover v-slot="{ hover }">
+                      <v-btn
+                        text
+                        dark
+                        icon
+                        :color="hover ? 'red' : 'grey'"
+                        @click="deleteItem(item, 'title')"
+                      >
+                        <v-icon small>delete</v-icon>
+                      </v-btn>
+                    </v-hover>
+                  </span>
+                </template>
+              </v-data-table>
+            </v-card>
+          </v-flex>
+        </v-layout>
+      </v-flex>
+    </v-layout>
+  </vt-entity-view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { NewsSummary, NewsSearch } from '@/services/api/factory';
+import { useEntityList } from '@/composables/useEntityList';
+import { useI18n } from '@/composables/useI18n';
+
+import MultiFilters from './components/MultiListFilters.vue';
+
+export default defineComponent({
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'List',
+  components: { MultiFilters },
+
+  setup () {
+    const { t } = useI18n();
+
+    const {
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters
+    } = useEntityList(NewsSummary, NewsSearch);
+
+    const headers = computed(() => [
+      {
+        text: t('news.list.headers.title'),
+        value: 'title',
+        align: 'left'
+      },
+      {
+        text: t('news.list.headers.preview'),
+        value: 'preview'
+      },
+      {
+        text: t('news.list.headers.content'),
+        value: 'content'
+      },
+      {
+        text: t('news.list.headers.category'),
+        value: 'category',
+        sortable: false
+      },
+      {
+        text: t('news.list.headers.country'),
+        value: 'country',
+        sortable: false
+      },
+      {
+        text: t('news.list.headers.region'),
+        value: 'region',
+        sortable: false
+      },
+      {
+        text: t('news.list.headers.status'),
+        value: 'status',
+        sortable: false
+      },
+      {
+        text: t('news.list.headers.actions'),
+        value: 'id',
+        sortable: false
+      }
+    ]);
+
+    return {
+      t,
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters,
+      headers
+    };
+  }
+});
+</script>
+
+<style lang="scss"></style>
diff --git a/generators/testdata/expected/vt-template/composition/src/pages/Entity/News/components/MultiListFilters.vue b/generators/testdata/expected/vt-template/composition/src/pages/Entity/News/components/MultiListFilters.vue
new file mode 100644
index 0000000..7f1ec20
--- /dev/null
+++ b/generators/testdata/expected/vt-template/composition/src/pages/Entity/News/components/MultiListFilters.vue
@@ -0,0 +1,187 @@
+<template>
+  <vt-new-multi-filter
+    :items="filterItems"
+    :filters="filters"
+    autofocus
+    :label="t('common.list.filter.title')"
+    @submitFilters="$emit('submitFilters')"
+    @update:filters="$emit('update:filters', $event)"
+  />
+</template>
+
+<script lang="ts">
+import { IFilterItem } from '@/common/MultiFilter/types';
+import { useI18n } from '@/composables/useI18n';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'MultiListFilters',
+
+  props: {
+    filters: {
+      type: Object,
+      required: true
+    },
+    activeFilters: {
+      type: Object,
+      required: true
+    }
+  },
+
+  emits: ['submitFilters', 'update:filters'],
+
+  setup () {
+    const { t } = useI18n();
+
+    const filterItems = [
+    {
+      id: 'title',
+      type: 'input',
+      title: t('news.list.filter.title'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        component: 'v-text-field'
+      }
+    },
+    {
+      id: 'preview',
+      type: 'input',
+      title: t('news.list.filter.preview'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        component: 'v-text-field'
+      }
+    },
+    {
+      id: 'content',
+      type: 'input',
+      title: t('news.list.filter.content'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        component: 'v-text-field'
+      }
+    },
+    {
+      id: 'categoryId',
+      type: 'select',
+      title: t('news.list.filter.categoryId'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        entity: 'category',
+        searchBy: 'title',
+        async: true,
+        component: 'vt-entity-autocomplete'
+      }
+    },
+    {
+      id: 'countryId',
+      type: 'select',
+      title: t('news.list.filter.countryId'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        entity: 'country',
+        searchBy: 'title',
+        async: true,
+        component: 'vt-entity-autocomplete'
+      }
+    },
+    {
+      id: 'regionId',
+      type: 'select',
+      title: t('news.list.filter.regionId'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        entity: 'region',
+        searchBy: 'title',
+        async: true,
+        component: 'vt-entity-autocomplete'
+      }
+    },
+    {
+      id: 'cityId',
+      type: 'select',
+      title: t('news.list.filter.cityId'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        entity: 'city',
+        searchBy: 'title',
+        async: true,
+        component: 'vt-entity-autocomplete'
+      }
+    },
+    {
+      id: 'createdAt',
+      type: 'datetime',
+      title: t('news.list.filter.createdAt'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        iso: true,
+        component: 'vt-datetime-picker'
+      }
+    },
+    {
+      id: 'publishedAt',
+      type: 'datetime',
+      title: t('news.list.filter.publishedAt'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        iso: true,
+        component: 'vt-datetime-picker'
+      }
+    },
+    {
+      id: 'statusId',
+      type: 'select',
+      title: t('news.list.filter.statusId'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        itemText: 'text',
+        itemValue: 'value',
+        component: 'vt-status-select'
+      }
+    },
+    {
+      type: 'divider'
+    },
+    {
+      id: 'ids',
+      type: 'select',
+      title: t('news.list.filter.ids'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        itemText: 'text',
+        itemValue: 'value',
+        component: 'v-text-field'
+      }
+    }
+  ].filter(Boolean) as IFilterItem[];
+
+    return {
+      t,
+      filterItems
+    };
+  }
+});
+</script>
diff --git a/generators/testdata/expected/vt-template/composition/src/pages/Entity/News/en.json b/generators/testdata/expected/vt-template/composition/src/pages/Entity/News/en.json
new file mode 100644
index 0000000..3ee7e56
--- /dev/null
+++ b/generators/testdata/expected/vt-template/composition/src/pages/Entity/News/en.json
@@ -0,0 +1,48 @@
+{
+    "breadcrumbs": {
+        "newsAdd": "Add",
+        "newsEdit": "Edit",
+        "newsList": "News"
+    },
+    "news": {
+        "form": {
+            "categoryIdLabel": "Category",
+            "cityIdLabel": "City",
+            "contentLabel": "Content",
+            "countryIdLabel": "Country",
+            "previewLabel": "Preview",
+            "publishedAtLabel": "Published At",
+            "regionIdLabel": "Region",
+            "statusIdLabel": "Status",
+            "tagIdsLabel": "Tags",
+            "titleLabel": "Title"
+        },
+        "list": {
+            "title": "News",
+            "filter": {
+                "categoryId": "Category",
+                "cityId": "City",
+                "content": "Content",
+                "countryId": "Country",
+                "createdAt": "Created at",
+                "ids": "Ids",
+                "preview": "Preview",
+                "publishedAt": "Published At",
+                "quickFilterPlaceholder": "",
+                "regionId": "Region",
+                "statusId": "Status",
+                "title": "Title"
+            },
+            "headers": {
+                "actions": "Actions",
+                "category": "Category",
+                "content": "Content",
+                "country": "Country",
+                "preview": "Preview",
+                "region": "Region",
+                "status": "Status",
+                "title": "Title"
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/generators/testdata/expected/vt-template/composition/src/pages/Entity/Tag/Form.vue b/generators/testdata/expected/vt-template/composition/src/pages/Entity/Tag/Form.vue
new file mode 100644
index 0000000..6630576
--- /dev/null
+++ b/generators/testdata/expected/vt-template/composition/src/pages/Entity/Tag/Form.vue
@@ -0,0 +1,199 @@
+<template>
+  <vt-entity-view>
+    <v-layout
+      align-start
+      justify-center
+    >
+      <v-flex
+        xs12
+        md8
+        mb-2
+      >
+        <v-layout
+          mb-2
+          wrap
+        >
+          <v-flex>
+            <h2 class="ellipsed">
+              {{ model.title || "..." }}
+            </h2>
+          </v-flex>
+          <v-spacer />
+          <v-flex shrink>
+            <v-btn
+              text
+              color="primary"
+              :disabled="isLoading"
+              @click.stop="navigateBack"
+            >
+              <v-icon
+                :left="!$vuetify.breakpoint.xsOnly"
+              >
+                arrow_back
+              </v-icon>
+              <template v-if="!$vuetify.breakpoint.xsOnly">
+                {{ t("common.form.cancelButtonLabel") }}
+              </template>
+            </v-btn>
+            <v-hover
+              v-if="$route.params.id"
+              v-slot="{ hover }"
+            >
+              <v-btn
+                :color="hover ? 'error' : ''"
+                icon
+                @click.stop="onDelete('title')"
+              >
+                <v-icon>delete</v-icon>
+              </v-btn>
+            </v-hover>
+          </v-flex>
+        </v-layout>
+        <v-tabs
+          v-model="tab"
+          mobile-break-point="0"
+        >
+          <v-tab
+            :class="{
+              'error--text': tabsHasError.includes(0)
+            }"
+          >
+            Основные
+          </v-tab>
+        </v-tabs>
+        <v-card v-if="model">
+          <v-form
+            ref="form"
+            @submit.prevent="onSaveAndBack"
+          >
+            <v-card-text>
+              <v-tabs-items v-model="tab">
+                <v-tab-item eager>
+                  <!--  generated part -->
+                  <vt-form-field
+                    v-model="model.title"
+                    component="v-text-field"
+                    :label="t('tag.form.titleLabel')"
+                    :error-messages="getErrorMessage(errors.title)"
+                    :disabled="isLoading"
+                    placeholder=""
+                    required
+                  /><vt-form-field
+                    v-model="model.statusId"
+                    component="vt-status-select"
+                    :label="t('tag.form.statusIdLabel')"
+                    :error-messages="getErrorMessage(errors.statusId)"
+                    :disabled="isLoading"
+                    placeholder=""
+                    required
+                    compact
+                    :row="$vuetify.breakpoint.smAndUp"
+                  /><!--  end generated part -->
+                </v-tab-item>
+              </v-tabs-items>
+            </v-card-text>
+            <v-card-actions>
+              <v-layout wrap>
+                <v-flex
+                  v-if="$vuetify.breakpoint.smAndUp"
+                  xs3
+                />
+                <v-flex>
+                  <v-layout wrap>
+                    <v-btn
+                      type="submit"
+                      color="success"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
+                      :block="$vuetify.breakpoint.xsOnly"
+                      :class="!$vuetify.breakpoint.xsOnly && 'mx-2'"
+                    >
+                      <v-icon left>
+                        done
+                      </v-icon>
+                      {{ t("common.form.saveAndCloseButtonLabel") }}
+                    </v-btn>
+
+                    <v-btn
+                      v-if="$route.params.id"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
+                      :block="$vuetify.breakpoint.xsOnly"
+                      :class="[
+                        $vuetify.breakpoint.xsOnly && 'ml-0 mt-2',
+                        $vuetify.breakpoint.smAndUp && 'ml-2'
+                      ]"
+                      outlined
+                      color="accent"
+                      @click.stop="onSave"
+                    >
+                      {{ t("common.form.saveButtonLabel") }}
+                    </v-btn>
+                    <v-spacer />
+                  </v-layout>
+                </v-flex>
+              </v-layout>
+            </v-card-actions>
+          </v-form>
+        </v-card>
+      </v-flex>
+    </v-layout>
+  </vt-entity-view>
+</template>
+
+<script lang="ts">
+import { useEntityForm } from '@/composables/useEntityForm';
+import { useI18n } from '@/composables/useI18n'
+import { Tag as Model } from '@/services/api/factory';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  // eslint-disable-next-line vue/match-component-file-name
+  name: 'TagForm',
+
+  setup () {
+    const { t } = useI18n();
+
+    const {
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    } = useEntityForm<Model>({ Model} );
+
+	const getErrorMessage = (errorKey: string | null): string => {
+      const errorMessage = i18nFieldError(errorKey);
+      return errorMessage ? t(errorMessage) : '';
+    };
+
+    return {
+      t,
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+      getErrorMessage,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    };
+  }
+});
+</script>
+
+<style scoped></style>
diff --git a/generators/testdata/expected/vt-template/composition/src/pages/Entity/Tag/List.vue b/generators/testdata/expected/vt-template/composition/src/pages/Entity/Tag/List.vue
new file mode 100644
index 0000000..71dec4b
--- /dev/null
+++ b/generators/testdata/expected/vt-template/composition/src/pages/Entity/Tag/List.vue
@@ -0,0 +1,232 @@
+<template>
+  <vt-entity-view>
+    <v-layout
+      align-start
+      justify-center
+    >
+      <v-flex column>
+        <v-layout justify-center>
+          <v-flex
+            xs12
+            md8
+          >
+            <v-layout
+              align-center
+              mb-2
+              wrap
+            >
+              <v-flex>
+                <v-layout align-center>
+                  <h2 class="ellipsed mr-1">
+                    {{ t("tag.list.title") }}
+                  </h2>
+                  <span
+                    v-if="pagination.totalItems"
+                    class="text--secondary subtitle-2"
+                  >
+                    {{ pagination.totalItems }}
+                  </span>
+                </v-layout>
+              </v-flex>
+              <v-spacer />
+              <v-flex shrink>
+                <v-btn
+                  small
+                  dark
+                  color="success"
+                  :to="{ name: 'tagAdd' }"
+                >
+                  <v-icon>add</v-icon>
+                  {{ t("common.list.addNewLabel") }}
+                </v-btn>
+              </v-flex>
+            </v-layout>
+          </v-flex>
+        </v-layout>
+
+        <!-- Complex Table -->
+        <v-layout justify-center>
+          <v-flex shrink>
+            <v-card>
+              <!-- Quick filter, chips -->
+              <v-card-title class="pt-0">
+                <v-layout
+                  justify-space-between
+                  align-end
+                  wrap
+                  class="flex-sm-nowrap"
+                >
+                  <v-flex
+                    xs12
+                    sm4
+                    md3
+                    mr-sm-2
+                  >
+                    <v-text-field
+                      v-model="filters.title"
+                      :placeholder="
+                        t('tag.list.filter.quickFilterPlaceholder')
+                      "
+                      hide-details
+                      @keyup.enter.native="submitFilters()"
+                    />
+                  </v-flex>
+                  <v-flex
+                    xs12
+                    ml-sm-10
+                    mr-sm-10
+                  >
+                    <multi-filters
+                      :filters="filters"
+                      :active-filters="activeFilters"
+                      @submitFilters="submitFilters"
+                      @update:filters="updateFilters"
+                    />
+                  </v-flex>
+                  <v-flex
+                    v-if="$vuetify.breakpoint.smAndUp"
+                    mt-sm-4
+                  >
+                    <vt-compact-pagination
+                      :value="pagination.page"
+                      :total-pages="pagination.totalPages"
+                      @input="setCompactPagination"
+                    />
+                  </v-flex>
+                </v-layout>
+              </v-card-title>
+
+              <!-- Table -->
+              <v-data-table
+                v-model="selected"
+                :headers="headers"
+                :items="list"
+                :options="vuetifyTableOptions"
+                :server-items-length="pagination.totalItems"
+                item-key="id"
+                :footer-props="{
+                  itemsPerPageOptions: [10, 25, 50, 100, 500]
+                }"
+                :class="[
+                  'data-table-wrapper-sticky-fix',
+                  {
+                    'min-width-table': $vuetify.breakpoint.mdAndUp,
+                    'min-width-table-full': $vuetify.breakpoint.smAndDown,
+                    smAndDown: $vuetify.breakpoint.smAndDown
+                  }
+                ]"
+                :show-select="false"
+                :loading="isLoading"
+                fixed-header
+                @update:options="setPagination"
+              >
+                <template #item.title="{ item }">
+                  <router-link
+                    :to="{ name: 'tagEdit', params: { id: item.id } }"
+                    class="font-weight-medium"
+                  >
+                    {{ item.title }}
+                  </router-link>
+                </template>
+                <template #item.status="{ item }">
+                  <span class="text-no-wrap">
+                    <vt-status-badge
+                      v-model="item.status"
+                      small
+                    />
+                  </span>
+                </template>
+                <template #item.id="{ item }">
+                  <span class="text-no-wrap">
+                    <v-hover v-slot="{ hover }">
+                      <v-btn
+                        text
+                        dark
+                        icon
+                        :color="hover ? 'red' : 'grey'"
+                        @click="deleteItem(item, 'title')"
+                      >
+                        <v-icon small>delete</v-icon>
+                      </v-btn>
+                    </v-hover>
+                  </span>
+                </template>
+              </v-data-table>
+            </v-card>
+          </v-flex>
+        </v-layout>
+      </v-flex>
+    </v-layout>
+  </vt-entity-view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { TagSummary, TagSearch } from '@/services/api/factory';
+import { useEntityList } from '@/composables/useEntityList';
+import { useI18n } from '@/composables/useI18n';
+
+import MultiFilters from './components/MultiListFilters.vue';
+
+export default defineComponent({
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'List',
+  components: { MultiFilters },
+
+  setup () {
+    const { t } = useI18n();
+
+    const {
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters
+    } = useEntityList(TagSummary, TagSearch);
+
+    const headers = computed(() => [
+      {
+        text: t('tag.list.headers.title'),
+        value: 'title',
+        align: 'left'
+      },
+      {
+        text: t('tag.list.headers.status'),
+        value: 'status',
+        sortable: false
+      },
+      {
+        text: t('tag.list.headers.actions'),
+        value: 'id',
+        sortable: false
+      }
+    ]);
+
+    return {
+      t,
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters,
+      headers
+    };
+  }
+});
+</script>
+
+<style lang="scss"></style>
diff --git a/generators/testdata/expected/vt-template/composition/src/pages/Entity/Tag/components/MultiListFilters.vue b/generators/testdata/expected/vt-template/composition/src/pages/Entity/Tag/components/MultiListFilters.vue
new file mode 100644
index 0000000..523e594
--- /dev/null
+++ b/generators/testdata/expected/vt-template/composition/src/pages/Entity/Tag/components/MultiListFilters.vue
@@ -0,0 +1,85 @@
+<template>
+  <vt-new-multi-filter
+    :items="filterItems"
+    :filters="filters"
+    autofocus
+    :label="t('common.list.filter.title')"
+    @submitFilters="$emit('submitFilters')"
+    @update:filters="$emit('update:filters', $event)"
+  />
+</template>
+
+<script lang="ts">
+import { IFilterItem } from '@/common/MultiFilter/types';
+import { useI18n } from '@/composables/useI18n';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'MultiListFilters',
+
+  props: {
+    filters: {
+      type: Object,
+      required: true
+    },
+    activeFilters: {
+      type: Object,
+      required: true
+    }
+  },
+
+  emits: ['submitFilters', 'update:filters'],
+
+  setup () {
+    const { t } = useI18n();
+
+    const filterItems = [
+    {
+      id: 'title',
+      type: 'input',
+      title: t('tag.list.filter.title'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        component: 'v-text-field'
+      }
+    },
+    {
+      id: 'statusId',
+      type: 'select',
+      title: t('tag.list.filter.statusId'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        itemText: 'text',
+        itemValue: 'value',
+        component: 'vt-status-select'
+      }
+    },
+    {
+      type: 'divider'
+    },
+    {
+      id: 'ids',
+      type: 'select',
+      title: t('tag.list.filter.ids'),
+      value: null,
+      values: null,
+      settings: {
+        placeholder: '',
+        itemText: 'text',
+        itemValue: 'value',
+        component: 'v-text-field'
+      }
+    }
+  ].filter(Boolean) as IFilterItem[];
+
+    return {
+      t,
+      filterItems
+    };
+  }
+});
+</script>
diff --git a/generators/testdata/expected/vt-template/composition/src/pages/Entity/Tag/en.json b/generators/testdata/expected/vt-template/composition/src/pages/Entity/Tag/en.json
new file mode 100644
index 0000000..d408aad
--- /dev/null
+++ b/generators/testdata/expected/vt-template/composition/src/pages/Entity/Tag/en.json
@@ -0,0 +1,27 @@
+{
+    "breadcrumbs": {
+        "tagAdd": "Add",
+        "tagEdit": "Edit",
+        "tagList": "Tags"
+    },
+    "tag": {
+        "form": {
+            "statusIdLabel": "Status",
+            "titleLabel": "Title"
+        },
+        "list": {
+            "title": "Tags",
+            "filter": {
+                "ids": "Ids",
+                "quickFilterPlaceholder": "",
+                "statusId": "Status",
+                "title": "Title"
+            },
+            "headers": {
+                "actions": "Actions",
+                "status": "Status",
+                "title": "Title"
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/generators/testdata/expected/vt-template/composition/src/pages/Entity/routes.ts b/generators/testdata/expected/vt-template/composition/src/pages/Entity/routes.ts
new file mode 100644
index 0000000..198b28f
--- /dev/null
+++ b/generators/testdata/expected/vt-template/composition/src/pages/Entity/routes.ts
@@ -0,0 +1,344 @@
+/* eslint-disable */
+export default [
+    /* Category */
+    {
+        name: "categoryList",
+        path: "/categories",
+        component: () =>
+            import("@/pages/Entity/Category/List.vue"),
+        meta: {
+            title: "CategoryList",
+            breadcrumbs: ["dashboard", "categoryList"]
+        }
+    },
+    {
+        name: "categoryEdit",
+        path: "/categories/:id/edit",
+        component: () =>
+            import("@/pages/Entity/Category/Form.vue"),
+        meta: {
+            title: "CategoryEdit",
+            breadcrumbs: ["dashboard", "categoryList", "categoryEdit"]
+        }
+    },
+    {
+        name: "categoryAdd",
+        path: "/categories/add",
+        component: () =>
+            import("@/pages/Entity/Category/Form.vue"),
+        meta: {
+            title: "CategoryAdd",
+            breadcrumbs: ["dashboard", "categoryList", "categoryAdd"]
+        }
+    },
+    /* News */
+    {
+        name: "newsList",
+        path: "/news",
+        component: () =>
+            import("@/pages/Entity/News/List.vue"),
+        meta: {
+            title: "NewsList",
+            breadcrumbs: ["dashboard", "newsList"]
+        }
+    },
+    {
+        name: "newsEdit",
+        path: "/news/:id/edit",
+        component: () =>
+            import("@/pages/Entity/News/Form.vue"),
+        meta: {
+            title: "NewsEdit",
+            breadcrumbs: ["dashboard", "newsList", "newsEdit"]
+        }
+    },
+    {
+        name: "newsAdd",
+        path: "/news/add",
+        component: () =>
+            import("@/pages/Entity/News/Form.vue"),
+        meta: {
+            title: "NewsAdd",
+            breadcrumbs: ["dashboard", "newsList", "newsAdd"]
+        }
+    },
+    /* Tag */
+    {
+        name: "tagList",
+        path: "/tags",
+        component: () =>
+            import("@/pages/Entity/Tag/List.vue"),
+        meta: {
+            title: "TagList",
+            breadcrumbs: ["dashboard", "tagList"]
+        }
+    },
+    {
+        name: "tagEdit",
+        path: "/tags/:id/edit",
+        component: () =>
+            import("@/pages/Entity/Tag/Form.vue"),
+        meta: {
+            title: "TagEdit",
+            breadcrumbs: ["dashboard", "tagList", "tagEdit"]
+        }
+    },
+    {
+        name: "tagAdd",
+        path: "/tags/add",
+        component: () =>
+            import("@/pages/Entity/Tag/Form.vue"),
+        meta: {
+            title: "TagAdd",
+            breadcrumbs: ["dashboard", "tagList", "tagAdd"]
+        }
+    },
+    /* City */
+    {
+        name: "cityList",
+        path: "/cities",
+        component: () =>
+            import("@/pages/Entity/City/List.vue"),
+        meta: {
+            title: "CityList",
+            breadcrumbs: ["dashboard", "cityList"]
+        }
+    },
+    {
+        name: "cityEdit",
+        path: "/cities/:id/edit",
+        component: () =>
+            import("@/pages/Entity/City/Form.vue"),
+        meta: {
+            title: "CityEdit",
+            breadcrumbs: ["dashboard", "cityList", "cityEdit"]
+        }
+    },
+    {
+        name: "cityAdd",
+        path: "/cities/add",
+        component: () =>
+            import("@/pages/Entity/City/Form.vue"),
+        meta: {
+            title: "CityAdd",
+            breadcrumbs: ["dashboard", "cityList", "cityAdd"]
+        }
+    },
+    /* Country */
+    {
+        name: "countryList",
+        path: "/countries",
+        component: () =>
+            import("@/pages/Entity/Country/List.vue"),
+        meta: {
+            title: "CountryList",
+            breadcrumbs: ["dashboard", "countryList"]
+        }
+    },
+    {
+        name: "countryEdit",
+        path: "/countries/:id/edit",
+        component: () =>
+            import("@/pages/Entity/Country/Form.vue"),
+        meta: {
+            title: "CountryEdit",
+            breadcrumbs: ["dashboard", "countryList", "countryEdit"]
+        }
+    },
+    {
+        name: "countryAdd",
+        path: "/countries/add",
+        component: () =>
+            import("@/pages/Entity/Country/Form.vue"),
+        meta: {
+            title: "CountryAdd",
+            breadcrumbs: ["dashboard", "countryList", "countryAdd"]
+        }
+    },
+    /* Region */
+    {
+        name: "regionList",
+        path: "/regions",
+        component: () =>
+            import("@/pages/Entity/Region/List.vue"),
+        meta: {
+            title: "RegionList",
+            breadcrumbs: ["dashboard", "regionList"]
+        }
+    },
+    {
+        name: "regionEdit",
+        path: "/regions/:id/edit",
+        component: () =>
+            import("@/pages/Entity/Region/Form.vue"),
+        meta: {
+            title: "RegionEdit",
+            breadcrumbs: ["dashboard", "regionList", "regionEdit"]
+        }
+    },
+    {
+        name: "regionAdd",
+        path: "/regions/add",
+        component: () =>
+            import("@/pages/Entity/Region/Form.vue"),
+        meta: {
+            title: "RegionAdd",
+            breadcrumbs: ["dashboard", "regionList", "regionAdd"]
+        }
+    },
+    /* EncryptionKey */
+    {
+        name: "encryptionKeyList",
+        path: "/encryption-keys",
+        component: () =>
+            import("@/pages/Entity/EncryptionKey/List.vue"),
+        meta: {
+            title: "EncryptionKeyList",
+            breadcrumbs: ["dashboard", "encryptionKeyList"]
+        }
+    },
+    {
+        name: "encryptionKeyEdit",
+        path: "/encryption-keys/:id/edit",
+        component: () =>
+            import("@/pages/Entity/EncryptionKey/Form.vue"),
+        meta: {
+            title: "EncryptionKeyEdit",
+            breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyEdit"]
+        }
+    },
+    {
+        name: "encryptionKeyAdd",
+        path: "/encryption-keys/add",
+        component: () =>
+            import("@/pages/Entity/EncryptionKey/Form.vue"),
+        meta: {
+            title: "EncryptionKeyAdd",
+            breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyAdd"]
+        }
+    },
+    /* LoginCode */
+    {
+        name: "loginCodeList",
+        path: "/login-codes",
+        component: () =>
+            import("@/pages/Entity/LoginCode/List.vue"),
+        meta: {
+            title: "LoginCodeList",
+            breadcrumbs: ["dashboard", "loginCodeList"]
+        }
+    },
+    {
+        name: "loginCodeEdit",
+        path: "/login-codes/:id/edit",
+        component: () =>
+            import("@/pages/Entity/LoginCode/Form.vue"),
+        meta: {
+            title: "LoginCodeEdit",
+            breadcrumbs: ["dashboard", "loginCodeList", "loginCodeEdit"]
+        }
+    },
+    {
+        name: "loginCodeAdd",
+        path: "/login-codes/add",
+        component: () =>
+            import("@/pages/Entity/LoginCode/Form.vue"),
+        meta: {
+            title: "LoginCodeAdd",
+            breadcrumbs: ["dashboard", "loginCodeList", "loginCodeAdd"]
+        }
+    },
+    /* SiteUser */
+    {
+        name: "siteUserList",
+        path: "/site-users",
+        component: () =>
+            import("@/pages/Entity/SiteUser/List.vue"),
+        meta: {
+            title: "SiteUserList",
+            breadcrumbs: ["dashboard", "siteUserList"]
+        }
+    },
+    {
+        name: "siteUserEdit",
+        path: "/site-users/:id/edit",
+        component: () =>
+            import("@/pages/Entity/SiteUser/Form.vue"),
+        meta: {
+            title: "SiteUserEdit",
+            breadcrumbs: ["dashboard", "siteUserList", "siteUserEdit"]
+        }
+    },
+    {
+        name: "siteUserAdd",
+        path: "/site-users/add",
+        component: () =>
+            import("@/pages/Entity/SiteUser/Form.vue"),
+        meta: {
+            title: "SiteUserAdd",
+            breadcrumbs: ["dashboard", "siteUserList", "siteUserAdd"]
+        }
+    },
+    /* VfsFile */
+    {
+        name: "vfsFileList",
+        path: "/vfs-files",
+        component: () =>
+            import("@/pages/Entity/VfsFile/List.vue"),
+        meta: {
+            title: "VfsFileList",
+            breadcrumbs: ["dashboard", "vfsFileList"]
+        }
+    },
+    {
+        name: "vfsFileEdit",
+        path: "/vfs-files/:id/edit",
+        component: () =>
+            import("@/pages/Entity/VfsFile/Form.vue"),
+        meta: {
+            title: "VfsFileEdit",
+            breadcrumbs: ["dashboard", "vfsFileList", "vfsFileEdit"]
+        }
+    },
+    {
+        name: "vfsFileAdd",
+        path: "/vfs-files/add",
+        component: () =>
+            import("@/pages/Entity/VfsFile/Form.vue"),
+        meta: {
+            title: "VfsFileAdd",
+            breadcrumbs: ["dashboard", "vfsFileList", "vfsFileAdd"]
+        }
+    },
+    /* VfsFolder */
+    {
+        name: "vfsFolderList",
+        path: "/vfs-folders",
+        component: () =>
+            import("@/pages/Entity/VfsFolder/List.vue"),
+        meta: {
+            title: "VfsFolderList",
+            breadcrumbs: ["dashboard", "vfsFolderList"]
+        }
+    },
+    {
+        name: "vfsFolderEdit",
+        path: "/vfs-folders/:id/edit",
+        component: () =>
+            import("@/pages/Entity/VfsFolder/Form.vue"),
+        meta: {
+            title: "VfsFolderEdit",
+            breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderEdit"]
+        }
+    },
+    {
+        name: "vfsFolderAdd",
+        path: "/vfs-folders/add",
+        component: () =>
+            import("@/pages/Entity/VfsFolder/Form.vue"),
+        meta: {
+            title: "VfsFolderAdd",
+            breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderAdd"]
+        }
+    },
+];
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/Form.vue b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/Form.vue
index ab8d2d8..49ec139 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/Form.vue
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/Form.vue
@@ -15,7 +15,7 @@
         >
           <v-flex>
             <h2 class="ellipsed">
-              {{ model.title || "..." }}
+              {{ store.model.title || "..." }}
             </h2>
           </v-flex>
           <v-spacer />
@@ -23,7 +23,7 @@
             <v-btn
               text
               color="primary"
-              :disabled="isLoading"
+              :disabled="store.isLoading"
               @click.stop="navigateBack"
             >
               <v-icon
@@ -32,7 +32,7 @@
                 arrow_back
               </v-icon>
               <template v-if="!$vuetify.breakpoint.xsOnly">
-                {{ t("common.form.cancelButtonLabel") }}
+                {{ $t("common.form.cancelButtonLabel") }}
               </template>
             </v-btn>
             <v-hover
@@ -61,7 +61,7 @@
             Основные
           </v-tab>
         </v-tabs>
-        <v-card v-if="model">
+        <v-card v-if="store.model">
           <v-form
             ref="form"
             @submit.prevent="onSaveAndBack"
@@ -71,27 +71,27 @@
                 <v-tab-item eager>
                   <!--  generated part -->
                   <vt-form-field
-                    v-model="model.title"
+                    v-model="store.model.title"
                     component="v-text-field"
-                    :label="t('category.form.titleLabel')"
-                    :error-messages="getErrorMessage(errors.title)"
-                    :disabled="isLoading"
+                    :label="$t('category.form.titleLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.title))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     required
                   /><vt-form-field
-                    v-model="model.orderNumber"
+                    v-model="store.model.orderNumber"
                     component="v-text-field"
-                    :label="t('category.form.orderNumberLabel')"
-                    :error-messages="getErrorMessage(errors.orderNumber)"
-                    :disabled="isLoading"
+                    :label="$t('category.form.orderNumberLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.orderNumber))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     required
                   /><vt-form-field
-                    v-model="model.statusId"
+                    v-model="store.model.statusId"
                     component="vt-status-select"
-                    :label="t('category.form.statusIdLabel')"
-                    :error-messages="getErrorMessage(errors.statusId)"
-                    :disabled="isLoading"
+                    :label="$t('category.form.statusIdLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.statusId))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     required
                     compact
@@ -111,21 +111,21 @@
                     <v-btn
                       type="submit"
                       color="success"
-                      :disabled="!isChanged || isLoading"
-                      :loading="isLoading"
+                      :disabled="!store.isChanged || store.isLoading"
+                      :loading="store.isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="!$vuetify.breakpoint.xsOnly && 'mx-2'"
                     >
                       <v-icon left>
                         done
                       </v-icon>
-                      {{ t("common.form.saveAndCloseButtonLabel") }}
+                      {{ $t("common.form.saveAndCloseButtonLabel") }}
                     </v-btn>
 
                     <v-btn
                       v-if="$route.params.id"
-                      :disabled="!isChanged || isLoading"
-                      :loading="isLoading"
+                      :disabled="!store.isChanged || store.isLoading"
+                      :loading="store.isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="[
                         $vuetify.breakpoint.xsOnly && 'ml-0 mt-2',
@@ -135,7 +135,7 @@
                       color="accent"
                       @click.stop="onSave"
                     >
-                      {{ t("common.form.saveButtonLabel") }}
+                      {{ $t("common.form.saveButtonLabel") }}
                     </v-btn>
                     <v-spacer />
                   </v-layout>
@@ -150,58 +150,17 @@
 </template>
 
 <script lang="ts">
-import { useEntityForm } from '@/composables/useEntityForm';
-import { useI18n } from '@/composables/useI18n'
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
 import { Category as Model } from '@/services/api/factory';
-import { defineComponent } from 'vue';
+import Store from '@/common/Entity/EntityModelStore';
+import EntityForm from '@/common/Entity/EntityForm';
 
-export default defineComponent({
-  // eslint-disable-next-line vue/match-component-file-name
-  name: 'CategoryForm',
-
-  setup () {
-    const { t } = useI18n();
-
-    const {
-      tab,
-      form,
-      model,
-      errors,
-      isLoading,
-      isChanged,
-      i18nFieldError,
-      tabsHasError,
-
-      onSave,
-      onDelete,
-      navigateBack,
-      onSaveAndBack
-    } = useEntityForm<Model>({ Model} );
-
-	const getErrorMessage = (errorKey: string | null): string => {
-      const errorMessage = i18nFieldError(errorKey);
-      return errorMessage ? t(errorMessage) : '';
-    };
-
-    return {
-      t,
-      tab,
-      form,
-      model,
-      errors,
-      isLoading,
-      isChanged,
-      i18nFieldError,
-      tabsHasError,
-      getErrorMessage,
-
-      onSave,
-      onDelete,
-      navigateBack,
-      onSaveAndBack
-    };
-  }
-});
+@Observer
+@Component
+export default class Form extends EntityForm {
+  store: Store<Model> = new Store<Model>(Model);
+}
 </script>
 
 <style scoped></style>
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/List.vue b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/List.vue
index 261806a..f2e6d2a 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/List.vue
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/List.vue
@@ -18,26 +18,27 @@
               <v-flex>
                 <v-layout align-center>
                   <h2 class="ellipsed mr-1">
-                    {{ t("category.list.title") }}
+                    {{ $t("category.list.title") }}
                   </h2>
                   <span
-                    v-if="pagination.totalItems"
+                    v-if="store.pagination.totalItems"
                     class="text--secondary subtitle-2"
                   >
-                    {{ pagination.totalItems }}
+                    {{ store.pagination.totalItems }}
                   </span>
                 </v-layout>
               </v-flex>
               <v-spacer />
               <v-flex shrink>
                 <v-btn
-                  small
                   dark
                   color="success"
                   :to="{ name: 'categoryAdd' }"
                 >
-                  <v-icon>add</v-icon>
-                  {{ t("common.list.addNewLabel") }}
+                  <v-icon left>
+                    add
+                  </v-icon>
+                  {{ $t("common.list.addNewLabel") }}
                 </v-btn>
               </v-flex>
             </v-layout>
@@ -63,9 +64,9 @@
                     mr-sm-2
                   >
                     <v-text-field
-                      v-model="filters.title"
+                      v-model="store.filters.title"
                       :placeholder="
-                        t('category.list.filter.quickFilterPlaceholder')
+                        $t('category.list.filter.quickFilterPlaceholder')
                       "
                       hide-details
                       @keyup.enter.native="submitFilters()"
@@ -77,10 +78,9 @@
                     mr-sm-10
                   >
                     <multi-filters
-                      :filters="filters"
-                      :active-filters="activeFilters"
+                      :filters="store.filters"
+                      :active-filters="store.activeFilters"
                       @submitFilters="submitFilters"
-                      @update:filters="updateFilters"
                     />
                   </v-flex>
                   <v-flex
@@ -88,8 +88,8 @@
                     mt-sm-4
                   >
                     <vt-compact-pagination
-                      :value="pagination.page"
-                      :total-pages="pagination.totalPages"
+                      :value="store.pagination.page"
+                      :total-pages="store.pagination.totalPages"
                       @input="setCompactPagination"
                     />
                   </v-flex>
@@ -100,9 +100,9 @@
               <v-data-table
                 v-model="selected"
                 :headers="headers"
-                :items="list"
-                :options="vuetifyTableOptions"
-                :server-items-length="pagination.totalItems"
+                :items="store.list"
+                :options="store.vuetifyTableOptions"
+                :server-items-length="store.pagination.totalItems"
                 item-key="id"
                 :footer-props="{
                   itemsPerPageOptions: [10, 25, 50, 100, 500]
@@ -116,7 +116,7 @@
                   }
                 ]"
                 :show-select="false"
-                :loading="isLoading"
+                :loading="store.isLoading"
                 fixed-header
                 @update:options="setPagination"
               >
@@ -164,76 +164,48 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
-import { CategorySummary, CategorySearch } from '@/services/api/factory';
-import { useEntityList } from '@/composables/useEntityList';
-import { useI18n } from '@/composables/useI18n';
-
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
+import EntityList from '@/common/Entity/EntityList';
+import Store from '@/common/Entity/EntityCollectionStore';
+import {
+  CategorySummary as Model,
+  CategorySearch as SearchModel
+} from '@/services/api/factory';
 import MultiFilters from './components/MultiListFilters.vue';
 
-export default defineComponent({
-  // eslint-disable-next-line vue/multi-word-component-names
+@Observer
+@Component({
   name: 'List',
-  components: { MultiFilters },
-
-  setup () {
-    const { t } = useI18n();
+  components: { MultiFilters }
+})
+export default class List extends EntityList {
+  store: Store = new Store(Model, SearchModel);
 
-    const {
-      selected,
-      pagination,
-      filters,
-      activeFilters,
-      list,
-      isLoading,
-      vuetifyTableOptions,
-      deleteItem,
-      submitFilters,
-      setCompactPagination,
-      setPagination,
-      updateFilters
-    } = useEntityList(CategorySummary, CategorySearch);
-
-    const headers = computed(() => [
+  get headers () {
+    return [
       {
-        text: t('category.list.headers.title'),
+        text: this.$t('category.list.headers.title'),
         value: 'title',
         align: 'left'
       },
       {
-        text: t('category.list.headers.orderNumber'),
+        text: this.$t('category.list.headers.orderNumber'),
         value: 'orderNumber'
       },
       {
-        text: t('category.list.headers.status'),
+        text: this.$t('category.list.headers.status'),
         value: 'status',
         sortable: false
       },
       {
-        text: t('category.list.headers.actions'),
+        text: this.$t('category.list.headers.actions'),
         value: 'id',
         sortable: false
       }
-    ]);
-
-    return {
-      t,
-      selected,
-      pagination,
-      filters,
-      activeFilters,
-      list,
-      isLoading,
-      vuetifyTableOptions,
-      deleteItem,
-      submitFilters,
-      setCompactPagination,
-      setPagination,
-      updateFilters,
-      headers
-    };
+    ];
   }
-});
+}
 </script>
 
 <style lang="scss"></style>
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/components/MultiListFilters.vue b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/components/MultiListFilters.vue
index a6fedaf..fc765eb 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/components/MultiListFilters.vue
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Category/components/MultiListFilters.vue
@@ -1,43 +1,26 @@
 <template>
-  <vt-new-multi-filter
+  <vt-multi-filter
     :items="filterItems"
     :filters="filters"
     autofocus
-    :label="t('common.list.filter.title')"
+    :label="$t('common.list.filter.title')"
     @submitFilters="$emit('submitFilters')"
-    @update:filters="$emit('update:filters', $event)"
   />
 </template>
 
 <script lang="ts">
-import { IFilterItem } from '@/common/MultiFilter/types';
-import { useI18n } from '@/composables/useI18n';
-import { defineComponent } from 'vue';
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
+import EntityListFilters from '@/common/Entity/EntityListFilters';
 
-export default defineComponent({
-  name: 'MultiListFilters',
-
-  props: {
-    filters: {
-      type: Object,
-      required: true
-    },
-    activeFilters: {
-      type: Object,
-      required: true
-    }
-  },
-
-  emits: ['submitFilters', 'update:filters'],
-
-  setup () {
-    const { t } = useI18n();
-
-    const filterItems = [
+@Observer
+@Component
+export default class MultiListFilters extends EntityListFilters {
+  filterItems = [
     {
       id: 'title',
       type: 'input',
-      title: t('category.list.filter.title'),
+      title: this.$t('category.list.filter.title'),
       value: null,
       values: null,
       settings: {
@@ -48,7 +31,7 @@ export default defineComponent({
     {
       id: 'orderNumber',
       type: 'input',
-      title: t('category.list.filter.orderNumber'),
+      title: this.$t('category.list.filter.orderNumber'),
       value: null,
       values: null,
       settings: {
@@ -60,7 +43,7 @@ export default defineComponent({
     {
       id: 'statusId',
       type: 'select',
-      title: t('category.list.filter.statusId'),
+      title: this.$t('category.list.filter.statusId'),
       value: null,
       values: null,
       settings: {
@@ -76,7 +59,7 @@ export default defineComponent({
     {
       id: 'ids',
       type: 'select',
-      title: t('category.list.filter.ids'),
+      title: this.$t('category.list.filter.ids'),
       value: null,
       values: null,
       settings: {
@@ -86,12 +69,6 @@ export default defineComponent({
         component: 'v-text-field'
       }
     }
-  ].filter(Boolean) as IFilterItem[];
-
-    return {
-      t,
-      filterItems
-    };
-  }
-});
+  ].filter(Boolean)
+}
 </script>
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/Form.vue b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/Form.vue
index 6630576..e46587a 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/Form.vue
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/Form.vue
@@ -15,7 +15,7 @@
         >
           <v-flex>
             <h2 class="ellipsed">
-              {{ model.title || "..." }}
+              {{ store.model.title || "..." }}
             </h2>
           </v-flex>
           <v-spacer />
@@ -23,7 +23,7 @@
             <v-btn
               text
               color="primary"
-              :disabled="isLoading"
+              :disabled="store.isLoading"
               @click.stop="navigateBack"
             >
               <v-icon
@@ -32,7 +32,7 @@
                 arrow_back
               </v-icon>
               <template v-if="!$vuetify.breakpoint.xsOnly">
-                {{ t("common.form.cancelButtonLabel") }}
+                {{ $t("common.form.cancelButtonLabel") }}
               </template>
             </v-btn>
             <v-hover
@@ -61,7 +61,7 @@
             Основные
           </v-tab>
         </v-tabs>
-        <v-card v-if="model">
+        <v-card v-if="store.model">
           <v-form
             ref="form"
             @submit.prevent="onSaveAndBack"
@@ -71,19 +71,19 @@
                 <v-tab-item eager>
                   <!--  generated part -->
                   <vt-form-field
-                    v-model="model.title"
+                    v-model="store.model.title"
                     component="v-text-field"
-                    :label="t('tag.form.titleLabel')"
-                    :error-messages="getErrorMessage(errors.title)"
-                    :disabled="isLoading"
+                    :label="$t('tag.form.titleLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.title))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     required
                   /><vt-form-field
-                    v-model="model.statusId"
+                    v-model="store.model.statusId"
                     component="vt-status-select"
-                    :label="t('tag.form.statusIdLabel')"
-                    :error-messages="getErrorMessage(errors.statusId)"
-                    :disabled="isLoading"
+                    :label="$t('tag.form.statusIdLabel')"
+                    :error-messages="$t(i18nFieldError(store.errors.statusId))"
+                    :disabled="store.isLoading"
                     placeholder=""
                     required
                     compact
@@ -103,21 +103,21 @@
                     <v-btn
                       type="submit"
                       color="success"
-                      :disabled="!isChanged || isLoading"
-                      :loading="isLoading"
+                      :disabled="!store.isChanged || store.isLoading"
+                      :loading="store.isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="!$vuetify.breakpoint.xsOnly && 'mx-2'"
                     >
                       <v-icon left>
                         done
                       </v-icon>
-                      {{ t("common.form.saveAndCloseButtonLabel") }}
+                      {{ $t("common.form.saveAndCloseButtonLabel") }}
                     </v-btn>
 
                     <v-btn
                       v-if="$route.params.id"
-                      :disabled="!isChanged || isLoading"
-                      :loading="isLoading"
+                      :disabled="!store.isChanged || store.isLoading"
+                      :loading="store.isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="[
                         $vuetify.breakpoint.xsOnly && 'ml-0 mt-2',
@@ -127,7 +127,7 @@
                       color="accent"
                       @click.stop="onSave"
                     >
-                      {{ t("common.form.saveButtonLabel") }}
+                      {{ $t("common.form.saveButtonLabel") }}
                     </v-btn>
                     <v-spacer />
                   </v-layout>
@@ -142,58 +142,17 @@
 </template>
 
 <script lang="ts">
-import { useEntityForm } from '@/composables/useEntityForm';
-import { useI18n } from '@/composables/useI18n'
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
 import { Tag as Model } from '@/services/api/factory';
-import { defineComponent } from 'vue';
+import Store from '@/common/Entity/EntityModelStore';
+import EntityForm from '@/common/Entity/EntityForm';
 
-export default defineComponent({
-  // eslint-disable-next-line vue/match-component-file-name
-  name: 'TagForm',
-
-  setup () {
-    const { t } = useI18n();
-
-    const {
-      tab,
-      form,
-      model,
-      errors,
-      isLoading,
-      isChanged,
-      i18nFieldError,
-      tabsHasError,
-
-      onSave,
-      onDelete,
-      navigateBack,
-      onSaveAndBack
-    } = useEntityForm<Model>({ Model} );
-
-	const getErrorMessage = (errorKey: string | null): string => {
-      const errorMessage = i18nFieldError(errorKey);
-      return errorMessage ? t(errorMessage) : '';
-    };
-
-    return {
-      t,
-      tab,
-      form,
-      model,
-      errors,
-      isLoading,
-      isChanged,
-      i18nFieldError,
-      tabsHasError,
-      getErrorMessage,
-
-      onSave,
-      onDelete,
-      navigateBack,
-      onSaveAndBack
-    };
-  }
-});
+@Observer
+@Component
+export default class Form extends EntityForm {
+  store: Store<Model> = new Store<Model>(Model);
+}
 </script>
 
 <style scoped></style>
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/List.vue b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/List.vue
index 71dec4b..59f5d65 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/List.vue
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/List.vue
@@ -18,26 +18,27 @@
               <v-flex>
                 <v-layout align-center>
                   <h2 class="ellipsed mr-1">
-                    {{ t("tag.list.title") }}
+                    {{ $t("tag.list.title") }}
                   </h2>
                   <span
-                    v-if="pagination.totalItems"
+                    v-if="store.pagination.totalItems"
                     class="text--secondary subtitle-2"
                   >
-                    {{ pagination.totalItems }}
+                    {{ store.pagination.totalItems }}
                   </span>
                 </v-layout>
               </v-flex>
               <v-spacer />
               <v-flex shrink>
                 <v-btn
-                  small
                   dark
                   color="success"
                   :to="{ name: 'tagAdd' }"
                 >
-                  <v-icon>add</v-icon>
-                  {{ t("common.list.addNewLabel") }}
+                  <v-icon left>
+                    add
+                  </v-icon>
+                  {{ $t("common.list.addNewLabel") }}
                 </v-btn>
               </v-flex>
             </v-layout>
@@ -63,9 +64,9 @@
                     mr-sm-2
                   >
                     <v-text-field
-                      v-model="filters.title"
+                      v-model="store.filters.title"
                       :placeholder="
-                        t('tag.list.filter.quickFilterPlaceholder')
+                        $t('tag.list.filter.quickFilterPlaceholder')
                       "
                       hide-details
                       @keyup.enter.native="submitFilters()"
@@ -77,10 +78,9 @@
                     mr-sm-10
                   >
                     <multi-filters
-                      :filters="filters"
-                      :active-filters="activeFilters"
+                      :filters="store.filters"
+                      :active-filters="store.activeFilters"
                       @submitFilters="submitFilters"
-                      @update:filters="updateFilters"
                     />
                   </v-flex>
                   <v-flex
@@ -88,8 +88,8 @@
                     mt-sm-4
                   >
                     <vt-compact-pagination
-                      :value="pagination.page"
-                      :total-pages="pagination.totalPages"
+                      :value="store.pagination.page"
+                      :total-pages="store.pagination.totalPages"
                       @input="setCompactPagination"
                     />
                   </v-flex>
@@ -100,9 +100,9 @@
               <v-data-table
                 v-model="selected"
                 :headers="headers"
-                :items="list"
-                :options="vuetifyTableOptions"
-                :server-items-length="pagination.totalItems"
+                :items="store.list"
+                :options="store.vuetifyTableOptions"
+                :server-items-length="store.pagination.totalItems"
                 item-key="id"
                 :footer-props="{
                   itemsPerPageOptions: [10, 25, 50, 100, 500]
@@ -116,7 +116,7 @@
                   }
                 ]"
                 :show-select="false"
-                :loading="isLoading"
+                :loading="store.isLoading"
                 fixed-header
                 @update:options="setPagination"
               >
@@ -161,72 +161,44 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
-import { TagSummary, TagSearch } from '@/services/api/factory';
-import { useEntityList } from '@/composables/useEntityList';
-import { useI18n } from '@/composables/useI18n';
-
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
+import EntityList from '@/common/Entity/EntityList';
+import Store from '@/common/Entity/EntityCollectionStore';
+import {
+  TagSummary as Model,
+  TagSearch as SearchModel
+} from '@/services/api/factory';
 import MultiFilters from './components/MultiListFilters.vue';
 
-export default defineComponent({
-  // eslint-disable-next-line vue/multi-word-component-names
+@Observer
+@Component({
   name: 'List',
-  components: { MultiFilters },
-
-  setup () {
-    const { t } = useI18n();
+  components: { MultiFilters }
+})
+export default class List extends EntityList {
+  store: Store = new Store(Model, SearchModel);
 
-    const {
-      selected,
-      pagination,
-      filters,
-      activeFilters,
-      list,
-      isLoading,
-      vuetifyTableOptions,
-      deleteItem,
-      submitFilters,
-      setCompactPagination,
-      setPagination,
-      updateFilters
-    } = useEntityList(TagSummary, TagSearch);
-
-    const headers = computed(() => [
+  get headers () {
+    return [
       {
-        text: t('tag.list.headers.title'),
+        text: this.$t('tag.list.headers.title'),
         value: 'title',
         align: 'left'
       },
       {
-        text: t('tag.list.headers.status'),
+        text: this.$t('tag.list.headers.status'),
         value: 'status',
         sortable: false
       },
       {
-        text: t('tag.list.headers.actions'),
+        text: this.$t('tag.list.headers.actions'),
         value: 'id',
         sortable: false
       }
-    ]);
-
-    return {
-      t,
-      selected,
-      pagination,
-      filters,
-      activeFilters,
-      list,
-      isLoading,
-      vuetifyTableOptions,
-      deleteItem,
-      submitFilters,
-      setCompactPagination,
-      setPagination,
-      updateFilters,
-      headers
-    };
+    ];
   }
-});
+}
 </script>
 
 <style lang="scss"></style>
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/components/MultiListFilters.vue b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/components/MultiListFilters.vue
index 523e594..4e5ae81 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/components/MultiListFilters.vue
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/Tag/components/MultiListFilters.vue
@@ -1,43 +1,26 @@
 <template>
-  <vt-new-multi-filter
+  <vt-multi-filter
     :items="filterItems"
     :filters="filters"
     autofocus
-    :label="t('common.list.filter.title')"
+    :label="$t('common.list.filter.title')"
     @submitFilters="$emit('submitFilters')"
-    @update:filters="$emit('update:filters', $event)"
   />
 </template>
 
 <script lang="ts">
-import { IFilterItem } from '@/common/MultiFilter/types';
-import { useI18n } from '@/composables/useI18n';
-import { defineComponent } from 'vue';
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
+import EntityListFilters from '@/common/Entity/EntityListFilters';
 
-export default defineComponent({
-  name: 'MultiListFilters',
-
-  props: {
-    filters: {
-      type: Object,
-      required: true
-    },
-    activeFilters: {
-      type: Object,
-      required: true
-    }
-  },
-
-  emits: ['submitFilters', 'update:filters'],
-
-  setup () {
-    const { t } = useI18n();
-
-    const filterItems = [
+@Observer
+@Component
+export default class MultiListFilters extends EntityListFilters {
+  filterItems = [
     {
       id: 'title',
       type: 'input',
-      title: t('tag.list.filter.title'),
+      title: this.$t('tag.list.filter.title'),
       value: null,
       values: null,
       settings: {
@@ -48,7 +31,7 @@ export default defineComponent({
     {
       id: 'statusId',
       type: 'select',
-      title: t('tag.list.filter.statusId'),
+      title: this.$t('tag.list.filter.statusId'),
       value: null,
       values: null,
       settings: {
@@ -64,7 +47,7 @@ export default defineComponent({
     {
       id: 'ids',
       type: 'select',
-      title: t('tag.list.filter.ids'),
+      title: this.$t('tag.list.filter.ids'),
       value: null,
       values: null,
       settings: {
@@ -74,12 +57,6 @@ export default defineComponent({
         component: 'v-text-field'
       }
     }
-  ].filter(Boolean) as IFilterItem[];
-
-    return {
-      t,
-      filterItems
-    };
-  }
-});
+  ].filter(Boolean)
+}
 </script>
diff --git a/generators/testdata/expected/vt-template/entities/src/pages/Entity/routes.ts b/generators/testdata/expected/vt-template/entities/src/pages/Entity/routes.ts
index 198b28f..7c69d18 100644
--- a/generators/testdata/expected/vt-template/entities/src/pages/Entity/routes.ts
+++ b/generators/testdata/expected/vt-template/entities/src/pages/Entity/routes.ts
@@ -1,344 +1,311 @@
 /* eslint-disable */
 export default [
-    /* Category */
-    {
-        name: "categoryList",
-        path: "/categories",
-        component: () =>
-            import("@/pages/Entity/Category/List.vue"),
-        meta: {
-            title: "CategoryList",
-            breadcrumbs: ["dashboard", "categoryList"]
-        }
-    },
-    {
-        name: "categoryEdit",
-        path: "/categories/:id/edit",
-        component: () =>
-            import("@/pages/Entity/Category/Form.vue"),
-        meta: {
-            title: "CategoryEdit",
-            breadcrumbs: ["dashboard", "categoryList", "categoryEdit"]
-        }
-    },
-    {
-        name: "categoryAdd",
-        path: "/categories/add",
-        component: () =>
-            import("@/pages/Entity/Category/Form.vue"),
-        meta: {
-            title: "CategoryAdd",
-            breadcrumbs: ["dashboard", "categoryList", "categoryAdd"]
-        }
-    },
-    /* News */
-    {
-        name: "newsList",
-        path: "/news",
-        component: () =>
-            import("@/pages/Entity/News/List.vue"),
-        meta: {
-            title: "NewsList",
-            breadcrumbs: ["dashboard", "newsList"]
-        }
-    },
-    {
-        name: "newsEdit",
-        path: "/news/:id/edit",
-        component: () =>
-            import("@/pages/Entity/News/Form.vue"),
-        meta: {
-            title: "NewsEdit",
-            breadcrumbs: ["dashboard", "newsList", "newsEdit"]
-        }
-    },
-    {
-        name: "newsAdd",
-        path: "/news/add",
-        component: () =>
-            import("@/pages/Entity/News/Form.vue"),
-        meta: {
-            title: "NewsAdd",
-            breadcrumbs: ["dashboard", "newsList", "newsAdd"]
-        }
-    },
-    /* Tag */
-    {
-        name: "tagList",
-        path: "/tags",
-        component: () =>
-            import("@/pages/Entity/Tag/List.vue"),
-        meta: {
-            title: "TagList",
-            breadcrumbs: ["dashboard", "tagList"]
-        }
-    },
-    {
-        name: "tagEdit",
-        path: "/tags/:id/edit",
-        component: () =>
-            import("@/pages/Entity/Tag/Form.vue"),
-        meta: {
-            title: "TagEdit",
-            breadcrumbs: ["dashboard", "tagList", "tagEdit"]
-        }
-    },
-    {
-        name: "tagAdd",
-        path: "/tags/add",
-        component: () =>
-            import("@/pages/Entity/Tag/Form.vue"),
-        meta: {
-            title: "TagAdd",
-            breadcrumbs: ["dashboard", "tagList", "tagAdd"]
-        }
-    },
-    /* City */
-    {
-        name: "cityList",
-        path: "/cities",
-        component: () =>
-            import("@/pages/Entity/City/List.vue"),
-        meta: {
-            title: "CityList",
-            breadcrumbs: ["dashboard", "cityList"]
-        }
-    },
-    {
-        name: "cityEdit",
-        path: "/cities/:id/edit",
-        component: () =>
-            import("@/pages/Entity/City/Form.vue"),
-        meta: {
-            title: "CityEdit",
-            breadcrumbs: ["dashboard", "cityList", "cityEdit"]
-        }
-    },
-    {
-        name: "cityAdd",
-        path: "/cities/add",
-        component: () =>
-            import("@/pages/Entity/City/Form.vue"),
-        meta: {
-            title: "CityAdd",
-            breadcrumbs: ["dashboard", "cityList", "cityAdd"]
-        }
-    },
-    /* Country */
-    {
-        name: "countryList",
-        path: "/countries",
-        component: () =>
-            import("@/pages/Entity/Country/List.vue"),
-        meta: {
-            title: "CountryList",
-            breadcrumbs: ["dashboard", "countryList"]
-        }
-    },
-    {
-        name: "countryEdit",
-        path: "/countries/:id/edit",
-        component: () =>
-            import("@/pages/Entity/Country/Form.vue"),
-        meta: {
-            title: "CountryEdit",
-            breadcrumbs: ["dashboard", "countryList", "countryEdit"]
-        }
-    },
-    {
-        name: "countryAdd",
-        path: "/countries/add",
-        component: () =>
-            import("@/pages/Entity/Country/Form.vue"),
-        meta: {
-            title: "CountryAdd",
-            breadcrumbs: ["dashboard", "countryList", "countryAdd"]
-        }
-    },
-    /* Region */
-    {
-        name: "regionList",
-        path: "/regions",
-        component: () =>
-            import("@/pages/Entity/Region/List.vue"),
-        meta: {
-            title: "RegionList",
-            breadcrumbs: ["dashboard", "regionList"]
-        }
-    },
-    {
-        name: "regionEdit",
-        path: "/regions/:id/edit",
-        component: () =>
-            import("@/pages/Entity/Region/Form.vue"),
-        meta: {
-            title: "RegionEdit",
-            breadcrumbs: ["dashboard", "regionList", "regionEdit"]
-        }
-    },
-    {
-        name: "regionAdd",
-        path: "/regions/add",
-        component: () =>
-            import("@/pages/Entity/Region/Form.vue"),
-        meta: {
-            title: "RegionAdd",
-            breadcrumbs: ["dashboard", "regionList", "regionAdd"]
-        }
-    },
-    /* EncryptionKey */
-    {
-        name: "encryptionKeyList",
-        path: "/encryption-keys",
-        component: () =>
-            import("@/pages/Entity/EncryptionKey/List.vue"),
-        meta: {
-            title: "EncryptionKeyList",
-            breadcrumbs: ["dashboard", "encryptionKeyList"]
-        }
-    },
-    {
-        name: "encryptionKeyEdit",
-        path: "/encryption-keys/:id/edit",
-        component: () =>
-            import("@/pages/Entity/EncryptionKey/Form.vue"),
-        meta: {
-            title: "EncryptionKeyEdit",
-            breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyEdit"]
-        }
-    },
-    {
-        name: "encryptionKeyAdd",
-        path: "/encryption-keys/add",
-        component: () =>
-            import("@/pages/Entity/EncryptionKey/Form.vue"),
-        meta: {
-            title: "EncryptionKeyAdd",
-            breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyAdd"]
-        }
-    },
-    /* LoginCode */
-    {
-        name: "loginCodeList",
-        path: "/login-codes",
-        component: () =>
-            import("@/pages/Entity/LoginCode/List.vue"),
-        meta: {
-            title: "LoginCodeList",
-            breadcrumbs: ["dashboard", "loginCodeList"]
-        }
-    },
-    {
-        name: "loginCodeEdit",
-        path: "/login-codes/:id/edit",
-        component: () =>
-            import("@/pages/Entity/LoginCode/Form.vue"),
-        meta: {
-            title: "LoginCodeEdit",
-            breadcrumbs: ["dashboard", "loginCodeList", "loginCodeEdit"]
-        }
-    },
-    {
-        name: "loginCodeAdd",
-        path: "/login-codes/add",
-        component: () =>
-            import("@/pages/Entity/LoginCode/Form.vue"),
-        meta: {
-            title: "LoginCodeAdd",
-            breadcrumbs: ["dashboard", "loginCodeList", "loginCodeAdd"]
-        }
-    },
-    /* SiteUser */
-    {
-        name: "siteUserList",
-        path: "/site-users",
-        component: () =>
-            import("@/pages/Entity/SiteUser/List.vue"),
-        meta: {
-            title: "SiteUserList",
-            breadcrumbs: ["dashboard", "siteUserList"]
-        }
-    },
-    {
-        name: "siteUserEdit",
-        path: "/site-users/:id/edit",
-        component: () =>
-            import("@/pages/Entity/SiteUser/Form.vue"),
-        meta: {
-            title: "SiteUserEdit",
-            breadcrumbs: ["dashboard", "siteUserList", "siteUserEdit"]
-        }
-    },
-    {
-        name: "siteUserAdd",
-        path: "/site-users/add",
-        component: () =>
-            import("@/pages/Entity/SiteUser/Form.vue"),
-        meta: {
-            title: "SiteUserAdd",
-            breadcrumbs: ["dashboard", "siteUserList", "siteUserAdd"]
-        }
-    },
-    /* VfsFile */
-    {
-        name: "vfsFileList",
-        path: "/vfs-files",
-        component: () =>
-            import("@/pages/Entity/VfsFile/List.vue"),
-        meta: {
-            title: "VfsFileList",
-            breadcrumbs: ["dashboard", "vfsFileList"]
-        }
-    },
-    {
-        name: "vfsFileEdit",
-        path: "/vfs-files/:id/edit",
-        component: () =>
-            import("@/pages/Entity/VfsFile/Form.vue"),
-        meta: {
-            title: "VfsFileEdit",
-            breadcrumbs: ["dashboard", "vfsFileList", "vfsFileEdit"]
-        }
-    },
-    {
-        name: "vfsFileAdd",
-        path: "/vfs-files/add",
-        component: () =>
-            import("@/pages/Entity/VfsFile/Form.vue"),
-        meta: {
-            title: "VfsFileAdd",
-            breadcrumbs: ["dashboard", "vfsFileList", "vfsFileAdd"]
-        }
-    },
-    /* VfsFolder */
-    {
-        name: "vfsFolderList",
-        path: "/vfs-folders",
-        component: () =>
-            import("@/pages/Entity/VfsFolder/List.vue"),
-        meta: {
-            title: "VfsFolderList",
-            breadcrumbs: ["dashboard", "vfsFolderList"]
-        }
-    },
-    {
-        name: "vfsFolderEdit",
-        path: "/vfs-folders/:id/edit",
-        component: () =>
-            import("@/pages/Entity/VfsFolder/Form.vue"),
-        meta: {
-            title: "VfsFolderEdit",
-            breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderEdit"]
-        }
-    },
-    {
-        name: "vfsFolderAdd",
-        path: "/vfs-folders/add",
-        component: () =>
-            import("@/pages/Entity/VfsFolder/Form.vue"),
-        meta: {
-            title: "VfsFolderAdd",
-            breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderAdd"]
-        }
-    },
+  /* Category */
+  {
+    name: "categoryList",
+    path: "/categories",
+    component: () =>
+      import("@/pages/Entity/Category/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "categoryList"]
+    }
+  },
+  {
+    name: "categoryEdit",
+    path: "/categories/:id/edit",
+    component: () =>
+      import("@/pages/Entity/Category/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "categoryList", "categoryEdit"]
+    }
+  },
+  {
+    name: "categoryAdd",
+    path: "/categories/add",
+    component: () =>
+      import("@/pages/Entity/Category/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "categoryList", "categoryAdd"]
+    }
+  },
+  /* News */
+  {
+    name: "newsList",
+    path: "/news",
+    component: () =>
+      import("@/pages/Entity/News/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "newsList"]
+    }
+  },
+  {
+    name: "newsEdit",
+    path: "/news/:id/edit",
+    component: () =>
+      import("@/pages/Entity/News/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "newsList", "newsEdit"]
+    }
+  },
+  {
+    name: "newsAdd",
+    path: "/news/add",
+    component: () =>
+      import("@/pages/Entity/News/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "newsList", "newsAdd"]
+    }
+  },
+  /* Tag */
+  {
+    name: "tagList",
+    path: "/tags",
+    component: () =>
+      import("@/pages/Entity/Tag/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "tagList"]
+    }
+  },
+  {
+    name: "tagEdit",
+    path: "/tags/:id/edit",
+    component: () =>
+      import("@/pages/Entity/Tag/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "tagList", "tagEdit"]
+    }
+  },
+  {
+    name: "tagAdd",
+    path: "/tags/add",
+    component: () =>
+      import("@/pages/Entity/Tag/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "tagList", "tagAdd"]
+    }
+  },
+  /* City */
+  {
+    name: "cityList",
+    path: "/cities",
+    component: () =>
+      import("@/pages/Entity/City/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "cityList"]
+    }
+  },
+  {
+    name: "cityEdit",
+    path: "/cities/:id/edit",
+    component: () =>
+      import("@/pages/Entity/City/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "cityList", "cityEdit"]
+    }
+  },
+  {
+    name: "cityAdd",
+    path: "/cities/add",
+    component: () =>
+      import("@/pages/Entity/City/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "cityList", "cityAdd"]
+    }
+  },
+  /* Country */
+  {
+    name: "countryList",
+    path: "/countries",
+    component: () =>
+      import("@/pages/Entity/Country/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "countryList"]
+    }
+  },
+  {
+    name: "countryEdit",
+    path: "/countries/:id/edit",
+    component: () =>
+      import("@/pages/Entity/Country/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "countryList", "countryEdit"]
+    }
+  },
+  {
+    name: "countryAdd",
+    path: "/countries/add",
+    component: () =>
+      import("@/pages/Entity/Country/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "countryList", "countryAdd"]
+    }
+  },
+  /* Region */
+  {
+    name: "regionList",
+    path: "/regions",
+    component: () =>
+      import("@/pages/Entity/Region/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "regionList"]
+    }
+  },
+  {
+    name: "regionEdit",
+    path: "/regions/:id/edit",
+    component: () =>
+      import("@/pages/Entity/Region/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "regionList", "regionEdit"]
+    }
+  },
+  {
+    name: "regionAdd",
+    path: "/regions/add",
+    component: () =>
+      import("@/pages/Entity/Region/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "regionList", "regionAdd"]
+    }
+  },
+  /* EncryptionKey */
+  {
+    name: "encryptionKeyList",
+    path: "/encryption-keys",
+    component: () =>
+      import("@/pages/Entity/EncryptionKey/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "encryptionKeyList"]
+    }
+  },
+  {
+    name: "encryptionKeyEdit",
+    path: "/encryption-keys/:id/edit",
+    component: () =>
+      import("@/pages/Entity/EncryptionKey/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyEdit"]
+    }
+  },
+  {
+    name: "encryptionKeyAdd",
+    path: "/encryption-keys/add",
+    component: () =>
+      import("@/pages/Entity/EncryptionKey/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "encryptionKeyList", "encryptionKeyAdd"]
+    }
+  },
+  /* LoginCode */
+  {
+    name: "loginCodeList",
+    path: "/login-codes",
+    component: () =>
+      import("@/pages/Entity/LoginCode/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "loginCodeList"]
+    }
+  },
+  {
+    name: "loginCodeEdit",
+    path: "/login-codes/:id/edit",
+    component: () =>
+      import("@/pages/Entity/LoginCode/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "loginCodeList", "loginCodeEdit"]
+    }
+  },
+  {
+    name: "loginCodeAdd",
+    path: "/login-codes/add",
+    component: () =>
+      import("@/pages/Entity/LoginCode/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "loginCodeList", "loginCodeAdd"]
+    }
+  },
+  /* SiteUser */
+  {
+    name: "siteUserList",
+    path: "/site-users",
+    component: () =>
+      import("@/pages/Entity/SiteUser/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "siteUserList"]
+    }
+  },
+  {
+    name: "siteUserEdit",
+    path: "/site-users/:id/edit",
+    component: () =>
+      import("@/pages/Entity/SiteUser/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "siteUserList", "siteUserEdit"]
+    }
+  },
+  {
+    name: "siteUserAdd",
+    path: "/site-users/add",
+    component: () =>
+      import("@/pages/Entity/SiteUser/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "siteUserList", "siteUserAdd"]
+    }
+  },
+  /* VfsFile */
+  {
+    name: "vfsFileList",
+    path: "/vfs-files",
+    component: () =>
+      import("@/pages/Entity/VfsFile/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "vfsFileList"]
+    }
+  },
+  {
+    name: "vfsFileEdit",
+    path: "/vfs-files/:id/edit",
+    component: () =>
+      import("@/pages/Entity/VfsFile/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "vfsFileList", "vfsFileEdit"]
+    }
+  },
+  {
+    name: "vfsFileAdd",
+    path: "/vfs-files/add",
+    component: () =>
+      import("@/pages/Entity/VfsFile/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "vfsFileList", "vfsFileAdd"]
+    }
+  },
+  /* VfsFolder */
+  {
+    name: "vfsFolderList",
+    path: "/vfs-folders",
+    component: () =>
+      import("@/pages/Entity/VfsFolder/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "vfsFolderList"]
+    }
+  },
+  {
+    name: "vfsFolderEdit",
+    path: "/vfs-folders/:id/edit",
+    component: () =>
+      import("@/pages/Entity/VfsFolder/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderEdit"]
+    }
+  },
+  {
+    name: "vfsFolderAdd",
+    path: "/vfs-folders/add",
+    component: () =>
+      import("@/pages/Entity/VfsFolder/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "vfsFolderList", "vfsFolderAdd"]
+    }
+  },
 ];
diff --git a/generators/vt-template/README.md b/generators/vt-template/README.md
index e0d7255..230b670 100644
--- a/generators/vt-template/README.md
+++ b/generators/vt-template/README.md
@@ -25,10 +25,19 @@ Flags:
   -o, --output string        output dir path
   -m, --mfd string           mfd file path
   -n, --namespaces strings   namespaces to generate. separate by comma
+  -e, --entities strings     entities to generate, must be in vt.xml file. separate by comma
   -h, --help                 help for template
 
 ```
 
+#### Шаблоны
+
+Встроенные шаблоны существуют в двух вариантах:
+- **default** (по умолчанию) — class-based компоненты на `vue-property-decorator` + `mobx-vue`.
+- **Composition API** — генерирует компоненты через `defineComponent`/`setup` и подключает composables (`useEntityList`, `useEntityForm`, `useI18n`), которые должны существовать во фронтенд-проекте (`@/composables/...`); в `routes.ts` добавляется поле `meta.title`.
+
+Выбор варианта задаётся на уровне проекта в mfd-файле . В корневом `<Project>` добавьте элемент `<VTComposition>true</VTComposition>` — при его наличии используются Composition API шаблоны. Если элемент отсутствует или `false`, используются default class-based шаблоны.
+
 #### MODE
 
 Значение Mode vt-сущности в vt.xml определяет какие файлы будут сгенерированы.
@@ -36,6 +45,12 @@ Flags:
 - "ReadOnlyWithTemplates" - все файлы в read-only режиме, Form.vue генерироваться не будет
 - "None" - файлы генерироваться не будут
 
+#### Частичная генерация
+
+Флаги `-n --namespaces` и `-e --entities` ограничивают набор сущностей, для которых генерируются файлы. Если ни один из них не указан, обрабатываются все неймспейсы и сущности.
+
+При частичной генерации `routes.ts` обновляется точечно: перезаписываются только блоки указанных сущностей (по маркеру `/* EntityName */`), остальная часть файла сохраняется. Если целевой сущности в файле ещё нет — её блок дописывается в конец. При полной генерации (без `-n`/`-e`) `routes.ts` перезаписывается целиком.
+
 #### Особенности работы с существующими моделями
 
-Все файлы будут перезаписаны при каждой генерации.
+Файлы сущностей (`List.vue`, `Form.vue`, `MultiListFilters.vue`, переводы) перезаписываются при каждой генерации. Исключение — `routes.ts` при частичной генерации (см. выше).
diff --git a/generators/vt-template/generator.go b/generators/vt-template/generator.go
index 9239f76..80200ad 100644
--- a/generators/vt-template/generator.go
+++ b/generators/vt-template/generator.go
@@ -121,23 +121,27 @@ func (g *Generator) Generate() error {
 		g.options.Namespaces = project.NamespaceNames
 	}
 
+	// selecting built-in templates set based on the project-level setting:
+	// composition (VTComposition=true) or default class-based templates
+	defRoutes, defList, defFilter, defForm := g.defaultTemplates(project.VTComposition)
+
 	// loading templates
-	routesTemplate, err := mfd.LoadTemplate(g.options.RoutesTemplatePath, routesDefaultTemplate)
+	routesTemplate, err := mfd.LoadTemplate(g.options.RoutesTemplatePath, defRoutes)
 	if err != nil {
 		return fmt.Errorf("load routes template, err=%w", err)
 	}
 
-	listTemplate, err := mfd.LoadTemplate(g.options.ListTemplatePath, listDefaultTemplate)
+	listTemplate, err := mfd.LoadTemplate(g.options.ListTemplatePath, defList)
 	if err != nil {
 		return fmt.Errorf("load list template, err=%w", err)
 	}
 
-	filterTemplate, err := mfd.LoadTemplate(g.options.FiltersTemplatePath, filterDefaultTemplate)
+	filterTemplate, err := mfd.LoadTemplate(g.options.FiltersTemplatePath, defFilter)
 	if err != nil {
 		return fmt.Errorf("load filter template, err=%w", err)
 	}
 
-	formTemplate, err := mfd.LoadTemplate(g.options.ListTemplatePath, formDefaultTemplate)
+	formTemplate, err := mfd.LoadTemplate(g.options.FormTemplatePath, defForm)
 	if err != nil {
 		return fmt.Errorf("load form template, err=%w", err)
 	}
@@ -201,6 +205,18 @@ func (g *Generator) Generate() error {
 	return mfd.SaveMFD(g.options.MFDPath, project)
 }
 
+// defaultTemplates returns the built-in templates set used as fallback when no
+// custom template path is provided. When composition is true (driven by the
+// project-level VTComposition setting) it returns the Vue Composition API
+// templates, otherwise the default class-based ones.
+func (g *Generator) defaultTemplates(composition bool) (routes, list, filter, form string) {
+	if composition {
+		return routesCompositionTemplate, listCompositionTemplate, filterCompositionTemplate, formCompositionTemplate
+	}
+
+	return routesDefaultTemplate, listDefaultTemplate, filterDefaultTemplate, formDefaultTemplate
+}
+
 func (g *Generator) getTargetEntities(project *mfd.Project) []string {
 	var targetEntities []string
 	nsList := g.options.Namespaces
diff --git a/generators/vt-template/generator_test.go b/generators/vt-template/generator_test.go
index bf7727b..d7984ba 100644
--- a/generators/vt-template/generator_test.go
+++ b/generators/vt-template/generator_test.go
@@ -8,17 +8,24 @@ import (
 	"testing"
 
 	"github.com/vmkteam/mfd-generator/generators/testdata"
+	"github.com/vmkteam/mfd-generator/mfd"
 
 	. "github.com/smartystreets/goconvey/convey"
 )
 
 func TestGenerator_Generate(t *testing.T) {
+	// clean up leftover output from previous runs so partial routes injection starts fresh
+	_ = os.RemoveAll(testdata.PathActualVTTemplateAll)
+	_ = os.RemoveAll(testdata.PathActualVTTemplateEntity)
+
 	Convey("TestGenerator_Generate", t, func() {
 		generator := New()
 
 		generator.options.Output = testdata.PathActualVTTemplateAll
 		generator.options.MFDPath = testdata.PathExpectedMFD
 		generator.options.Namespaces = []string{"portal"}
+		// expected testdata is generated with default class-based templates
+		// (project mfd has no VTComposition setting)
 
 		Convey("Check correct generate", func() {
 			t.Log("Generate vt-template")
@@ -105,6 +112,68 @@ func TestGenerator_Generate(t *testing.T) {
 	})
 }
 
+func TestGenerator_GenerateComposition(t *testing.T) {
+	// clean up leftover output from previous runs so partial routes injection starts fresh
+	_ = os.RemoveAll(testdata.PathActualVTTemplateComposition)
+
+	// build a temp mfd with the project-level VTComposition setting enabled,
+	// placed next to the translation files so they still resolve
+	project, err := mfd.LoadProject(testdata.PathExpectedMFD, false, 0)
+	if err != nil {
+		t.Fatal(err)
+	}
+	project.VTComposition = true
+	compositionMFD := filepath.Join(filepath.Dir(testdata.PathExpectedMFD), "newsportal.composition.mfd")
+	if err := mfd.SaveMFD(compositionMFD, project); err != nil {
+		t.Fatal(err)
+	}
+	t.Cleanup(func() { _ = os.Remove(compositionMFD) })
+
+	Convey("TestGenerator_GenerateComposition", t, func() {
+		generator := New()
+
+		generator.options.Output = testdata.PathActualVTTemplateComposition
+		// composition templates are selected via the project-level VTComposition setting
+		generator.options.MFDPath = compositionMFD
+		generator.options.Namespaces = []string{"portal"}
+
+		Convey("Check correct generate with composition templates", func() {
+			t.Log("Generate vt-template with composition templates")
+			So(generator.Generate(), ShouldBeNil)
+		})
+
+		filePrefix := filepath.Join("src", "pages", "Entity")
+
+		Convey("Check generated composition files", func() {
+			expectedFilenames := map[string]struct{}{
+				filepath.Join("Category", "List.vue"):                           {},
+				filepath.Join("Category", "Form.vue"):                           {},
+				filepath.Join("Category", "en.json"):                            {},
+				filepath.Join("Category", "components", "MultiListFilters.vue"): {},
+				filepath.Join("News", "List.vue"):                               {},
+				filepath.Join("News", "Form.vue"):                               {},
+				filepath.Join("News", "en.json"):                                {},
+				filepath.Join("News", "components", "MultiListFilters.vue"):     {},
+				filepath.Join("Tag", "List.vue"):                                {},
+				filepath.Join("Tag", "Form.vue"):                                {},
+				filepath.Join("Tag", "en.json"):                                 {},
+				filepath.Join("Tag", "components", "MultiListFilters.vue"):      {},
+				"routes.ts": {},
+			}
+
+			for f := range expectedFilenames {
+				filenameWithFullPath := filepath.Join(testdata.PathActualVTTemplateComposition, filePrefix, f)
+				t.Logf("Check %s file", filenameWithFullPath)
+				content, err := os.ReadFile(filenameWithFullPath)
+				So(err, ShouldBeNil)
+				expectedContent, err := os.ReadFile(filepath.Join(testdata.PathExpectedVTTemplateComposition, filePrefix, f))
+				So(err, ShouldBeNil)
+				So(string(content), ShouldResemble, string(expectedContent))
+			}
+		})
+	})
+}
+
 func fullFilesPaths(path string) ([]string, error) {
 	files, err := os.ReadDir(path)
 	if err != nil {
diff --git a/generators/vt-template/template.go b/generators/vt-template/template.go
index 1d89d0b..10912aa 100644
--- a/generators/vt-template/template.go
+++ b/generators/vt-template/template.go
@@ -2,37 +2,34 @@ package vttmpl
 
 const routesDefaultTemplate = `/* eslint-disable */
 export default [{{range $model := .Entities}}
-    /* {{.Name}} */
-    {
-        name: "{{.JSName}}List",
-        path: "/{{.TerminalPath}}",
-        component: () =>
-            import("@/pages/Entity/{{.Name}}/List.vue"),
-        meta: {
-            title: "{{.Name}}List",
-            breadcrumbs: ["dashboard", "{{.JSName}}List"]
-        }
-    },
-    {{if not .ReadOnly}}{
-        name: "{{.JSName}}Edit",
-        path: "/{{.TerminalPath}}/:id/edit",
-        component: () =>
-            import("@/pages/Entity/{{.Name}}/Form.vue"),
-        meta: {
-            title: "{{.Name}}Edit",
-            breadcrumbs: ["dashboard", "{{.JSName}}List", "{{.JSName}}Edit"]
-        }
-    },
-    {
-        name: "{{.JSName}}Add",
-        path: "/{{.TerminalPath}}/add",
-        component: () =>
-            import("@/pages/Entity/{{.Name}}/Form.vue"),
-        meta: {
-            title: "{{.Name}}Add",
-            breadcrumbs: ["dashboard", "{{.JSName}}List", "{{.JSName}}Add"]
-        }
-    },{{end}}{{end}}
+  /* {{.Name}} */
+  {
+    name: "{{.JSName}}List",
+    path: "/{{.TerminalPath}}",
+    component: () =>
+      import("@/pages/Entity/{{.Name}}/List.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "{{.JSName}}List"]
+    }
+  },
+  {{if not .ReadOnly}}{
+    name: "{{.JSName}}Edit",
+    path: "/{{.TerminalPath}}/:id/edit",
+    component: () =>
+      import("@/pages/Entity/{{.Name}}/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "{{.JSName}}List", "{{.JSName}}Edit"]
+    }
+  },
+  {
+    name: "{{.JSName}}Add",
+    path: "/{{.TerminalPath}}/add",
+    component: () =>
+      import("@/pages/Entity/{{.Name}}/Form.vue"),
+    meta: {
+      breadcrumbs: ["dashboard", "{{.JSName}}List", "{{.JSName}}Add"]
+    }
+  },{{end}}{{end}}
 ];
 `
 
@@ -57,26 +54,27 @@ const listDefaultTemplate = `<template>
               <v-flex>
                 <v-layout align-center>
                   <h2 class="ellipsed mr-1">
-                    {{ t("[[.JSName]].list.title") }}
+                    {{ $t("[[.JSName]].list.title") }}
                   </h2>
                   <span
-                    v-if="pagination.totalItems"
+                    v-if="store.pagination.totalItems"
                     class="text--secondary subtitle-2"
                   >
-                    {{ pagination.totalItems }}
+                    {{ store.pagination.totalItems }}
                   </span>
                 </v-layout>
               </v-flex>
               <v-spacer />
               <v-flex shrink>
                 [[if not .ReadOnly]]<v-btn
-                  small
                   dark
                   color="success"
                   :to="{ name: '[[.JSName]]Add' }"
                 >
-                  <v-icon>add</v-icon>
-                  {{ t("common.list.addNewLabel") }}
+                  <v-icon left>
+                    add
+                  </v-icon>
+                  {{ $t("common.list.addNewLabel") }}
                 </v-btn>[[end]]
               </v-flex>
             </v-layout>
@@ -102,9 +100,9 @@ const listDefaultTemplate = `<template>
                     mr-sm-2
                   >
                     <v-text-field
-                      v-model="filters.[[.TitleField]]"
+                      v-model="store.filters.[[.TitleField]]"
                       :placeholder="
-                        t('[[.JSName]].list.filter.quickFilterPlaceholder')
+                        $t('[[.JSName]].list.filter.quickFilterPlaceholder')
                       "
                       hide-details
                       @keyup.enter.native="submitFilters()"
@@ -116,10 +114,9 @@ const listDefaultTemplate = `<template>
                     mr-sm-10
                   >
                     <multi-filters
-                      :filters="filters"
-                      :active-filters="activeFilters"
+                      :filters="store.filters"
+                      :active-filters="store.activeFilters"
                       @submitFilters="submitFilters"
-                      @update:filters="updateFilters"
                     />
                   </v-flex>[[end]]
                   <v-flex
@@ -127,8 +124,8 @@ const listDefaultTemplate = `<template>
                     mt-sm-4
                   >
                     <vt-compact-pagination
-                      :value="pagination.page"
-                      :total-pages="pagination.totalPages"
+                      :value="store.pagination.page"
+                      :total-pages="store.pagination.totalPages"
                       @input="setCompactPagination"
                     />
                   </v-flex>
@@ -139,9 +136,9 @@ const listDefaultTemplate = `<template>
               <v-data-table
                 v-model="selected"
                 :headers="headers"
-                :items="list"
-                :options="vuetifyTableOptions"
-                :server-items-length="pagination.totalItems"
+                :items="store.list"
+                :options="store.vuetifyTableOptions"
+                :server-items-length="store.pagination.totalItems"
                 item-key="[[range .PKs]][[.JSName]][[end]]"
                 :footer-props="{
                   itemsPerPageOptions: [10, 25, 50, 100, 500]
@@ -155,7 +152,7 @@ const listDefaultTemplate = `<template>
                   }
                 ]"
                 :show-select="false"
-                :loading="isLoading"
+                :loading="store.isLoading"
                 fixed-header
                 @update:options="setPagination"
               >[[range .ListColumns]][[if eq .JSName "statusId"]]
@@ -204,45 +201,34 @@ const listDefaultTemplate = `<template>
 </template>
 
 [[raw "<"]]script lang="ts">
-import { computed, defineComponent } from 'vue';
-import { [[.Name]]Summary, [[.Name]]Search } from '@/services/api/factory';
-import { useEntityList } from '@/composables/useEntityList';
-import { useI18n } from '@/composables/useI18n';
-
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
+import EntityList from '@/common/Entity/EntityList';
+import Store from '@/common/Entity/EntityCollectionStore';
+import {
+  [[.Name]]Summary as Model,
+  [[.Name]]Search as SearchModel
+} from '@/services/api/factory';
 import MultiFilters from './components/MultiListFilters.vue';
 
-export default defineComponent({
-  // eslint-disable-next-line vue/multi-word-component-names
+@Observer
+@Component({
   name: 'List',
-  components: { MultiFilters },
-
-  setup () {
-    const { t } = useI18n();
-
-    const {
-      selected,
-      pagination,
-      filters,
-      activeFilters,
-      list,
-      isLoading,
-      vuetifyTableOptions,
-      deleteItem,
-      submitFilters,
-      setCompactPagination,
-      setPagination,
-      updateFilters
-    } = useEntityList([[.Name]]Summary, [[.Name]]Search);
+  components: { MultiFilters }
+})
+export default class List extends EntityList {
+  store: Store = new Store(Model, SearchModel);
 
-    const headers = computed(() => [
+  get headers () {
+    return [
       [[range $i, $e := .ListColumns]][[if ne $i 0]]
       },
       [[end]]{[[if eq .JSName "statusId"]]
-        text: t('[[$.JSName]].list.headers.status'),
+        text: this.$t('[[$.JSName]].list.headers.status'),
         value: 'status',
         sortable: false
       [[- else ]]
-        text: t('[[$.JSName]].list.headers.[[.JSName]]'),
+        text: this.$t('[[$.JSName]].list.headers.[[.JSName]]'),
         value: '[[.JSName]]'[[if eq $i 0]],
         align: 'left'[[end]][[if not .IsSortable]],
         sortable: false[[end]][[end]][[end]]
@@ -251,71 +237,37 @@ export default defineComponent({
       [[- else ]]
       },
       {
-        text: t('[[$.JSName]].list.headers.actions'),
+        text: this.$t('[[$.JSName]].list.headers.actions'),
         value: 'id',
         sortable: false
       }[[end]]
-    ]);
-
-    return {
-      t,
-      selected,
-      pagination,
-      filters,
-      activeFilters,
-      list,
-      isLoading,
-      vuetifyTableOptions,
-      deleteItem,
-      submitFilters,
-      setCompactPagination,
-      setPagination,
-      updateFilters,
-      headers
-    };
+    ];
   }
-});
+}
 </script>
 
 <style lang="scss"></style>
 `
 
 const filterDefaultTemplate = `<template>
-  <vt-new-multi-filter
+  <vt-multi-filter
     :items="filterItems"
     :filters="filters"
     autofocus
-    :label="t('common.list.filter.title')"
+    :label="$t('common.list.filter.title')"
     @submitFilters="$emit('submitFilters')"
-    @update:filters="$emit('update:filters', $event)"
   />
 </template>
 
 <script lang="ts">
-import { IFilterItem } from '@/common/MultiFilter/types';
-import { useI18n } from '@/composables/useI18n';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'MultiListFilters',
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
+import EntityListFilters from '@/common/Entity/EntityListFilters';
 
-  props: {
-    filters: {
-      type: Object,
-      required: true
-    },
-    activeFilters: {
-      type: Object,
-      required: true
-    }
-  },
-
-  emits: ['submitFilters', 'update:filters'],
-
-  setup () {
-    const { t } = useI18n();
-
-    const filterItems = [
+@Observer
+@Component
+export default class MultiListFilters extends EntityListFilters {
+  filterItems = [
 [[- $filtersLen := len .FilterColumns ]]
 [[- range $i, $e := .FilterColumns ]]
     [[- if (isLast $i $filtersLen) ]]
@@ -326,7 +278,7 @@ export default defineComponent({
     {
       id: '[[ .JSName ]]',
       type: '[[ .SearchType ]]',
-      title: t('[[ $.JSName ]].list.filter.[[ .JSName ]]'),
+      title: this.$t('[[ $.JSName ]].list.filter.[[ .JSName ]]'),
       value: [[ if .IsCheckBox ]]true[[ else ]]null[[ end ]],
       values: null,
       settings: {
@@ -355,14 +307,8 @@ export default defineComponent({
       }
     }[[ if (notLast $i $filtersLen) ]],[[ end ]]
 [[- end ]]
-  ].filter(Boolean) as IFilterItem[];
-
-    return {
-      t,
-      filterItems
-    };
-  }
-});
+  ].filter(Boolean)
+}
 </script>
 `
 
@@ -383,7 +329,7 @@ const formDefaultTemplate = `<template>
         >
           <v-flex>
             <h2 class="ellipsed">
-              {{ model.[[.TitleField]] || "..." }}
+              {{ store.model.[[.TitleField]] || "..." }}
             </h2>
           </v-flex>
           <v-spacer />
@@ -391,7 +337,7 @@ const formDefaultTemplate = `<template>
             <v-btn
               text
               color="primary"
-              :disabled="isLoading"
+              :disabled="store.isLoading"
               @click.stop="navigateBack"
             >
               <v-icon
@@ -400,7 +346,7 @@ const formDefaultTemplate = `<template>
                 arrow_back
               </v-icon>
               <template v-if="!$vuetify.breakpoint.xsOnly">
-                {{ t("common.form.cancelButtonLabel") }}
+                {{ $t("common.form.cancelButtonLabel") }}
               </template>
             </v-btn>
             <v-hover
@@ -429,7 +375,7 @@ const formDefaultTemplate = `<template>
             Основные
           </v-tab>
         </v-tabs>
-        <v-card v-if="model">
+        <v-card v-if="store.model">
           <v-form
             ref="form"
             @submit.prevent="onSaveAndBack"
@@ -438,26 +384,26 @@ const formDefaultTemplate = `<template>
               <v-tabs-items v-model="tab">
                 <v-tab-item eager>
                   [[raw "<!--  generated part -->"]]
-                  [[range .FormColumns]][[if .IsCheckBox]]<vt-form-field v-model="model.[[.JSName]]">
+                  [[range .FormColumns]][[if .IsCheckBox]]<vt-form-field v-model="store.model.[[.JSName]]">
 					<template #component-slot>
 	                  [[raw "<v-checkbox"]]
-	                    v-model="model.[[.JSName]]"
-						[[raw ":error-messages="]]"getErrorMessage(errors.[[.JSName]])"
-                    	:disabled="isLoading"
-						:label="t('[[$.JSName]].form.[[.JSName]]Label')"
+	                    v-model="store.model.[[.JSName]]"
+						[[raw ":error-messages="]]"$t(i18nFieldError(store.errors.[[.JSName]]))"
+                    	:disabled="store.isLoading"
+						:label="$t('[[$.JSName]].form.[[.JSName]]Label')"
 						color="primary"
 	                  />
 					</template>
                   </vt-form-field>
                   [[else]][[raw "<vt-form-field"]]
-                    v-model="model.[[.JSName]]"[[if .IsFK]]
+                    v-model="store.model.[[.JSName]]"[[if .IsFK]]
                     entity="[[ .FKJSName | ToLower ]]"
                     search-by="[[.FKJSSearch]]"
                     prefetch[[end]]
                     component="[[.Component]]"
-                    :label="t('[[$.JSName]].form.[[.JSName]]Label')"
-                    :error-messages="getErrorMessage(errors.[[.JSName]])"
-                    :disabled="isLoading"
+                    :label="$t('[[$.JSName]].form.[[.JSName]]Label')"
+                    :error-messages="$t(i18nFieldError(store.errors.[[.JSName]]))"
+                    :disabled="store.isLoading"
                     placeholder=""[[if .Required]]
                     required[[else]]
                     clearable[[end]][[if eq .Component "vt-datetime-picker"]]
@@ -478,21 +424,21 @@ const formDefaultTemplate = `<template>
                     <v-btn
                       type="submit"
                       color="success"
-                      :disabled="!isChanged || isLoading"
-                      :loading="isLoading"
+                      :disabled="!store.isChanged || store.isLoading"
+                      :loading="store.isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="!$vuetify.breakpoint.xsOnly && 'mx-2'"
                     >
                       <v-icon left>
                         done
                       </v-icon>
-                      {{ t("common.form.saveAndCloseButtonLabel") }}
+                      {{ $t("common.form.saveAndCloseButtonLabel") }}
                     </v-btn>
 
                     <v-btn
                       v-if="$route.params.id"
-                      :disabled="!isChanged || isLoading"
-                      :loading="isLoading"
+                      :disabled="!store.isChanged || store.isLoading"
+                      :loading="store.isLoading"
                       :block="$vuetify.breakpoint.xsOnly"
                       :class="[
                         $vuetify.breakpoint.xsOnly && 'ml-0 mt-2',
@@ -502,7 +448,7 @@ const formDefaultTemplate = `<template>
                       color="accent"
                       @click.stop="onSave"
                     >
-                      {{ t("common.form.saveButtonLabel") }}
+                      {{ $t("common.form.saveButtonLabel") }}
                     </v-btn>
                     <v-spacer />
                   </v-layout>
@@ -517,58 +463,17 @@ const formDefaultTemplate = `<template>
 </template>
 
 [[raw "<script"]] lang="ts">
-import { useEntityForm } from '@/composables/useEntityForm';
-import { useI18n } from '@/composables/useI18n'
+import { Component } from 'vue-property-decorator';
+import { Observer } from 'mobx-vue';
 import { [[.Name]] as Model } from '@/services/api/factory';
-import { defineComponent } from 'vue';
+import Store from '@/common/Entity/EntityModelStore';
+import EntityForm from '@/common/Entity/EntityForm';
 
-export default defineComponent({
-  // eslint-disable-next-line vue/match-component-file-name
-  name: '[[.Name]]Form',
-
-  setup () {
-    const { t } = useI18n();
-
-    const {
-      tab,
-      form,
-      model,
-      errors,
-      isLoading,
-      isChanged,
-      i18nFieldError,
-      tabsHasError,
-
-      onSave,
-      onDelete,
-      navigateBack,
-      onSaveAndBack
-    } = useEntityForm<Model>({ Model} );
-
-	const getErrorMessage = (errorKey: string | null): string => {
-      const errorMessage = i18nFieldError(errorKey);
-      return errorMessage ? t(errorMessage) : '';
-    };
-
-    return {
-      t,
-      tab,
-      form,
-      model,
-      errors,
-      isLoading,
-      isChanged,
-      i18nFieldError,
-      tabsHasError,
-      getErrorMessage,
-
-      onSave,
-      onDelete,
-      navigateBack,
-      onSaveAndBack
-    };
-  }
-});
+@Observer
+@Component
+export default class Form extends EntityForm {
+  store: Store<Model> = new Store<Model>(Model);
+}
 </script>
 
 <style scoped></style>
diff --git a/generators/vt-template/template_composition.go b/generators/vt-template/template_composition.go
new file mode 100644
index 0000000..442d4bc
--- /dev/null
+++ b/generators/vt-template/template_composition.go
@@ -0,0 +1,575 @@
+package vttmpl
+
+const routesCompositionTemplate = `/* eslint-disable */
+export default [{{range $model := .Entities}}
+    /* {{.Name}} */
+    {
+        name: "{{.JSName}}List",
+        path: "/{{.TerminalPath}}",
+        component: () =>
+            import("@/pages/Entity/{{.Name}}/List.vue"),
+        meta: {
+            title: "{{.Name}}List",
+            breadcrumbs: ["dashboard", "{{.JSName}}List"]
+        }
+    },
+    {{if not .ReadOnly}}{
+        name: "{{.JSName}}Edit",
+        path: "/{{.TerminalPath}}/:id/edit",
+        component: () =>
+            import("@/pages/Entity/{{.Name}}/Form.vue"),
+        meta: {
+            title: "{{.Name}}Edit",
+            breadcrumbs: ["dashboard", "{{.JSName}}List", "{{.JSName}}Edit"]
+        }
+    },
+    {
+        name: "{{.JSName}}Add",
+        path: "/{{.TerminalPath}}/add",
+        component: () =>
+            import("@/pages/Entity/{{.Name}}/Form.vue"),
+        meta: {
+            title: "{{.Name}}Add",
+            breadcrumbs: ["dashboard", "{{.JSName}}List", "{{.JSName}}Add"]
+        }
+    },{{end}}{{end}}
+];
+`
+
+// fuck backtick js
+const listCompositionTemplate = `<template>
+  <vt-entity-view>
+    <v-layout
+      align-start
+      justify-center
+    >
+      <v-flex column>
+        <v-layout justify-center>
+          <v-flex
+            xs12
+            md8
+          >
+            <v-layout
+              align-center
+              mb-2
+              wrap
+            >
+              <v-flex>
+                <v-layout align-center>
+                  <h2 class="ellipsed mr-1">
+                    {{ t("[[.JSName]].list.title") }}
+                  </h2>
+                  <span
+                    v-if="pagination.totalItems"
+                    class="text--secondary subtitle-2"
+                  >
+                    {{ pagination.totalItems }}
+                  </span>
+                </v-layout>
+              </v-flex>
+              <v-spacer />
+              <v-flex shrink>
+                [[if not .ReadOnly]]<v-btn
+                  small
+                  dark
+                  color="success"
+                  :to="{ name: '[[.JSName]]Add' }"
+                >
+                  <v-icon>add</v-icon>
+                  {{ t("common.list.addNewLabel") }}
+                </v-btn>[[end]]
+              </v-flex>
+            </v-layout>
+          </v-flex>
+        </v-layout>
+
+        [[raw "<!-- Complex Table -->"]]
+        <v-layout justify-center>
+          <v-flex shrink>
+            <v-card>
+              [[raw "<!-- Quick filter, chips -->"]]
+              <v-card-title class="pt-0">
+                <v-layout
+                  justify-space-between
+                  align-end
+                  wrap
+                  class="flex-sm-nowrap"
+                >[[if .HasQuickFilter]]
+                  <v-flex
+                    xs12
+                    sm4
+                    md3
+                    mr-sm-2
+                  >
+                    <v-text-field
+                      v-model="filters.[[.TitleField]]"
+                      :placeholder="
+                        t('[[.JSName]].list.filter.quickFilterPlaceholder')
+                      "
+                      hide-details
+                      @keyup.enter.native="submitFilters()"
+                    />
+                  </v-flex>
+                  <v-flex
+                    xs12
+                    ml-sm-10
+                    mr-sm-10
+                  >
+                    <multi-filters
+                      :filters="filters"
+                      :active-filters="activeFilters"
+                      @submitFilters="submitFilters"
+                      @update:filters="updateFilters"
+                    />
+                  </v-flex>[[end]]
+                  <v-flex
+                    v-if="$vuetify.breakpoint.smAndUp"
+                    mt-sm-4
+                  >
+                    <vt-compact-pagination
+                      :value="pagination.page"
+                      :total-pages="pagination.totalPages"
+                      @input="setCompactPagination"
+                    />
+                  </v-flex>
+                </v-layout>
+              </v-card-title>
+
+              [[raw "<!-- Table -->"]]
+              <v-data-table
+                v-model="selected"
+                :headers="headers"
+                :items="list"
+                :options="vuetifyTableOptions"
+                :server-items-length="pagination.totalItems"
+                item-key="[[range .PKs]][[.JSName]][[end]]"
+                :footer-props="{
+                  itemsPerPageOptions: [10, 25, 50, 100, 500]
+                }"
+                :class="[
+                  'data-table-wrapper-sticky-fix',
+                  {
+                    'min-width-table': $vuetify.breakpoint.mdAndUp,
+                    'min-width-table-full': $vuetify.breakpoint.smAndDown,
+                    smAndDown: $vuetify.breakpoint.smAndDown
+                  }
+                ]"
+                :show-select="false"
+                :loading="isLoading"
+                fixed-header
+                @update:options="setPagination"
+              >[[range .ListColumns]][[if eq .JSName "statusId"]]
+                <template #item.status="{ item }">
+                  <span class="text-no-wrap">
+                    <vt-status-badge
+                      v-model="item.status"
+                      small
+                    />
+                  </span>
+                </template>[[else]]
+                [[raw "<"]]template #item.[[.JSName]]="{ item }">[[if .IsBool]]
+                  <vt-boolean-badge
+                    :value="item.[[.JSName]]"
+                    small
+                  />[[else]][[if .EditLink]]
+                  <router-link
+                    :to="{ name: '[[$.JSName]]Edit', params: { [[range $.PKs]]id: item.[[.JSName]][[end]] } }"
+                    class="font-weight-medium"
+                  >[[end]]
+                  [[if .EditLink]]  [[end]]{{ item.[[.JSName]][[if .HasPipe]] | [[.Pipe]][[end]] }}[[end]][[if .EditLink]]
+                  </router-link>[[end]]
+                </template>[[end]][[end]][[if not $.ReadOnly]]
+                <template #item.[[range $.PKs]][[.JSName]]="{ item }"[[end]]>
+                  <span class="text-no-wrap">
+                    <v-hover v-slot="{ hover }">
+                      <v-btn
+                        text
+                        dark
+                        icon
+                        :color="hover ? 'red' : 'grey'"
+                        @click="deleteItem(item, '[[.TitleField]]')"
+                      >
+                        <v-icon small>delete</v-icon>
+                      </v-btn>
+                    </v-hover>
+                  </span>
+                </template>[[end]]
+              </v-data-table>
+            </v-card>
+          </v-flex>
+        </v-layout>
+      </v-flex>
+    </v-layout>
+  </vt-entity-view>
+</template>
+
+[[raw "<"]]script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { [[.Name]]Summary, [[.Name]]Search } from '@/services/api/factory';
+import { useEntityList } from '@/composables/useEntityList';
+import { useI18n } from '@/composables/useI18n';
+
+import MultiFilters from './components/MultiListFilters.vue';
+
+export default defineComponent({
+  // eslint-disable-next-line vue/multi-word-component-names
+  name: 'List',
+  components: { MultiFilters },
+
+  setup () {
+    const { t } = useI18n();
+
+    const {
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters
+    } = useEntityList([[.Name]]Summary, [[.Name]]Search);
+
+    const headers = computed(() => [
+      [[range $i, $e := .ListColumns]][[if ne $i 0]]
+      },
+      [[end]]{[[if eq .JSName "statusId"]]
+        text: t('[[$.JSName]].list.headers.status'),
+        value: 'status',
+        sortable: false
+      [[- else ]]
+        text: t('[[$.JSName]].list.headers.[[.JSName]]'),
+        value: '[[.JSName]]'[[if eq $i 0]],
+        align: 'left'[[end]][[if not .IsSortable]],
+        sortable: false[[end]][[end]][[end]]
+      [[- if $.ReadOnly ]]
+      }
+      [[- else ]]
+      },
+      {
+        text: t('[[$.JSName]].list.headers.actions'),
+        value: 'id',
+        sortable: false
+      }[[end]]
+    ]);
+
+    return {
+      t,
+      selected,
+      pagination,
+      filters,
+      activeFilters,
+      list,
+      isLoading,
+      vuetifyTableOptions,
+      deleteItem,
+      submitFilters,
+      setCompactPagination,
+      setPagination,
+      updateFilters,
+      headers
+    };
+  }
+});
+</script>
+
+<style lang="scss"></style>
+`
+
+const filterCompositionTemplate = `<template>
+  <vt-new-multi-filter
+    :items="filterItems"
+    :filters="filters"
+    autofocus
+    :label="t('common.list.filter.title')"
+    @submitFilters="$emit('submitFilters')"
+    @update:filters="$emit('update:filters', $event)"
+  />
+</template>
+
+<script lang="ts">
+import { IFilterItem } from '@/common/MultiFilter/types';
+import { useI18n } from '@/composables/useI18n';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'MultiListFilters',
+
+  props: {
+    filters: {
+      type: Object,
+      required: true
+    },
+    activeFilters: {
+      type: Object,
+      required: true
+    }
+  },
+
+  emits: ['submitFilters', 'update:filters'],
+
+  setup () {
+    const { t } = useI18n();
+
+    const filterItems = [
+[[- $filtersLen := len .FilterColumns ]]
+[[- range $i, $e := .FilterColumns ]]
+    [[- if (isLast $i $filtersLen) ]]
+    {
+      type: 'divider'
+    },
+    [[- end ]]
+    {
+      id: '[[ .JSName ]]',
+      type: '[[ .SearchType ]]',
+      title: t('[[ $.JSName ]].list.filter.[[ .JSName ]]'),
+      value: [[ if .IsCheckBox ]]true[[ else ]]null[[ end ]],
+      values: null,
+      settings: {
+        placeholder: '',
+        [[- if and .IsNumber ( eq .SearchType "input" ) ]]
+        type: 'number',
+        [[- end ]]
+        [[- if and (or .IsCheckBox ( eq .SearchType "select")) (not .IsFK) ]]
+        itemText: 'text',
+        itemValue: 'value',
+        [[- end ]]
+        [[- if .IsFK ]]
+        entity: '[[ .FKJSName | ToLower ]]',
+        searchBy: '[[ .FKJSSearch ]]',
+        async: true,
+        [[- end ]]
+        [[- if and .IsFK .IsArray ]]
+        multiple: true,
+        itemText: ' [[.FKJSSearch ]]',
+        searchAdditional: {},
+        [[- end ]]
+        [[- if eq .Component "vt-datetime-picker" ]]
+        iso: true,
+        [[- end ]]
+        component: '[[ .Component ]]'
+      }
+    }[[ if (notLast $i $filtersLen) ]],[[ end ]]
+[[- end ]]
+  ].filter(Boolean) as IFilterItem[];
+
+    return {
+      t,
+      filterItems
+    };
+  }
+});
+</script>
+`
+
+const formCompositionTemplate = `<template>
+  <vt-entity-view>
+    <v-layout
+      align-start
+      justify-center
+    >
+      <v-flex
+        xs12
+        md8
+        mb-2
+      >
+        <v-layout
+          mb-2
+          wrap
+        >
+          <v-flex>
+            <h2 class="ellipsed">
+              {{ model.[[.TitleField]] || "..." }}
+            </h2>
+          </v-flex>
+          <v-spacer />
+          <v-flex shrink>
+            <v-btn
+              text
+              color="primary"
+              :disabled="isLoading"
+              @click.stop="navigateBack"
+            >
+              <v-icon
+                :left="!$vuetify.breakpoint.xsOnly"
+              >
+                arrow_back
+              </v-icon>
+              <template v-if="!$vuetify.breakpoint.xsOnly">
+                {{ t("common.form.cancelButtonLabel") }}
+              </template>
+            </v-btn>
+            <v-hover
+              v-if="$route.params.id"
+              v-slot="{ hover }"
+            >
+              <v-btn
+                :color="hover ? 'error' : ''"
+                icon
+                @click.stop="onDelete('[[.TitleField]]')"
+              >
+                <v-icon>delete</v-icon>
+              </v-btn>
+            </v-hover>
+          </v-flex>
+        </v-layout>
+        <v-tabs
+          v-model="tab"
+          mobile-break-point="0"
+        >
+          <v-tab
+            :class="{
+              'error--text': tabsHasError.includes(0)
+            }"
+          >
+            Основные
+          </v-tab>
+        </v-tabs>
+        <v-card v-if="model">
+          <v-form
+            ref="form"
+            @submit.prevent="onSaveAndBack"
+          >
+            <v-card-text>
+              <v-tabs-items v-model="tab">
+                <v-tab-item eager>
+                  [[raw "<!--  generated part -->"]]
+                  [[range .FormColumns]][[if .IsCheckBox]]<vt-form-field v-model="model.[[.JSName]]">
+					<template #component-slot>
+	                  [[raw "<v-checkbox"]]
+	                    v-model="model.[[.JSName]]"
+						[[raw ":error-messages="]]"getErrorMessage(errors.[[.JSName]])"
+                    	:disabled="isLoading"
+						:label="t('[[$.JSName]].form.[[.JSName]]Label')"
+						color="primary"
+	                  />
+					</template>
+                  </vt-form-field>
+                  [[else]][[raw "<vt-form-field"]]
+                    v-model="model.[[.JSName]]"[[if .IsFK]]
+                    entity="[[ .FKJSName | ToLower ]]"
+                    search-by="[[.FKJSSearch]]"
+                    prefetch[[end]]
+                    component="[[.Component]]"
+                    :label="t('[[$.JSName]].form.[[.JSName]]Label')"
+                    :error-messages="getErrorMessage(errors.[[.JSName]])"
+                    :disabled="isLoading"
+                    placeholder=""[[if .Required]]
+                    required[[else]]
+                    clearable[[end]][[if eq .Component "vt-datetime-picker"]]
+                    iso[[end]][[range .Params]]
+                    [[.]][[end]]
+                  />[[end]][[end]][[raw "<!--  end generated part -->"]]
+                </v-tab-item>
+              </v-tabs-items>
+            </v-card-text>
+            <v-card-actions>
+              <v-layout wrap>
+                <v-flex
+                  v-if="$vuetify.breakpoint.smAndUp"
+                  xs3
+                />
+                <v-flex>
+                  <v-layout wrap>
+                    <v-btn
+                      type="submit"
+                      color="success"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
+                      :block="$vuetify.breakpoint.xsOnly"
+                      :class="!$vuetify.breakpoint.xsOnly && 'mx-2'"
+                    >
+                      <v-icon left>
+                        done
+                      </v-icon>
+                      {{ t("common.form.saveAndCloseButtonLabel") }}
+                    </v-btn>
+
+                    <v-btn
+                      v-if="$route.params.id"
+                      :disabled="!isChanged || isLoading"
+                      :loading="isLoading"
+                      :block="$vuetify.breakpoint.xsOnly"
+                      :class="[
+                        $vuetify.breakpoint.xsOnly && 'ml-0 mt-2',
+                        $vuetify.breakpoint.smAndUp && 'ml-2'
+                      ]"
+                      outlined
+                      color="accent"
+                      @click.stop="onSave"
+                    >
+                      {{ t("common.form.saveButtonLabel") }}
+                    </v-btn>
+                    <v-spacer />
+                  </v-layout>
+                </v-flex>
+              </v-layout>
+            </v-card-actions>
+          </v-form>
+        </v-card>
+      </v-flex>
+    </v-layout>
+  </vt-entity-view>
+</template>
+
+[[raw "<script"]] lang="ts">
+import { useEntityForm } from '@/composables/useEntityForm';
+import { useI18n } from '@/composables/useI18n'
+import { [[.Name]] as Model } from '@/services/api/factory';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  // eslint-disable-next-line vue/match-component-file-name
+  name: '[[.Name]]Form',
+
+  setup () {
+    const { t } = useI18n();
+
+    const {
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    } = useEntityForm<Model>({ Model} );
+
+	const getErrorMessage = (errorKey: string | null): string => {
+      const errorMessage = i18nFieldError(errorKey);
+      return errorMessage ? t(errorMessage) : '';
+    };
+
+    return {
+      t,
+      tab,
+      form,
+      model,
+      errors,
+      isLoading,
+      isChanged,
+      i18nFieldError,
+      tabsHasError,
+      getErrorMessage,
+
+      onSave,
+      onDelete,
+      navigateBack,
+      onSaveAndBack
+    };
+  }
+});
+</script>
+
+<style scoped></style>
+`
diff --git a/generators/xml/README.md b/generators/xml/README.md
index b7e7d29..a1e9f4c 100644
--- a/generators/xml/README.md
+++ b/generators/xml/README.md
@@ -53,6 +53,7 @@ Flags:
         <news>news,categories,tags</news>
     </TableMapping>
     <GoPGVer>8</GoPGVer> <!-- версия go-pg -->
+    <VTComposition>true</VTComposition> <!-- шаблоны vt: Composition API, см. генератор template -->
 </Project>
 ```
 
@@ -63,6 +64,7 @@ Flags:
   - импорты (`"github.com/go-pg/pg"` vs `"github.com/go-pg/pg/v9"` vs `"github.com/go-pg/pg/v10"`)  
   - аннотации к структурам (`sql:"title"` vs `pg:"title"`)  
   - функции (`pg.F` и `pg.Q` vs `pg.Ident` и `pg.SafeQuery`)  
+**VTComposition** - Опциональный флаг, задаёт стиль vt-шаблонов в генераторе [template](/generators/vt-template). `true` — компоненты на Vue Composition API (`defineComponent`/`setup` + composables). Если элемент отсутствует или `false` — используются default class-based шаблоны (`vue-property-decorator` + `mobx-vue`).  
 #### Namespace файл и сущности
 
 Файл с неймспейсом, содержит все входящие в него сущности. Сущности будут сгруппированы в файлы по неймспейсам и в дальнейшей генерации
diff --git a/mfd/model.go b/mfd/model.go
index 3957846..66f11ed 100644
--- a/mfd/model.go
+++ b/mfd/model.go
@@ -134,6 +134,7 @@ type Project struct {
 	NamespaceNames []string     `xml:"PackageNames>string" json:"-"`
 	Languages      []string     `xml:"Languages>string" json:"languages"`
 	GoPGVer        int          `xml:"GoPGVer" json:"goPGVer"`
+	VTComposition  bool         `xml:"VTComposition,omitempty" json:"vtComposition,omitempty"`
 	CustomTypes    CustomTypes  `xml:"CustomTypes>CustomType,omitempty" json:"customTypes,omitempty"`
 	Dictionary     *Dictionary  `xml:"Dictionary" json:"dict,omitempty"`
 	TableMapping   TableMapping `xml:"TableMapping" json:"tableMapping,omitempty"`

From e8f3e2e5a673e8d44ccdc98475f7784dc14a16c8 Mon Sep 17 00:00:00 2001
From: andrey <palchikov@uteka.ru>
Date: Mon, 3 Aug 2026 15:40:55 +0300
Subject: [PATCH 9/9] MFD-89 Depend vt model access prefix
 (store.model./model.) on VTComposition, add isolated media fixture + test

---
 generators/testdata/expected/media.vt.xml | 23 +++++++++
 generators/testdata/expected/media.xml    | 18 +++++++
 generators/vt-template/generator.go       | 10 ++--
 generators/vt-template/generator_test.go  | 59 +++++++++++++++++++++++
 generators/vt-template/vt_template.go     | 27 +++++++----
 5 files changed, 123 insertions(+), 14 deletions(-)
 create mode 100644 generators/testdata/expected/media.vt.xml
 create mode 100644 generators/testdata/expected/media.xml

diff --git a/generators/testdata/expected/media.vt.xml b/generators/testdata/expected/media.vt.xml
new file mode 100644
index 0000000..c81c585
--- /dev/null
+++ b/generators/testdata/expected/media.vt.xml
@@ -0,0 +1,23 @@
+<VTNamespace xmlns:xsi="" xmlns:xsd="">
+    <Name>media</Name>
+    <VTEntities>
+        <Entity Name="Page" Mode="Full">
+            <TerminalPath>pages</TerminalPath>
+            <Attributes>
+                <Attribute Name="ID" AttrName="ID" SearchName="ID" Summary="true" Search="true" Max="0" Min="0" Required="false" Validate=""></Attribute>
+                <Attribute Name="Title" AttrName="Title" SearchName="TitleILike" Summary="true" Search="true" Max="255" Min="0" Required="true" Validate=""></Attribute>
+                <Attribute Name="Alias" AttrName="Alias" SearchName="Alias" Summary="true" Search="false" Max="255" Min="0" Required="true" Validate=""></Attribute>
+                <Attribute Name="ImageID" AttrName="ImageID" SearchName="ImageID" Summary="true" Search="false" Max="0" Min="0" Required="true" Validate=""></Attribute>
+                <Attribute Name="StatusID" AttrName="StatusID" SearchName="StatusID" Summary="true" Search="true" Max="0" Min="0" Required="true" Validate="status"></Attribute>
+                <Attribute Name="IDs" SearchName="IDs" Summary="false" Search="true" Max="0" Min="0" Required="false" Validate=""></Attribute>
+            </Attributes>
+            <Template>
+                <Attribute Name="Title" VTAttrName="Title" List="true" Form="HTML_INPUT" Search="HTML_INPUT"></Attribute>
+                <Attribute Name="Alias" VTAttrName="Alias" List="false" Form="HTML_INPUT" Search="HTML_NONE"></Attribute>
+                <Attribute Name="Image" VTAttrName="ImageID" List="false" Form="HTML_FILE" Search="HTML_NONE"></Attribute>
+                <Attribute Name="StatusID" VTAttrName="StatusID" List="true" Form="HTML_INPUT" Search="HTML_INPUT"></Attribute>
+                <Attribute Name="IDs" VTAttrName="IDs" List="false" Form="HTML_NONE" Search="HTML_SELECT"></Attribute>
+            </Template>
+        </Entity>
+    </VTEntities>
+</VTNamespace>
diff --git a/generators/testdata/expected/media.xml b/generators/testdata/expected/media.xml
new file mode 100644
index 0000000..d362400
--- /dev/null
+++ b/generators/testdata/expected/media.xml
@@ -0,0 +1,18 @@
+<Package xmlns:xsi="" xmlns:xsd="">
+    <Name>media</Name>
+    <Entities>
+        <Entity Name="Page" Namespace="media" Table="pages">
+            <Attributes>
+                <Attribute Name="ID" DBName="pageId" DBType="int4" GoType="int" PK="true" Nullable="Yes" Addable="true" Updatable="false" Min="0" Max="0" HasDefault="true"></Attribute>
+                <Attribute Name="Title" DBName="title" DBType="varchar" GoType="string" PK="false" Nullable="No" Addable="true" Updatable="true" Min="0" Max="255"></Attribute>
+                <Attribute Name="Alias" DBName="alias" DBType="varchar" GoType="string" PK="false" Nullable="No" Addable="true" Updatable="true" Min="0" Max="255"></Attribute>
+                <Attribute Name="ImageID" DBName="imageId" DBType="int4" GoType="int" PK="false" FK="VfsFile" Nullable="No" Addable="true" Updatable="true" Min="0" Max="0"></Attribute>
+                <Attribute Name="StatusID" DBName="statusId" DBType="int4" GoType="int" PK="false" Nullable="No" Addable="true" Updatable="true" Min="0" Max="0"></Attribute>
+            </Attributes>
+            <Searches>
+                <Search Name="IDs" AttrName="ID" SearchType="SEARCHTYPE_ARRAY"></Search>
+                <Search Name="TitleILike" AttrName="Title" SearchType="SEARCHTYPE_ILIKE"></Search>
+            </Searches>
+        </Entity>
+    </Entities>
+</Package>
diff --git a/generators/vt-template/generator.go b/generators/vt-template/generator.go
index 80200ad..8149a88 100644
--- a/generators/vt-template/generator.go
+++ b/generators/vt-template/generator.go
@@ -178,17 +178,17 @@ func (g *Generator) Generate() error {
 				continue
 			}
 
-			if err := g.SaveEntity(*entity, "List.vue", listTemplate); err != nil {
+			if err := g.SaveEntity(*entity, "List.vue", listTemplate, project.VTComposition); err != nil {
 				return fmt.Errorf("generate entity %s list, err=%w", entity.Name, err)
 			}
 
-			if err := g.SaveEntity(*entity, "components/MultiListFilters.vue", filterTemplate); err != nil {
+			if err := g.SaveEntity(*entity, "components/MultiListFilters.vue", filterTemplate, project.VTComposition); err != nil {
 				return fmt.Errorf("generate entity %s filters, err=%w", entity.Name, err)
 			}
 
 			// do not generate form on
 			if entity.Mode != mfd.ModeReadOnlyWithTemplates {
-				if err := g.SaveEntity(*entity, "Form.vue", formTemplate); err != nil {
+				if err := g.SaveEntity(*entity, "Form.vue", formTemplate, project.VTComposition); err != nil {
 					return fmt.Errorf("generate entity %s form, err=%w", entity.Name, err)
 				}
 			}
@@ -244,7 +244,7 @@ func (g *Generator) getTargetEntities(project *mfd.Project) []string {
 }
 
 // SaveEntity saves vt entity to template with special delims
-func (g *Generator) SaveEntity(entity mfd.VTEntity, output, tmpl string) error {
+func (g *Generator) SaveEntity(entity mfd.VTEntity, output, tmpl string, composition bool) error {
 	parsed, err := template.New("base").
 		Delims("[[", "]]").
 		Funcs(mfd.TemplateFunctions).
@@ -253,7 +253,7 @@ func (g *Generator) SaveEntity(entity mfd.VTEntity, output, tmpl string) error {
 		return fmt.Errorf("parsing template, err=%w", err)
 	}
 
-	packed := PackEntity(entity)
+	packed := PackEntity(entity, composition)
 
 	var buffer bytes.Buffer
 	if err := parsed.ExecuteTemplate(&buffer, "base", packed); err != nil {
diff --git a/generators/vt-template/generator_test.go b/generators/vt-template/generator_test.go
index d7984ba..a132540 100644
--- a/generators/vt-template/generator_test.go
+++ b/generators/vt-template/generator_test.go
@@ -174,6 +174,65 @@ func TestGenerator_GenerateComposition(t *testing.T) {
 	})
 }
 
+func TestGenerator_ModelAccessPrefix(t *testing.T) {
+	dir := filepath.Dir(testdata.PathExpectedMFD)
+
+	// buildMediaMFD writes a temp mfd next to the media/vfs namespace files so
+	// LoadProject can resolve them; VTComposition drives the access prefix.
+	buildMediaMFD := func(composition bool) string {
+		p := mfd.NewProject("media.mfd", mfd.GoPG10)
+		p.NamespaceNames = []string{"media", "vfs"}
+		p.VTComposition = composition
+		name := "media.default.gen.mfd"
+		if composition {
+			name = "media.composition.gen.mfd"
+		}
+		mfdPath := filepath.Join(dir, name)
+		if err := mfd.SaveMFD(mfdPath, p); err != nil {
+			t.Fatal(err)
+		}
+		t.Cleanup(func() { _ = os.Remove(mfdPath) })
+		return mfdPath
+	}
+
+	generateForm := func(composition bool) (string, error) {
+		out := filepath.Join(testdata.PathActual, "vt-template", "media")
+		if composition {
+			out += "-composition"
+		}
+		_ = os.RemoveAll(out)
+
+		generator := New()
+		generator.options.Output = out
+		generator.options.MFDPath = buildMediaMFD(composition)
+		generator.options.Namespaces = []string{"media"}
+		if err := generator.Generate(); err != nil {
+			return "", err
+		}
+
+		content, err := os.ReadFile(filepath.Join(out, "src", "pages", "Entity", "Page", "Form.vue"))
+		return string(content), err
+	}
+
+	Convey("model access prefix depends on VTComposition", t, func() {
+		Convey("default class-based templates use store.model.", func() {
+			form, err := generateForm(false)
+			So(err, ShouldBeNil)
+			So(form, ShouldContainSubstring, `:value-for-transliterating="store.model.title"`)
+			So(form, ShouldContainSubstring, `:file="store.model.`)
+			So(form, ShouldNotContainSubstring, `:value-for-transliterating="model.`)
+		})
+
+		Convey("composition templates use model.", func() {
+			form, err := generateForm(true)
+			So(err, ShouldBeNil)
+			So(form, ShouldContainSubstring, `:value-for-transliterating="model.title"`)
+			So(form, ShouldContainSubstring, `:file="model.`)
+			So(form, ShouldNotContainSubstring, `store.model.`)
+		})
+	})
+}
+
 func fullFilesPaths(path string) ([]string, error) {
 	files, err := os.ReadDir(path)
 	if err != nil {
diff --git a/generators/vt-template/vt_template.go b/generators/vt-template/vt_template.go
index ced2534..8c85264 100644
--- a/generators/vt-template/vt_template.go
+++ b/generators/vt-template/vt_template.go
@@ -25,8 +25,9 @@ type EntityData struct {
 	FormColumns   []InputData
 }
 
-// PackEntity packs mfd vt entity to template data
-func PackEntity(vtEntity mfd.VTEntity) EntityData {
+// PackEntity packs mfd vt entity to template data.
+// composition is forwarded to PackInput to select the model access prefix.
+func PackEntity(vtEntity mfd.VTEntity, composition bool) EntityData {
 	pks := vtEntity.Entity.PKs()
 	pkPairs := make([]PKPair, len(pks))
 	for i := range pks {
@@ -50,10 +51,10 @@ func PackEntity(vtEntity mfd.VTEntity) EntityData {
 			tmpl.ListColumns = append(tmpl.ListColumns, PackAttribute(vtEntity, *attr))
 		}
 		if attr.Search != mfd.TypeHTMLNone && attr.Search != "" {
-			tmpl.FilterColumns = append(tmpl.FilterColumns, PackInput(*attr, vtEntity, true))
+			tmpl.FilterColumns = append(tmpl.FilterColumns, PackInput(*attr, vtEntity, true, composition))
 		}
 		if attr.Form != mfd.TypeHTMLNone && attr.Form != "" {
-			tmpl.FormColumns = append(tmpl.FormColumns, PackInput(*attr, vtEntity, false))
+			tmpl.FormColumns = append(tmpl.FormColumns, PackInput(*attr, vtEntity, false, composition))
 		}
 	}
 
@@ -123,8 +124,16 @@ type InputData struct {
 	Params     []template.HTML
 }
 
-// PackInput packs mfd tmpl attribute to template input data
-func PackInput(tmpl mfd.TmplAttribute, vtEntity mfd.VTEntity, isSearch bool) InputData {
+// PackInput packs mfd tmpl attribute to template input data.
+// composition selects the model access prefix: "model." for Composition API
+// templates (destructured from useEntityForm) or "store.model." for the default
+// class-based templates (mobx store).
+func PackInput(tmpl mfd.TmplAttribute, vtEntity mfd.VTEntity, isSearch, composition bool) InputData {
+	modelPrefix := template.HTML("store.model.")
+	if composition {
+		modelPrefix = "model."
+	}
+
 	inp := InputData{
 		JSName:    mfd.VarName(tmpl.Name),
 		Component: filterComponent(tmpl.Search, isSearch),
@@ -164,7 +173,7 @@ func PackInput(tmpl mfd.TmplAttribute, vtEntity mfd.VTEntity, isSearch bool) Inp
 			trasliteratingValue := template.HTML(mfd.VarName(title.Name))
 
 			inp.Component = "vt-transliterator"
-			inp.Params = append(inp.Params, `:value-for-transliterating="model.`+trasliteratingValue+`"`)
+			inp.Params = append(inp.Params, `:value-for-transliterating="`+modelPrefix+trasliteratingValue+`"`)
 		}
 	}
 
@@ -178,8 +187,8 @@ func PackInput(tmpl mfd.TmplAttribute, vtEntity mfd.VTEntity, isSearch bool) Inp
 			inp.IsFK = false
 			inp.FKJSName = mfd.VarName(mfd.FKName(tmpl.AttrName))
 			inp.FKJSSearch = mfd.VarName(tmpl.FKOpts)
-			inp.Params = append(inp.Params, `:file="store.model.`+template.HTML(inp.FKJSName)+`"
-                    @input:file="file => store.model.`+template.HTML(inp.FKJSName)+` = file"`)
+			inp.Params = append(inp.Params, `:file="`+modelPrefix+template.HTML(inp.FKJSName)+`"
+                    @input:file="file => `+modelPrefix+template.HTML(inp.FKJSName)+` = file"`)
 		} else if attr.ForeignKey != "" {
 			inp.Component = "vt-entity-autocomplete"
 			inp.IsFK = true