Axios cancel token as Vue hook

App.vue

<template>
  <button @click="ping">Ping</button>
</template>

<script setup>
import useCancelToken from './useCancelToken';
import axios from 'axios'

const cancelToken = useCancelToken();

const ping = () => {
  axios.get('https://ping.example.com', { cancelToken })
}
</script>

useCancelToken.js

import { onUnmounted } from 'vue';
import axios from 'axios';

export default function useCancelToken() {
    const source = axios.CancelToken.source();

    onUnmounted(() => {
        source.cancel('Fetch cancelled');
    });

    return source.token;
}