
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
vue-useurl
Advanced tools
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 2,408 weekly downloads. As such, vue-useurl popularity was classified as popular.
We found that vue-useurl demonstrated a not healthy version release cadence and project activity because the last version was released 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.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.