vuejs plugin for fetch data and submit form

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 :))

Blog

vuejs plugin for fetch data and submit form

Tefoh

usage

options

Join Our Newsletter. No Spam, Only the good stuff.

Related