import { useQueryState, parseAsString } from "@andabove/vuqs";

// Ref<string | null> — null when ?q is absent
const search = useQueryState("q", parseAsString);

// Read
console.log(search.value); // 'hello' or null

// Write — updates the URL automatically
search.value = "hello";

// Remove the param from the URL
search.value = null;

import { useQueryState, parseAsInteger } from "@andabove/vuqs";

// Ref<number> — URL is clean when page === 1 (no ?page=1 in the URL)
const page = useQueryState("page", parseAsInteger.withDefault(1));

page.value++; // ?page=2
page.value = 1; // removes ?page from the URL
page.value = null; // also removes ?page, resets to default (1)

import { useQueryState, parseAsString, parseAsStringLiteral } from "@andabove/vuqs";

const tab = useQueryState("tab", parseAsString.withOptions({ mode: "push" }));

// Or chain it with a default:
const sort = useQueryState(
  "sort",
  parseAsStringLiteral(["asc", "desc"] as const)
    .withDefault("asc")
    .withOptions({ mode: "push" }),
);

import { useQueryState, parseAsStringLiteral } from "@andabove/vuqs";

const colors = ["red", "green", "blue"] as const;

const color = useQueryState("color", parseAsStringLiteral(colors).withDefault("red"));
// Ref<'red' | 'green' | 'blue'>

import { useQueryState, parseAsStringEnum } from "@andabove/vuqs";

enum Direction {
  Up = "up",
  Down = "down",
}

const dir = useQueryState(
  "dir",
  parseAsStringEnum<Direction>(Object.values(Direction)).withDefault(Direction.Up),
);

import { useQueryState, parseAsArrayOf, parseAsInteger } from "@andabove/vuqs";

// ?ids=1,2,3  →  [1, 2, 3]
const ids = useQueryState("ids", parseAsArrayOf(parseAsInteger).withDefault([]));

import { useQueryState, parseAsJson } from "@andabove/vuqs";
import * as v from "valibot";

const schema = v.object({ q: v.string(), page: v.number() });

const filters = useQueryState(
  "filters",
  parseAsJson((raw) => {
    const r = v.safeParse(schema, raw);
    return r.success ? r.output : null;
  }),
);

// With Zod
import { z } from "zod";

const schema = z.object({ q: z.string() });

const filters = useQueryState(
  "filters",
  parseAsJson((raw) => {
    const r = schema.safeParse(raw);
    return r.success ? r.data : null;
  }),
);

import { createParser, useQueryState } from "@andabove/vuqs";

const parseAsHexColor = createParser({
  parse(query) {
    return /^[0-9a-f]{6}$/i.test(query) ? query : null;
  },
  serialize(value) {
    return value;
  },
});

const color = useQueryState("color", parseAsHexColor.withDefault("ff0000"));