How to mock data with mocks-server and use mvc pattern in nuxtjs

Some week ago I start write new admin panel for some service with nuxtjs and we decide to use "mvc" pattern on frontend without using vuex, for mocking data we use - "@mocks-server/main": "^2.1.0".
So, here we go? 1st of all create api folder in our project. In api folder create schema folder, for schemas for data.
For example

//src/api/schemas/entity.schema.ts

export default class Entity {
	someProp: someType
	someProp2: someType2
	someProp3: someType3
	constructor(params: Entity) {
        this.someProp = params.someProp
		this.someProp2 = params.someProp2
        this.someProp3 = params.someProp3
    }
}

In api folder create dto folder

//src/api/dto/entity.dto.ts

import Entity from '../schemas/entity.schema'

export default class GetEntityDto {
	items: Entity[] | null
	constructor(props: { items }) {
        this.items = props.items.map(
			(item: Entity) => new Entity(item)
            )
    }
}

in api folder create base.controller.ts

//src/api

export default class BaseController {
    axios: any
    constructor(axiosInstance: unknown) {
        this.axios = axiosInstance
    }
}

And entities.controller.ts

//src/entites.controler.ts

import BaseController from './base.controller'
import GetEntityDto from './dto/entity.dto'

type Entity = {
    someProp: someType
    someProp2: someType2
    someProp3: someTyp3
}

export default class EntitiesController extends BaseController {
    async getEntities(): Promise<Entity[]> {
        let result: Entity[] | null = null
		try {
            result = await this.axios.get('/endpoint').then(({ data }) => {
                const EntityObject = new GetEntityDto(data)
                return { items: EntityObject }
            })
        } finally {
            return result
        }
	}
}

In plugin folder create api.plugin.ts

//src/plugins

import EntitiesController from '../api/entities.controller'

export default ({ $axios, error }, inject): void => {
    $axios.onRequesr(config => {
        Object.defineProperty(config.headers, 'Accept-Language', {
            value: 'en-US'
        })
        return config
    })
    $axios.interceptors.response.use(
        res => {
            return res
        },
        err => {
            error({ status: err.status })
            return Promise.reject(err)
        }
    )
const api = {
    entitiesController = new EntitiesController($axios)
	}
inject('api', api)
}

So, our api layer written, now we install "@mocks-server/main" it's generate mocks folder and some boilerplate files.

Create entities.js in src/mocks/routes

//src/mocks/routes/entities.js

const ENTITIES = [
items: {
    someProp1: someValue1,
    someProp2: someValue2,
    someProp3: someValue3
    },
    {
    someProp1: someValue1,
    someProp2: someValue2,
    someProp3: someValue3
    }
]

module.exports = [
  {
    id: 'get-entites', // id of the route
    url: '/endpoint', // url in express format
    method: 'GET', // HTTP method
    variants: [
      {
        id: 'success', // id of the variant
        response: {
          status: 200, // status to send
          body: ENTITIES // body to send
        }
      }
    ]
  }
]

       

And finally add get-entities route in mocks.json

//src/mocks/mocks.json

[
    {
        "id": "base",
        "routeVariants": [
            //here we have some boilerplate routes just add code below
            "get-entities": "success",
		]
    }
]
            

Ok it's all, now we can use this  data in our vue component/nuxt page
like this

//pages/entities/index.vue
<template>
  <div class="entities">

    <div class="entities__dataTable">
      <v-data-table
        :items="tableItems"
        :headers="tableHeaders"
        :search="search"
      >
        <template #top>
          <v-row class="entities__header--actions">
            <v-btn><v-icon>mdi-filter</v-icon></v-btn>
            <v-spacer />
            <v-btn>Add Entity</v-btn>
          </v-row>
          <v-card-title>
            Задания
            <v-spacer />
            <v-text-field
              v-model="search"
              append-icon="mdi-magnify"
              label="Search"
              single-line
              hide-details
            />
          </v-card-title>
        </template>
      </v-data-table>
    </div>
  </div>
</template>

<script lang="ts">
interface ITableHeader {
  text: string
  value?: string
}

interface ITableItem {
  someProp: someType
  someProp2: someType2
  someProp3: someType3
}

type Data = {
  tableHeaders: Array<ITableHeader>
  tableItems: Array<ITableItem>
}

export default {
  async asyncData(app: unknown): unknown {
    const tableItems = await app.$api.entitiesController.getEntities().then(res => {
      return res.items
    })
    return { tableItems }
  },
  data(): Data {
    return {
      tableHeaders: [
        { text: 'someProp', value: 'someProp' },
        { text: 'someProp2', value: 'someProp2' },
        { text: 'someProp3', value: 'someProp3' },
      ],
      tableItems: []
    }
  }
}
</script>

<style lang="scss" scoped>
//some scss
</style>

Alexandr