1.1.0 • Published 3 years ago
vue-endpoints v1.1.0
vue-endpoints
vue-endpoints is a small wrapper for projects which require multiple API endpoints.
It uses axios and is inspired by vue-axios. Please go check them both out.
Installing
Using npm:
$ npm install vue-endpoints
Using yarn:
$ yarn add vue-endpoints
Usage in Vue 3
With typescript:
import { createApp } from "vue";
import { AxiosRequestConfig } from "axios";
import VueEndpoints, { createVueEndpoints } from "vue-endpoints";
const configurationsFirstInstance: AxiosRequestConfig = {
baseURL: "/firstEndpoint",
};
const configurationsSecondInstance: AxiosRequestConfig = { baseURL: "/secondEndpoint" };
const onSuccess = (config: AxiosRequestConfig) => {
const { method, baseURL = "", url } = config;
console.log(`%c Made ${method} request to ${baseURL + url}`, 'color:green; font-weight:800');
return config;
};
const apiInstances = [
{
name: "firstInstance",
configs: configurationsFirstInstance,
interceptors: {
request: { onSuccess },
},
},
{ name: "secondInstance", configs: configurationsSecondInstance },
];
const vueEndpoints: VueEndpoints = createVueEndpoints({
baseApi: "firstInstance",
apiInstances,
});
createApp(App)
.use(vueEndpoints)
.mount("#app");
Without typescript:
import { createApp } from "vue";
import { AxiosRequestConfig } from "axios";
import VueEndpoints from "vue-endpoints";
const configurationsFirstInstance = {
baseURL: "/firstEndpoint",
};
const configurationsSecondInstance = { baseURL: "/secondEndpoint" };
const onSuccess = (config) => {
const { method, baseURL = "", url } = config;
console.log(`%c Made ${method} request to ${baseURL + url}`, 'color:green; font-weight:800');
return config;
};
const apiInstances = [
{
name: "firstInstance",
configs: configurationsFirstInstance,
interceptors: {
request: { onSuccess },
},
},
{ name: "secondInstance", configs: configurationsSecondInstance },
];
// alternative assignment
const vueEndpoints = new VueEndpoints({ apiInstances });
createApp(App)
.use(vueEndpoints)
.mount("#app");
In Vue component:
export default {
computed: {
option1(){
return this.$baseApi.get("/url/to/api");
},
//or
option2(){
return this.$apiEndpoints.getApi("nameOfApi").get("/url/to/api");
},
},
}
API
createVueEndpoints(params?: PluginOptions): VueEndpoints
const vueEndpoints = createVueEndpoints({
/* Default base API will be the first API instance of instances-array */
baseApi: "someName",
[{name:"someName", configs:{...axiosConfigurations}}],
});
setBaseApi(name: string): void
const vueEndpoints = createVueEndpoints({
[{name:"someName", configs:{...axiosConfigurations}}],
});
vueEndpoints.setBaseApi("someName")
getApi(name: string): AxiosInstance | undefined;
const vueEndpoints = createVueEndpoints({
[{name:"someName", configs:{...axiosConfigurations}}],
});
const someNameApi = vueEndpoints.getApi("someName");
apiInstances: ApiInstances[]
<template>
{{ myInstances[0].name }}
</template>
<script>
export default {
computed: {
myInstances() {
return this.$apiEndpoints.apiInstances;
},
},
};
</script>
vue-2 compatibility
For now this tool is only compatible in vue-3.