tdata
Fetch your data, send your form easily. for vue 3.
install plugin
npm i tdataor
yarn add tdataUsage
you can register TFetch and TForm components globally or locally.
globally
main.js:
import TData from "tdata";
const app = createApp(App);
app.use(TData, options);
app.mount("#app");locally
any component (e.x. App.vue):
<script>
import { TFetch } from "tdata";
import { TForm } from "tdata";
export default {
components: {
TFetch: TFetch(options),
TForm: TForm(options),
},
// for sending form
data: () => ({
form: {
title: "",
body: "",
},
}),
};
</script>after register components you can use it in template like this:
<template>
<TForm
url="https://jsonplaceholder.typicode.com/posts"
:form="form"
v-slot="{ json, loading }"
>
<input type="text" v-model="form.body" />
<input type="text" v-model="form.title" />
<button type="submit" :disabled="loading">submit</button>
</TForm>
<TFetch
url="https://jsonplaceholder.typicode.com/posts"
v-slot="{ json: posts, loading }"
:options="{ params: { _limit: 5 } }"
>
<template v-if="loading"> loading... </template>
<template v-else>
<ul>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</template>
</TFetch>
</template>thats it, easy peasy. but you can customize it more like baseURL or event pass axios instance.
options
you can set baseURL or even axios instance to not set headeres or baseURL every time. heres how.
globally
import TData from "tdata";
import axios from "axios";
const axiosInstance = axios.create({
baseURL: "https://jsonplaceholder.typicode.com",
headers: {
Authorization: "Bearer token:)",
},
});
const app = createApp(App);
app.use(TData, { axios: axiosInstance });
app.mount("#app");now for every request it will set header and baseURL.
locally
<script>
import { TFetch } from "tdata";
export default {
components: {
TFetch: TFetch({ baseURL: "https://jsonplaceholder.typicode.com" }),
},
};
</script>and this will only set baseURL for every request.
and the usage in template will be like this:
<TForm url="/posts" :form="form" v-slot="{ loading }">
<input type="text" v-model="form.body" />
<input type="text" v-model="form.title" />
<button type="submit" :disabled="loading">submit</button>
</TForm>
<TFetch
url="/posts"
v-slot="{ json: posts, loading }"
:options="{ params: { _limit: 5 } }"
>
<template v-if="loading"> loading... </template>
<template v-else>
<ul>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</template>
</TFetch>slots
| slot | type | descriptions |
|---|---|---|
| json | array object | json response when request resolved |
| loading | boolean | check response has been recived or not |
| response | object | entire response from api |
| error | object | error response |
| errorMessage | string | error message |