nuxt-ltrl v0.0.20

nuxt-ltrl

🍱 Compose system literals from JSON in Nuxt.

✨  Release Notes

Getting started

1. Install the module

pnpm add nuxt-ltrl

2. Create a config

// ~/ltrl.config.ts
import { defineLtrlConfig } from "nuxt-ltrl/config";

export default defineLtrlConfig({
  foo: "an example string",
  bar: ["primary", "secondary", "tertiary"],
  baz: {
    a: "A",
    b: "B",
    c: "C",
  },
  qux: [
    { id: 1, label: "One" },
    { id: 2, label: "Two" },
  ],
});

3. Activate the module

// ~/nuxt.config.ts
import ltrl from "./ltrl.config";

export default defineNuxtConfig({
  modules: ["nuxt-ltrl"],
  ltrl,
});

4. You are done, literally!

Features

Define system-level JSON configurations in Nuxt for:

• constants Literal strings, numbers, or booleans
• tuples Literal arrays of strings or numbers
• enums Literal key/value object w/ string keys & string or number values
• congruents Literal arrays of congruent key/value objects containing at least an id property

Read more

NOTE: system literals are not available within the ~/server directory

Utils

nuxt-ltrl exposes system literals to your Nuxt application to interact w/ your ltrl config:

Usage

export function useLtrlFoo() {
  const { foo } = useNuxtLtrlConfig();
  return foo;
}

export function useLtrlBar() {
  return useNuxtLtrl("bar");
}

Types

nuxt-ltrl will generate types based on your configuration that are globally available within Nuxt. A type name is derived from the ltrl key in PascalCase w/ a Ltrl prefix, the type itself will depend on the literal that was defined.

Constants

Our example defines a constant literal w/ the foo key, which generates a literal constant:

export type LtrlFoo = "example";

Tuples

Our example defines a tuple literal w/ the bar key, which generates a literal tuple:

export type LtrlBar = ["primary", "secondary", "plain"];

Enums

Our example defines an enum literal w/ the baz key, which generates a literal enum:

export enum LtrlBaz {
  A = "A",
  B = "",
}

Congruents

Our example defines a congruent literal w/ the qux key, which generates a namespace containing a Template type & literal types for every supplied option:

export namespace LtrlQuz {
  export type Template = { id: number; label: string };
  export type One = { id: 1; label: "One" };
  export type Two = { id: 2; label: "Two" };
}

Option type names are derived from the label property.

Helpers

In addition to the generated types, nuxt-ltrl also exposes some type helpers:

Usage

In this example, we are using the bar literal from our config to compose a string-literal union type & assigns the type to a prop in a button component:

<script setup lang="ts">
defineProps<{
  variant: LtrlTupleItem<"bar">; // or `LtrlBar[number]`
}>();
</script>

<template>
  <button :data-variant="variant">
    <slot />
  </button>
</template>

The component will have a string-literal type-helper when implementing the variant prop, complete w/ errors in the IDE if an invalid option is provided!

License

MIT License © 2024-PRESENT Alexander Thorwaldson