Vue-sfp-services NPM

vue-sfp-services

This library used for Vue 2 and Vue 3
Live Demo

https://sohepalslamat.github.io/vue-sfp-services/

Installation

Using yarn

yarn add vue-sfp-services

Using npm

npm i vue-sfp-services

Usage

ES6 Modules / CommonJS

Example:

<div class="form">
    <label for="search">Search</label>
    <input id="search" v-model="queries.search" type="text" />
    <label for="user_id">User Id</label>
    <input id="user_id" v-model="queries.user_id" type="number" />
    
    <div class="pagination">
      <a @click="queries.page > 1 ? queries.page-- : queries.page=1">&laquo;</a>
      <a v-for="i in 6" :key="i" @click="queries.page=i" :class="{active: queries.page == i }">{{i}}</a>
      <a @click="queries.page < 6 ? queries.page++ : queries.page=6">&raquo;</a>
    </div>
    <div>
      <h5>Queries As Object: {{$route.query}}</h5>
      <h5>Queries As Url: {{queriesAsUrl}}</h5>
    </div>
  </div>

With Vue2 option api:

import { SfpService } from "vue-sfp-services";

export default {
  data(){
    return {
      queries:{
        page: 1,
        search: "",
        user_id: 1,
        // .. any data you want 
      }
    }
  },
  created(){
    new SfpService(this.$router, this.$route, this.queries)
  },
}

With composition api Vue3:

import { reactive } from "vue"
import { useRouter, useRoute } from 'vue-router'
//...
//..
setup() {
    const router = useRouter()
    const route = useRoute()
    const queries = reactive({
      page: 1,
      search: '',
      user_id: 1,
      // .. any data you want 
    })

    new SfpService(router, route, queries)
        
    return {
      queries
    };
  },