diff --git a/components/header/Header.vue b/components/header/Header.vue
new file mode 100644
index 0000000..5a57fd2
--- /dev/null
+++ b/components/header/Header.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const tagList = ref<{
+  requestType: string
+  url: string
+}[]>([
+  {
+    requestType: 'GET',
+    url: 'https://livraison-app.vercel.app',
+  },
+  {
+    requestType: 'POST',
+    url: 'https://livraison-app.vercel.app',
+  },
+])
+
+const sidebar = useSidebarStore()
+
+const { show } = storeToRefs(sidebar)
+
+const linkQuery = useRouteQuery('link')
+
+function remakeRouteQuery() {
+  if (linkQuery.value === undefined)
+    linkQuery.value = tagList.value[0].url
+}
+
+watch(linkQuery, () => {
+  if (linkQuery.value === undefined)
+    linkQuery.value = tagList.value[0].url
+})
+
+onMounted(() => {
+  remakeRouteQuery()
+})
+</script>
+
+<template>
+  <div class="flex h-14 items-center">
+    <SidebarIconAction v-if="!show" />
+    <Dnd
+      v-model="tagList"
+      class=""
+      :animation="100"
+    >
+      <HeaderTag v-for="tag in tagList" :key="tag.url" :label="tag.requestType" :url="tag.url" />
+    </Dnd>
+    <HeaderIconAdd />
+  </div>
+</template>
diff --git a/components/header/icon/Add.vue b/components/header/icon/Add.vue
new file mode 100644
index 0000000..df87790
--- /dev/null
+++ b/components/header/icon/Add.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'HeaderIconAdd',
+})
+</script>
+
+<template>
+  <div class="flex justify-center items-center ">
+    <Icon name="carbon:add" class="text-5 mt-0 cursor-pointer icon-hover" />
+  </div>
+</template>
diff --git a/components/header/tag/Tag.vue b/components/header/tag/Tag.vue
new file mode 100644
index 0000000..9e467ac
--- /dev/null
+++ b/components/header/tag/Tag.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps<{
+  label: string
+  url: string
+}>()
+</script>
+
+<template>
+  <div class="float-left cursor-pointer leading-5 flex flex-[0_0_auto] p-x-2 items-center">
+    <Label :class="props.label">{{ props.label }}</Label>
+    <Label class="truncate pl-0.5 w-30 inline-block">{{ props.url }}</Label>
+    <Icon name="carbon:close" class="text-5 mt-0 icon-hover" />
+  </div>
+</template>
+
+<style>
+
+</style>
diff --git a/components/layout/Root.vue b/components/layout/Root.vue
index a13b9ca..240b40e 100644
--- a/components/layout/Root.vue
+++ b/components/layout/Root.vue
@@ -2,14 +2,23 @@
 defineOptions({
   name: 'LayoutRoot',
 })
+
+const sidebar = useSidebarStore()
+
+const { panSize } = storeToRefs(sidebar)
 </script>
 
 <template>
   <LayoutBasic :border-positions="[]">
-    <Splitpanes>
+    <Splitpanes @resize="panSize.size = $event[0].size">
       <Sidebar />
       <SplitpanesPane :size="80" :min-size="70" :max-size="85">
-        <slot />
+        <!-- header -->
+        <Header />
+        <!-- bodyer -->
+        <div class="mx-4">
+          <slot />
+        </div>
       </SplitpanesPane>
     </Splitpanes>
   </LayoutBasic>
diff --git a/composables/useRouteHash.ts b/composables/useRouteHash.ts
new file mode 100644
index 0000000..9712d4e
--- /dev/null
+++ b/composables/useRouteHash.ts
@@ -0,0 +1,61 @@
+import { customRef, nextTick, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { toValue, tryOnScopeDispose } from '@vueuse/shared'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
+import type { ReactiveRouteOptions, RouteHashValueRaw } from '~/types/router'
+
+let _hash: RouteHashValueRaw
+
+export function useRouteHash(
+  defaultValue?: MaybeRefOrGetter<RouteHashValueRaw>,
+  {
+    mode = 'replace',
+    route = useRoute(),
+    router = useRouter(),
+  }: ReactiveRouteOptions = {},
+) {
+  _hash = route.hash
+
+  tryOnScopeDispose(() => {
+    _hash = undefined
+  })
+
+  let _trigger: () => void
+
+  const proxy = customRef<RouteHashValueRaw>((track, trigger) => {
+    _trigger = trigger
+
+    return {
+      get() {
+        track()
+
+        return _hash || toValue(defaultValue)
+      },
+      set(v) {
+        if (v === _hash)
+          return
+
+        _hash = v === null ? undefined : v
+
+        trigger()
+
+        nextTick(() => {
+          const { params, query } = route
+
+          router[toValue(mode)]({ params, query, hash: _hash as string })
+        })
+      },
+    }
+  })
+
+  watch(
+    () => route.hash,
+    () => {
+      _hash = route.hash
+      _trigger()
+    },
+    { flush: 'sync' },
+  )
+
+  return proxy
+}
diff --git a/composables/useRouteParams.ts b/composables/useRouteParams.ts
new file mode 100644
index 0000000..b4d67bd
--- /dev/null
+++ b/composables/useRouteParams.ts
@@ -0,0 +1,103 @@
+import { customRef, nextTick, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { toValue, tryOnScopeDispose } from '@vueuse/shared'
+import type { Ref } from 'vue'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
+import type { LocationAsRelativeRaw, RouteParamValueRaw, Router } from 'vue-router'
+import type { ReactiveRouteOptionsWithTransform } from '~/types/router'
+
+const _queue = new WeakMap<Router, Map<string, any>>()
+
+export function useRouteParams(
+  name: string
+): Ref<null | string | string[]>
+
+export function useRouteParams<
+  T extends RouteParamValueRaw = RouteParamValueRaw,
+  K = T,
+>(
+  name: string,
+  defaultValue?: MaybeRefOrGetter<T>,
+  options?: ReactiveRouteOptionsWithTransform<T, K>
+): Ref<K>
+
+export function useRouteParams<
+  T extends RouteParamValueRaw = RouteParamValueRaw,
+  K = T,
+>(
+  name: string,
+  defaultValue?: MaybeRefOrGetter<T>,
+  options: ReactiveRouteOptionsWithTransform<T, K> = {},
+): Ref<K> {
+  const {
+    mode = 'replace',
+    route = useRoute(),
+    router = useRouter(),
+    transform = value => value as any as K,
+  } = options
+
+  if (!_queue.has(router))
+    _queue.set(router, new Map())
+
+  const _paramsQueue = _queue.get(router)!
+
+  let param = route.params[name] as any
+
+  tryOnScopeDispose(() => {
+    param = undefined
+  })
+
+  let _trigger: () => void
+
+  const proxy = customRef<any>((track, trigger) => {
+    _trigger = trigger
+
+    return {
+      get() {
+        track()
+
+        return transform(param !== undefined ? param : toValue(defaultValue))
+      },
+      set(v) {
+        if (param === v)
+          return
+
+        param = v
+        _paramsQueue.set(name, v)
+
+        trigger()
+
+        nextTick(() => {
+          if (_paramsQueue.size === 0)
+            return
+
+          const newParams = Object.fromEntries(_paramsQueue.entries())
+          _paramsQueue.clear()
+
+          const { params, query, hash } = route
+
+          router[toValue(mode)]({
+            params: {
+              ...params,
+              ...newParams,
+            },
+            query,
+            hash,
+          } as LocationAsRelativeRaw)
+        })
+      },
+    }
+  })
+
+  watch(
+    () => route.params[name],
+    (v) => {
+      param = v
+
+      _trigger()
+    },
+    { flush: 'sync' },
+  )
+
+  return proxy as Ref<K>
+}
diff --git a/composables/useRouteQuery.ts b/composables/useRouteQuery.ts
new file mode 100644
index 0000000..0a7240f
--- /dev/null
+++ b/composables/useRouteQuery.ts
@@ -0,0 +1,100 @@
+import { customRef, nextTick, watch } from 'vue'
+import { toValue, tryOnScopeDispose } from '@vueuse/shared'
+import { useRoute, useRouter } from 'vue-router'
+import type { Router } from 'vue-router'
+import type { Ref } from 'vue'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
+import type { ReactiveRouteOptionsWithTransform, RouteQueryValueRaw } from '~/types/router'
+
+const _queue = new WeakMap<Router, Map<string, any>>()
+
+export function useRouteQuery(
+  name: string
+): Ref<null | string | string[]>
+
+export function useRouteQuery<
+  T extends RouteQueryValueRaw = RouteQueryValueRaw,
+  K = T,
+>(
+  name: string,
+  defaultValue?: MaybeRefOrGetter<T>,
+  options?: ReactiveRouteOptionsWithTransform<T, K>
+): Ref<K>
+
+export function useRouteQuery<
+  T extends RouteQueryValueRaw = RouteQueryValueRaw,
+  K = T,
+>(
+  name: string,
+  defaultValue?: MaybeRefOrGetter<T>,
+  options: ReactiveRouteOptionsWithTransform<T, K> = {},
+): Ref<K> {
+  const {
+    mode = 'replace',
+    route = useRoute(),
+    router = useRouter(),
+    transform = value => value as any as K,
+  } = options
+
+  if (!_queue.has(router))
+    _queue.set(router, new Map())
+
+  const _queriesQueue = _queue.get(router)!
+
+  let query = route.query[name] as any
+
+  tryOnScopeDispose(() => {
+    query = undefined
+  })
+
+  let _trigger: () => void
+
+  const proxy = customRef<any>((track, trigger) => {
+    _trigger = trigger
+
+    return {
+      get() {
+        track()
+
+        return transform(query !== undefined ? query : toValue(defaultValue))
+      },
+      set(v) {
+        if (query === v)
+          return
+
+        query = v
+        _queriesQueue.set(name, v)
+
+        trigger()
+
+        nextTick(() => {
+          if (_queriesQueue.size === 0)
+            return
+
+          const newQueries = Object.fromEntries(_queriesQueue.entries())
+          _queriesQueue.clear()
+
+          const { params, query, hash } = route
+
+          router[toValue(mode)]({
+            params,
+            query: { ...query, ...newQueries },
+            hash,
+          })
+        })
+      },
+    }
+  })
+
+  watch(
+    () => route.query[name],
+    (v) => {
+      query = v
+
+      _trigger()
+    },
+    { flush: 'sync' },
+  )
+
+  return proxy as any as Ref<K>
+}
diff --git a/pages/index.vue b/pages/index.vue
index f0d0909..f79c839 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-const showSidebar = useSidebarStore()
+const linkQuery = useRouteQuery('link')
 </script>
 
 <template>
   <div>
-    <SidebarIconAction v-if="!showSidebar.show" />
+    {{ linkQuery }}
   </div>
 </template>
diff --git a/store/sidebar.ts b/store/sidebar.ts
index 42aad62..bdc0a2f 100644
--- a/store/sidebar.ts
+++ b/store/sidebar.ts
@@ -9,7 +9,7 @@ export const useSidebarStore = defineStore('sidebar', () => {
     maxSize: number
   }>({
     minSize: 15,
-    size: 0,
+    size: 20,
     maxSize: 30,
   })
 
diff --git a/types/router.ts b/types/router.ts
new file mode 100644
index 0000000..0d84518
--- /dev/null
+++ b/types/router.ts
@@ -0,0 +1,32 @@
+import type { MaybeRef } from '@vueuse/shared'
+import type { RouteParamValueRaw, useRoute, useRouter } from 'vue-router'
+
+export type RouteQueryValueRaw = RouteParamValueRaw | string[]
+
+export type RouteHashValueRaw = string | null | undefined
+
+export interface ReactiveRouteOptions {
+  /**
+   * Mode to update the router query, ref is also acceptable
+   *
+   * @default 'replace'
+   */
+  mode?: MaybeRef<'replace' | 'push'>
+
+  /**
+   * Route instance, use `useRoute()` if not given
+   */
+  route?: ReturnType<typeof useRoute>
+
+  /**
+   * Router instance, use `useRouter()` if not given
+   */
+  router?: ReturnType<typeof useRouter>
+}
+
+export interface ReactiveRouteOptionsWithTransform<V, R> extends ReactiveRouteOptions {
+  /**
+   * Function to transform data before return
+   */
+  transform?: (val: V) => R
+}
diff --git a/ui/Label/Label.vue b/ui/Label/Label.vue
new file mode 100644
index 0000000..95b1d97
--- /dev/null
+++ b/ui/Label/Label.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  as?: string
+  for?: string
+}>(), {
+  as: 'label',
+})
+
+function handleMousedown(e: MouseEvent): void {
+  if (!e.defaultPrevented && e.detail > 1)
+    e.preventDefault()
+}
+</script>
+
+<template>
+  <component :is="props.as" @mousedown="handleMousedown">
+    <slot />
+  </component>
+</template>
diff --git a/ui/icon/Button.vue b/ui/icon/Button.vue
index af6299c..e3cfd44 100644
--- a/ui/icon/Button.vue
+++ b/ui/icon/Button.vue
@@ -12,6 +12,6 @@ defineOptions({
 
 <style scoped>
 .icon-button{
-  @apply w-8 h-8 text-6 color-zinc-500 cursor-pointer hover:bg-gray-500 hover:bg-op-20 flex justify-center items-center rounded;
+  @apply w-8 h-8 text-6 color-zinc-500 cursor-pointer flex justify-center items-center icon-hover;
 }
 </style>
diff --git a/unocss.config.ts b/unocss.config.ts
index d024e38..5e3f6d0 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -13,6 +13,11 @@ export default defineConfig({
   shortcuts: [
     ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
     ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
+    ['GET', 'inline-block text-green-400'],
+    ['POST', 'inline-block text-yellow-400'],
+    ['PUT', 'inline-block text-cyan-400'],
+    ['DELETE', 'inline-block text-rose-500'],
+    ['icon-hover', 'hover:bg-black hover:bg-op-4 dark:hover:bg-white dark:hover:bg-op-10 rounded'],
   ],
   presets: [
     presetUno(),
diff --git a/vitest/composables/useRouteHash.test.ts b/vitest/composables/useRouteHash.test.ts
new file mode 100644
index 0000000..040ddef
--- /dev/null
+++ b/vitest/composables/useRouteHash.test.ts
@@ -0,0 +1,91 @@
+import { nextTick, reactive, ref } from 'vue'
+import { describe, expect, it } from 'vitest'
+import { useRouteHash } from '~/composables/useRouteHash'
+
+describe('useRouteHash', () => {
+  const getRoute = (hash?: any) => reactive({
+    query: {},
+    fullPath: '',
+    hash,
+    matched: [],
+    meta: {},
+    name: '',
+    params: {},
+    path: '',
+    redirectedFrom: undefined,
+  })
+
+  it('should export', () => {
+    expect(useRouteHash).toBeDefined()
+  })
+
+  it('should return current value', () => {
+    let route = getRoute('header')
+    const router = { replace: (r: any) => route = r } as any
+
+    const hash = useRouteHash(null, { route, router })
+
+    expect(hash.value).toBe(route.hash)
+  })
+
+  it('should re-evaluate the value immediately', () => {
+    let route = getRoute('header')
+    const router = { replace: (r: any) => route = r } as any
+
+    const hash = useRouteHash(null, { route, router })
+
+    hash.value = 'footer'
+
+    expect(hash.value).toBe('footer')
+  })
+
+  it('should update the route', async () => {
+    let route = getRoute('foo')
+    const router = { replace: (r: any) => route = r } as any
+
+    const hash = useRouteHash(null, { route, router })
+
+    hash.value = 'footer'
+
+    await nextTick()
+
+    expect(hash.value).toBe('footer')
+    expect(route.hash).toBe('footer')
+  })
+
+  it('should return default value', () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+
+    const hash = useRouteHash('baz', { route, router })
+
+    expect(hash.value).toBe('baz')
+    expect(route.hash).toBeUndefined()
+  })
+
+  it('should change the value when the route changes', () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+
+    const hash = useRouteHash('baz', { route, router })
+
+    route.hash = 'foo'
+
+    expect(hash.value).toBe('foo')
+  })
+
+  it('should allow ref or getter as default value', () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+
+    const defaultTarget = ref('foo')
+
+    const target = useRouteHash(defaultTarget, { route, router })
+
+    expect(target.value).toBe('foo')
+
+    target.value = 'bar'
+
+    expect(target.value).toBe('bar')
+  })
+})
diff --git a/vitest/composables/useRouteParams.test.ts b/vitest/composables/useRouteParams.test.ts
new file mode 100644
index 0000000..22407fd
--- /dev/null
+++ b/vitest/composables/useRouteParams.test.ts
@@ -0,0 +1,246 @@
+import { effectScope, nextTick, reactive, ref, watch } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+import type { Ref } from 'vue'
+import { useRouteParams } from '~/composables/useRouteParams'
+
+describe('useRouteParams', () => {
+  const getRoute = (params: Record<string, any> = {}) => reactive({
+    params,
+    query: {},
+    fullPath: '',
+    hash: '',
+    matched: [],
+    meta: {},
+    name: '',
+    path: '',
+    redirectedFrom: undefined,
+  })
+
+  it('should export', () => {
+    expect(useRouteParams).toBeDefined()
+  })
+
+  it('should return current value', () => {
+    const router = {} as any
+    const route = getRoute({
+      id: '1',
+    })
+
+    const id = useRouteParams('id', null, { route, router })
+
+    expect(id.value).toBe('1')
+  })
+
+  it('should return transformed value', () => {
+    const route = getRoute()
+    const router = {} as any
+
+    const id = useRouteParams('id', '1', { transform: Number, route, router })
+
+    expect(id.value).toBe(1)
+  })
+
+  it('should re-evaluate the value immediately', () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+
+    const slug: Ref<any> = useRouteParams('slug', 'foo', { route, router })
+    const id: Ref<any> = useRouteParams('id', '123', { route, router })
+    const page: Ref<any> = useRouteParams('page', null, { route, router })
+
+    slug.value = 'bar'
+    id.value = '456'
+    page.value = '2'
+
+    expect(slug.value).toBe('bar')
+    expect(id.value).toBe('456')
+    expect(page.value).toBe('2')
+  })
+
+  it('should update the route', async () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+
+    const code: Ref<any> = useRouteParams('code', null, { route, router })
+    const page: Ref<any> = useRouteParams('page', null, { route, router })
+    const lang: Ref<any> = useRouteParams('lang', null, { route, router })
+
+    code.value = 'bar'
+    page.value = '1'
+    lang.value = 'en'
+
+    await nextTick()
+
+    expect(code.value).toBe('bar')
+    expect(route.params.code).toBe('bar')
+    expect(page.value).toBe('1')
+    expect(route.params.page).toBe('1')
+    expect(lang.value).toBe('en')
+    expect(route.params.lang).toBe('en')
+  })
+
+  it('should return default value', () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+
+    const page: Ref<any> = useRouteParams('page', 10, { route, router })
+    const lang: Ref<any> = useRouteParams('lang', 'pt-BR', { route, router })
+
+    expect(page.value).toBe(10)
+    expect(lang.value).toBe('pt-BR')
+  })
+
+  it('should reset state on scope dispose', async () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+    const scopeA = effectScope()
+    const scopeB = effectScope()
+
+    let page: Ref<any> = ref(null)
+    let lang: Ref<any> = ref(null)
+    let code: Ref<any> = ref(null)
+    let slug: Ref<any> = ref(null)
+
+    await scopeA.run(async () => {
+      page = useRouteParams('page', null, { route, router })
+      lang = useRouteParams('lang', null, { route, router })
+
+      page.value = 2
+      lang.value = 'pt-BR'
+
+      await nextTick()
+    })
+
+    expect(page.value).toBe(2)
+    expect(lang.value).toBe('pt-BR')
+    expect(route.params.page).toBe(2)
+    expect(route.params.lang).toBe('pt-BR')
+
+    await scopeB.run(async () => {
+      code = useRouteParams('code', null, { route, router })
+      slug = useRouteParams('slug', null, { route, router })
+
+      code.value = 'xyz'
+      slug.value = 'vueuse'
+
+      await nextTick()
+    })
+
+    expect(code.value).toBe('xyz')
+    expect(slug.value).toBe('vueuse')
+    expect(route.params.code).toBe('xyz')
+    expect(route.params.slug).toBe('vueuse')
+
+    scopeB.stop()
+
+    expect(page.value).toBe(2)
+    expect(lang.value).toBe('pt-BR')
+    expect(code.value).toBeNull()
+    expect(slug.value).toBeNull()
+
+    scopeA.stop()
+
+    expect(page.value).toBeNull()
+    expect(lang.value).toBeNull()
+  })
+
+  it('should not reset params to default if is disposed from other scope', async () => {
+    let route = getRoute()
+
+    const router = { replace: (r: any) => route = r } as any
+
+    const scopeA = effectScope()
+    const scopeB = effectScope()
+
+    route.params.page = 2
+
+    const defaultPage = 'DEFAULT_PAGE'
+    let page1: Ref<any> = ref(null)
+    await scopeA.run(async () => {
+      page1 = useRouteParams('page', defaultPage, { route, router })
+    })
+
+    let page2: Ref<any> = ref(null)
+    await scopeB.run(async () => {
+      page2 = useRouteParams('page', defaultPage, { route, router })
+    })
+
+    expect(page1.value).toBe(2)
+    expect(page2.value).toBe(2)
+
+    scopeA.stop()
+    await nextTick()
+
+    expect(page1.value).toBe(defaultPage)
+    expect(page2.value).toBe(2)
+  })
+
+  it('should change the value when the route changes', () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+
+    const lang: Ref<any> = useRouteParams('lang', null, { route, router })
+
+    expect(lang.value).toBeNull()
+
+    route.params = { lang: 'en' }
+
+    expect(lang.value).toBe('en')
+  })
+
+  it('should avoid trigger effects when the value doesn\'t change', async () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+    const onUpdate = vi.fn()
+
+    const page = useRouteParams('page', 1, { transform: Number, route, router })
+
+    watch(page, onUpdate)
+
+    page.value = 1
+
+    await nextTick()
+
+    expect(page.value).toBe(1)
+    expect(route.params.page).toBe(1)
+    expect(onUpdate).not.toHaveBeenCalled()
+  })
+
+  it('should keep current query and hash', async () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+
+    route.query = { foo: 'bar' }
+    route.hash = '#hash'
+
+    const id: Ref<any> = useRouteParams('id', null, { route, router })
+
+    id.value = '2'
+
+    await nextTick()
+
+    expect(id.value).toBe('2')
+    expect(route.hash).toBe('#hash')
+    expect(route.query).toEqual({ foo: 'bar' })
+  })
+
+  it('should allow ref or getter as default value', () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+
+    const defaultPage = ref(1)
+    const defaultLang = () => 'pt-BR'
+
+    const page: Ref<any> = useRouteParams('page', defaultPage, { route, router })
+    const lang: Ref<any> = useRouteParams('lang', defaultLang, { route, router })
+
+    expect(page.value).toBe(1)
+    expect(lang.value).toBe('pt-BR')
+
+    page.value = 2
+    lang.value = 'en-US'
+
+    expect(page.value).toBe(2)
+    expect(lang.value).toBe('en-US')
+  })
+})
diff --git a/vitest/composables/useRouteQuery.test.ts b/vitest/composables/useRouteQuery.test.ts
new file mode 100644
index 0000000..25e0df8
--- /dev/null
+++ b/vitest/composables/useRouteQuery.test.ts
@@ -0,0 +1,266 @@
+import { effectScope, nextTick, reactive, ref, watch } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+import type { Ref } from 'vue'
+import { useRouteQuery } from '~/composables/useRouteQuery'
+
+describe('useRouteQuery', () => {
+  const getRoute = (query: Record<string, any> = {}) => reactive({
+    query,
+    fullPath: '',
+    hash: '',
+    matched: [],
+    meta: {},
+    name: '',
+    params: {},
+    path: '',
+    redirectedFrom: undefined,
+  })
+
+  it('should export', () => {
+    expect(useRouteQuery).toBeDefined()
+  })
+
+  it('should return transformed value', () => {
+    const router = {} as any
+    const route = getRoute({
+      search: 'vue3',
+      page: '1',
+    })
+    const transform = Number
+    const toArray = (param: string | string[] | null) => Array.isArray(param) ? param : [param]
+
+    const page = useRouteQuery('page', '1', { transform, route, router })
+    const perPage = useRouteQuery('perPage', '15', { transform, route, router })
+    const tags = useRouteQuery('tags', [], { transform: toArray, route: getRoute({ tags: 'vite' }), router })
+
+    expect(page.value).toBe(1)
+    expect(perPage.value).toBe(15)
+    expect(tags.value).toEqual(['vite'])
+  })
+
+  it('should re-evaluate the value immediately', () => {
+    let route = getRoute({
+      search: 'vue3',
+    })
+    const router = { replace: (r: any) => route = r } as any
+
+    const code: Ref<any> = useRouteQuery('code', 'foo', { route, router })
+    const search: Ref<any> = useRouteQuery('search', null, { route, router })
+
+    expect(code.value).toBe('foo')
+
+    code.value = 'bar'
+
+    expect(code.value).toBe('bar')
+    expect(search.value).toBe('vue3')
+  })
+
+  it('should update the route', async () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+
+    const code: Ref<any> = useRouteQuery('code', null, { route, router })
+    const page: Ref<any> = useRouteQuery('page', null, { route, router })
+    const lang: Ref<any> = useRouteQuery('lang', null, { route, router })
+
+    code.value = 'bar'
+    page.value = '1'
+    lang.value = 'en'
+
+    await nextTick()
+
+    expect(code.value).toBe('bar')
+    expect(route.query.code).toBe('bar')
+    expect(page.value).toBe('1')
+    expect(route.query.page).toBe('1')
+    expect(lang.value).toBe('en')
+    expect(route.query.lang).toBe('en')
+  })
+
+  it('should return default value', () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+
+    const page: Ref<any> = useRouteQuery('page', 2, { route, router })
+    const lang: Ref<any> = useRouteQuery('lang', 'pt-BR', { route, router })
+
+    expect(page.value).toBe(2)
+    expect(lang.value).toBe('pt-BR')
+  })
+
+  it('should reset state on scope dispose', async () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+    const scopeA = effectScope()
+    const scopeB = effectScope()
+
+    let page: Ref<any> = ref(null)
+    let lang: Ref<any> = ref(null)
+    let code: Ref<any> = ref(null)
+    let search: Ref<any> = ref(null)
+
+    await scopeA.run(async () => {
+      page = useRouteQuery('page', null, { route, router })
+      lang = useRouteQuery('lang', null, { route, router })
+
+      page.value = 2
+      lang.value = 'pt-BR'
+
+      await nextTick()
+    })
+
+    expect(page.value).toBe(2)
+    expect(lang.value).toBe('pt-BR')
+    expect(route.query.page).toBe(2)
+    expect(route.query.lang).toBe('pt-BR')
+
+    await scopeB.run(async () => {
+      code = useRouteQuery('code', null, { route, router })
+      search = useRouteQuery('search', null, { route, router })
+
+      code.value = 'xyz'
+      search.value = 'vueuse'
+
+      await nextTick()
+    })
+
+    expect(code.value).toBe('xyz')
+    expect(search.value).toBe('vueuse')
+    expect(route.query.code).toBe('xyz')
+    expect(route.query.search).toBe('vueuse')
+
+    scopeB.stop()
+
+    expect(page.value).toBe(2)
+    expect(lang.value).toBe('pt-BR')
+    expect(code.value).toBeNull()
+    expect(search.value).toBeNull()
+
+    scopeA.stop()
+
+    expect(page.value).toBeNull()
+    expect(lang.value).toBeNull()
+  })
+
+  it('should not reset params to default params is disposed from other scope', async () => {
+    let route = getRoute()
+
+    const router = { replace: (r: any) => route = r } as any
+    const scopeA = effectScope()
+    const scopeB = effectScope()
+
+    route.query.page = 2
+
+    const defaultPage = 'DEFAULT_PAGE'
+    let page1: Ref<any> = ref(null)
+    await scopeA.run(async () => {
+      page1 = useRouteQuery('page', defaultPage, { route, router })
+    })
+
+    let page2: Ref<any> = ref(null)
+    await scopeB.run(async () => {
+      page2 = useRouteQuery('page', defaultPage, { route, router })
+    })
+
+    expect(page1.value).toBe(2)
+    expect(page2.value).toBe(2)
+
+    scopeA.stop()
+    await nextTick()
+
+    expect(page1.value).toBe(defaultPage)
+    expect(page2.value).toBe(2)
+  })
+
+  it('should change the value when the route changes', () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+
+    const page: Ref<any> = useRouteQuery('page', null, { route, router })
+
+    expect(page.value).toBeNull()
+
+    route.query = { page: '2' }
+
+    expect(page.value).toBe('2')
+  })
+
+  it('should differentiate null and undefined', () => {
+    let route = getRoute({
+      page: 1,
+    })
+    const router = { replace: (r: any) => route = r } as any
+
+    const lang: Ref<any> = useRouteQuery('lang', undefined, { route, router })
+
+    expect(lang.value).toBeUndefined()
+
+    route.query = { ...route.query, lang: null }
+
+    expect(lang.value).toBeNull()
+
+    const code: Ref<any> = useRouteQuery('code', null, { route, router })
+
+    expect(code.value).toBeNull()
+
+    const page: Ref<any> = useRouteQuery('page', null, { route, router })
+
+    expect(page.value).toBe(1)
+  })
+
+  it('should avoid trigger effects when the value doesn\'t change', async () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+    const onUpdate = vi.fn()
+
+    const page = useRouteQuery('page', 1, { transform: Number, route, router })
+
+    watch(page, onUpdate)
+
+    page.value = 1
+
+    await nextTick()
+
+    expect(page.value).toBe(1)
+    expect(route.query.page).toBe(1)
+    expect(onUpdate).not.toHaveBeenCalled()
+  })
+
+  it('should keep current query and hash', async () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+
+    route.params = { foo: 'bar' }
+    route.hash = '#hash'
+
+    const id: Ref<any> = useRouteQuery('id', null, { route, router })
+
+    id.value = '2'
+
+    await nextTick()
+
+    expect(id.value).toBe('2')
+    expect(route.hash).toBe('#hash')
+    expect(route.params).toEqual({ foo: 'bar' })
+  })
+
+  it('should allow ref or getter as default value', () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+
+    const defaultPage = ref(1)
+    const defaultLang = () => 'pt-BR'
+
+    const page: Ref<any> = useRouteQuery('page', defaultPage, { route, router })
+    const lang: Ref<any> = useRouteQuery('lang', defaultLang, { route, router })
+
+    expect(page.value).toBe(1)
+    expect(lang.value).toBe('pt-BR')
+
+    page.value = 2
+    lang.value = 'en-US'
+
+    expect(page.value).toBe(2)
+    expect(lang.value).toBe('en-US')
+  })
+})