tdata

Fetch your data, send your form easily. for vue 3.

install plugin

npm i tdata

or

yarn add tdata

Usage

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 |