Instalando e Configurando o Mirage JS

Mirage JS é uma ferramenta poderosa para simular uma API no frontend, facilitando o desenvolvimento e testes em ambientes onde a API ainda não está implementada ou é instável. Para integrar o Mirage JS em um projeto Vue, vamos seguir alguns passos detalhados.

Instalação do Mirage JS

Para instalar o Mirage JS, abra o terminal no diretório do seu projeto e execute o comando:

npm install miragejs --save-dev

Configuração Inicial e Integração Básica com Vue.js

Após instalar o Mirage JS, vamos configurá-lo dentro do nosso projeto Vue.js. Criaremos um arquivo específico para configurar o Mirage, que será importado no ponto de entrada da aplicação (geralmente o main.ts). Aqui está um exemplo básico de como configurar e integrar o Mirage JS usando TypeScript:

1. Crie um arquivo para configuração do Mirage: Por exemplo, src/mirage/server.ts.

// src/mirage/server.ts
import { Server, Model } from "miragejs";

export function criarServidor({ environment = "development" } = {}) {
  let server = new Server({
    environment,

    models: {
      user: Model,
    },

    seeds(server) {
      server.create("user", { name: "Alice", age: 30 });
      server.create("user", { name: "Bob", age: 24 });
    },

    routes() {
      this.namespace = "api";

      this.get("/users", (schema) => {
        return schema.users.all();
      });
    },
  });

  return server;
}

2. Importe e inicialize o Mirage no seu main.ts:

// src/main.ts
import { createApp } from "vue";
import App from "./App.vue";

const { MODE } = import.meta.env;

if (MODE === "dev") {
  const { criarServidor } = await import("@/mirage/server");
  criarServidor();
}

createApp(App).mount("#app");

Integração com um Componente Vue

Agora, vamos integrar o Mirage JS com um componente Vue. Utilizando o formato <script setup> do Vue 3 junto com TypeScript, você pode fazer requisições à API simulada do Mirage. Aqui está um exemplo de um componente que busca dados de usuários:

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'

const users = ref<{
  id: number
  name: string
  age: number
}[]>([])
}>([])

onMounted(async () => {
  const response = await axios.get('/api/users')
  users.value = response.data.users
})
</script>

<template>
  <div>
    <h1>Usuários</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }} - {{ user.age }}</li>
    </ul>
  </div>
</template>

Com esses passos, você configurou um servidor Mirage JS básico em seu projeto Vue.js com TypeScript, podendo agora simular qualquer comportamento de API para o desenvolvimento e testes de seus componentes Vue.