Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Vue.js Reactive URL Composable

License

NotificationsYou must be signed in to change notification settings

rainxh11/vue-useurl

Repository files navigation

🔗 Vue-useUrl

Reactive Url Builder Vue Composable for Vue 2 & Vue 3

NPM version

A library for building URL using(Query Parameters, Path Variables, Hash, Path) while being reactive and ready touse as Vue Composition API Composable

Installation

To install with npm:

npm install vue-useurl --save

Usage

import{useUrl}from'vue-useurl'constparams={search:'ahmed',limit:50,page:12,sort:'CreatedOn',types:['Cancelled','OnGoing']}const{ url, queryParams, pathVariables, hash, path, disableCSV}=useUrl({path:'/api/v1/users/:id/search',pathVariables:{id:451},queryParams:{...params},hash:'someHash',arraySerializer:(v)=>v.join(',')},'http://api.com')

Options

TheuserUrl function accepts two arguments. The first is 'options' of type IUrlOptions e.g:

import{useUrl}from'vue-useurl'const{ url, queryParams, pathVariables, hash, path, disableCSV}=useUrl({path:'/path/path1',// URL PathpathVariables:{id:451},// Path variables e.g: /:id/queryParams:{limit:10,sortBy:'property',page:1},// Query parametershash:'someHash',// Hash})

The second is 'baseUrl' that will be appended to Url path

useUrl({path:'/about',queryParams:{foo:'bar',fizz:'baz'},hash:'contact',},'http://api.com')// returns http://api.com/about?foo=bar&bar=baz#contact

Variables returned byuseUrl() are all reactive objects, changing anyof:pathqueryParamspathVariableshasharraySerializer will rebuildurl

const{ url, queryParams, pathVariables, hash, path, disableCSV}=useUrl(/*..*/)

Usage with VueUse 'useFetch()'

This library is compatible with VueUseuseFetch(), andurl returned fromuseUrl() can easily be used to triggerauto-reftech if option{ refetch: true } is passed touseFetch() which make for intuitive and easy way to work withurl parametes and variables without the need to modify url string directly

import{useFetch}from"@vueuse/core"import{useUrl}from'vue-useurl'const{ url, queryParams, pathVariables, hash, path, disableCSV}=useUrl({path:'/api/v1/users/:id/search',pathVariables:{id:451},queryParams:{search:'ahmed',limit:50,page:12,sort:'CreatedOn',types:['Cancelled','OnGoing']},hash:'hashtag',},'http://api.com')const{ isFetching, error, data}=useFetch(url,{initialData:{results:[]},refetch:true}).get().json()

How to use debouncing, throttling and other reactive backpressures with useUrl():

import{useFetch,useDebounce}from"@vueuse/core"import{useUrl}from'vue-useurl'import{ref}from'vue-demi'exportfunctionuseApi(){constsearch=ref('query')//constfilters=ref(['filter1','filter2','filter3'])// declare reactive varibalesconst{ url, queryParams, pathVariables, hash, path, disableCSV}=useUrl({path:'/api/v1/users/:id/search',pathVariables:{id:451},queryParams:{search:useDebounce(search,500),//limit:50,page:12,sort:'CreatedOn',types:useDebounce(filters,3500)// then pass their reactive backpressure objects instead},hash:'hashtag',disableCSV:false},'http://api.com')const{ isFetching, error, data}=useFetch(url,{initialData:{results:[]},refetch:true}).get().json()return{data,search,//filters,// changing this now will trigger the url re-buildqueryParams,pathVariables,hash,path,url}}

License

This is licensed under an MIT License.

About

Vue.js Reactive URL Composable

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors3

  •  
  •  
  •  
[8]ページ先頭
©2009-2025 Movatter.jp