axiosを使う

セットアップ

yarn add axios vue-axios

/main.ts

import {createApp} from 'vue';
import router from './router';
import App from './App.vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

createApp(App).use(router).use(VueAxios, axios).mount('#app');

/views/Users.vue

<template lang="pug">
div
  ul
    li(v-for="user in state.users" :key="user.userId") {{user.userName}}
</template>

<script lang="ts">
import {defineComponent, reactive, onMounted} from 'vue';
import axios from 'axios';
export default defineComponent({
  name: 'Users',
  components: {},
  setup() {
    const state = reactive({
      users: [],
    });

    async function getUsers() {
      const response = await axios.get('/api/v1/users/');
      state.users =
        response && response.data && response.data.users ?
          response.data.users :
          [];
    }

    onMounted(() => {
      getUsers();
    });

    return {
      state,
    };
  },
});
</script>

/vite.config.ts

import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
    },
  },
  plugins: [vue()],
  server: {
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:4000/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});