Fetch your data, send your form easily. for vue 3.
npm i tdataor
yarn add tdatayou can register TFetch and TForm components globally or locally.
main.js:
import TData from "tdata";
const app = createApp(App);
app.use(TData, options);
app.mount("#app");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.
you can set baseURL or even axios instance to not set headeres or baseURL every time. heres how.
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.
<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>| 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 |
| name | type | description |
|---|---|---|
| url | string | url (full url if baseURL not set) |
| method | string | method type(TFetch default: 'get', TForm default: 'post') |
| options | object | headers, parameted and etc |
| form | object | the form you want to submit, only for TForm |
| name | type | description |
|---|---|---|
| baseURL | string | base url of all request with related component |
| axios | axiosInstance | axios instance with headers, baseURL and ... |