セットアップ
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';
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/, ''),
},
},
},
});