Global Options

We provide the setGlobalOptions() method for you to control some configurations to avoid the repetition of filling in the same configurations.

CLI

For example, vue-cliopen in new window, viteopen in new window, etc.

In the following example, all components that use VueRequest in the current project can access the incoming options. For more configurable global options, please refer to Global Options.

// main.ts
import { setGlobalOptions } from 'vue-request';
// ...
setGlobalOptions({
  manual: true,
  // ...
});

// App.tsx
const { data: user } = useRequest(getUser);
const { data: job } = useRequest(getJob, { manual: false }); // Override global options

Inject configuration using useRequestProvider

In addition to setting global configurations using the API as described above, you can also use the useRequestProvider hook we export for more fine-grained configuration. As shown below, you can pass different configurations to different components. The passed configuration will only affect the child components of that component.

import { defineComponent } from 'vue';
import { useRequestProvider } from 'vue-request';
// ...
export default defineComponent({
  name: 'App',
  setup() {
    useRequestProvider({
      manual: true,
      // ...
    });
    return {};
  },
});

CDN

If you use VueRequest through a CDN, you can set global configurations as follows. We export the setGlobalOptions() method on the VueRequest instance.

<!-- ... -->
<script src="https://unpkg.com/vue-request/dist/vue-request.min.js"></script>
<script>
  VueRequest.setGlobalOptions({
    manual: true,
    // ...
  });
</script>

Tips

Options weight: setGlobalOptions < useRequestProvider < local options