How to migrate a boot/axios.ts file in a Quasar Vite project with Vue 3 and TypeScript?

Question

I'm migrating a project from Quasar CLI to Quasar Vite and facing challenges with the boot/axios.ts file.

In the old Quasar CLI setup, the boot file for Axios looked like this:

import { boot } from 'quasar/wrappers';
import axios, { AxiosInstance } from 'axios';
import { IRootState } from 'src/store';

const api = axios.create({
  baseURL: process.env.API_URL,
});

export default boot(({ app, store }) => {
  app.config.globalProperties.$axios = axios;
  app.config.globalProperties.$api = api;

  api.interceptors.request.use((config) => {
    const token = (store.state as IRootState).auth.currentUserData.accessToken;
    if (token) {
      config.headers.Authorization = token;
    }
    return config;
  });

  // Additional interceptors...
});

export { api };

In the new Quasar Vite project, the boot file no longer passes the store as a parameter, and there is no main.ts file. The store must be imported explicitly.

Here's the folder structure of the new Quasar Vite project:

src/
  boot/
    axios.ts
  store/
    index.ts
  router/
    index.ts

My questions are:

How do I properly set up boot/axios.ts in the Quasar Vite project to integrate with the Vuex store? How can I handle Axios interceptors in this new setup (request and response interceptors with access token refresh logic)?

Additional Details: Quasar Version: ^2.16.0 (migrated to Vite) Axios Version: ^1.2.1 Vuex Version: ^4.0.1 "@quasar/app-vite": "^2.0.0"

What is the recommended way to structure and integrate Axios boot files in a Quasar Vite project? Any guidance or examples would be greatly appreciated!

Explicitly Imported the Store: In the new Quasar Vite project, since store is no longer passed as a parameter to the boot function, I tried explicitly importing the Vuex store like this:

import { defineBoot } from '#q-app/wrappers';
import { useStore } from 'src/store';

Updated the Axios Boot File: I updated the boot/axios.ts file to remove the store parameter from the boot function and directly accessed the Vuex store state, like this:

export default defineBoot(({ app }) => {
  const store = useStore(); 
  app.config.globalProperties.$axios = axios;
  app.config.globalProperties.$api = api;

  api.interceptors.request.use((config) => {
    const token = store.state.auth.currentUserData.accessToken;
    if (token) {
      config.headers.Authorization = token;
    }
    return config;
  });
});

Interceptors for Token Refresh: I attempted to add both request and response interceptors to handle API authentication and token refresh logic. This included detecting 401 errors, making a refresh token request, and retrying the original failed request.

I was expecting the following:

Axios Integration with Store: A seamless way to integrate Axios with the Vuex store in the Quasar Vite project, ensuring that API calls use the access token from the store. The ability to use this.$axios and this.$api globally in my Vue components.

Token Refresh Logic to Work: Automatically refresh the access token when a 401 Unauthorized response is received and retry the original request. Ensure the app does not redirect to the login page unless the refresh token is also invalid.

Quasar Best Practices: I wanted to confirm that this approach follows the best practices for Quasar Vite.