vue-sfp-services
v2.0.1
Published
Package allows us to use pagination, search and filter easily made with VueJS
Downloads
23
Maintainers
Readme
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">«</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">»</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
};
},
Project setup
npm install
Compiles and hot-reloads for development
npm run dev
License
This project is licensed under MIT License
@Vuango Simply Learn