i just published my first vue (npm) package :). called tdata, and it just simply fetch data and send forms, and will give you json, response, loading and error if you had any. if you wanna check it out here's github repo.
usage
ok first step is install and register components.
npm i tdata
or if you are using yarn
yarn add tdata
then you have to register components. and i provider two options for you. globally and locally. for global registration:
// main.js
import TData from "tdata";
const app = createApp(App);
app.use(TData, options);
app.mount("#app");
this will register all components automatically. options is optional and i explain a bit later.
and to register components locally. go any components you want like App.vue:
<script>
import { TFetch, TForm } from "tdata";
export default {
components: {
TFetch: TFetch(options),
TForm: TForm(options),
},
// for sending form
data: () => ({
form: {
title: "",
body: "",
},
}),
};
</script>
now components are registered successfully. and you can use this to fetch data or submit forms in templates.
<template>
<TForm
url="https://jsonplaceholder.typicode.com/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="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>
its that easy and you access things like json response, actual response, is request still loading and error if you had any. its handy but if you cant customize it, it will not be that useful for a project so just provide options and make your development easier.
options
first option you can set is baseURL, with this you dont have to provide full url every time. you can set baseURL like this:
<script>
import { TFetch } from "tdata";
export default {
components: {
TFetch: TFetch({ baseURL: "https://jsonplaceholder.typicode.com" }),
},
};
</script>
now with every use of this component, base url will set automatically. but what if you have a axios instance and you set headers, baseURL and ... . good news is you can use that too. here 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 in template you can use it 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>
ok thats not too hard. as i said its simple package and maybe i extend it more it future. if you like this pls share it :))
Top comments (0)