vue-router-typed-query

A simple package to type your query parameters

Installation

yarn add @henrotaymcorp/vue-router-typed-query

Usage

useQuery

import { z } from "zod";
import { useQuery } from "@henrotaymcorp/vue-router-typed-query";

// Construct your validation schema.
const querySchema = z.object({
  name: z.string(),
});

// Await result
const query = await useQuery(querySchema); // { name: string } OR Throws error if invalid

useSafeQuery

import { z } from "zod";
import { useQuery } from "@henrotaymcorp/vue-router-typed-query";

// Construct your validation schema.
const querySchema = z.object({
  name: z.string(),
});

// Await result
const safeQuery = await useSafeQuery(querySchema); // { data: { name: string } | ZodError, success: boolean }
if (!safeQuery.success) return safeQuery.error; // ZodError
safeQuery.data; // { name: string }

Caveats

useQuery and useSafeQuery can't be used after an await or a promise resolution. See this issue for details.

const ThrowingError = async () => {
  await callApi();
  const query = useQuery(querySchema) // Fails !!
}

const Correct = async () => {
  await callApi();
  const query = useQuery(querySchema) // OK !!
}

Development

./cli bootstrap #bootstrap project
./cli yarn install #install dependencies
./cli start #start project
./cli stop #stop project
./cli restart  #restart project