Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
vue-useurl
Advanced tools
Readme
A library for building URL using (Query Parameters, Path Variables, Hash, Path) while being reactive and ready to use as Vue Composition API Composable
To install with npm:
npm install vue-useurl --save
import { useUrl } from 'vue-useurl'
const params = {
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')
The userUrl
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 Path
pathVariables:
{
id: 451
}
, // Path variables e.g: /:id/
queryParams: {
limit: 10,
sortBy:
'property',
page:
1
}
, // Query parameters
hash: '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 by useUrl()
are all reactive objects, changing any
of: path
queryParams
pathVariables
hash
arraySerializer
will rebuild url
const { url, queryParams, pathVariables, hash, path, disableCSV } = useUrl(/*..*/)
This library is compatible with VueUse useFetch()
, and url
returned from useUrl()
can easily be used to trigger
auto-reftech if option { refetch: true }
is passed to useFetch()
which make for intuitive and easy way to work with
url 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()
import { useFetch, useDebounce } from "@vueuse/core"
import { useUrl } from 'vue-useurl'
import { ref } from 'vue-demi'
export function useApi()
{
const search = ref('query') //
const filters = ref(['filter1', 'filter2', 'filter3']) // declare reactive varibales
const { 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-build
queryParams,
pathVariables,
hash,
path,
url
}
}
This is licensed under an MIT License.
FAQs
Reactive Url Builder Vue Composable
The npm package vue-useurl receives a total of 9,182 weekly downloads. As such, vue-useurl popularity was classified as popular.
We found that vue-useurl demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.