NibCSS

@nibcss/vue

Every export of the Vue bindings: the Nib plugin, v-nib, $nib, useNib, useNibRuntime and SSR collection.

1 min readv1

Exports#

Export

Signature

What it is

Nib (also the default export)

app.use(Nib, config)

the plugin: one runtime, the directive, the provide

useNib

useNib(attr: string | Ref<string> | (() => string)): ComputedRef<string>

a reactive class string

useNibRuntime

useNibRuntime(): NibRuntime

the runtime provided by the plugin

v-nib

v-nib="attr"

the directive — applies classes straight to the element

$nib

$nib(attr): string

a class string inside a template, no setup needed

NibStyles, collectNibStyles

the collected CSS, for a custom SSR setup

NibRuntime

class

re-exported, for a deliberately separate instance

$nib is declared on ComponentCustomProperties, so it type-checks in a template with no extra setup.

The plugin#

TypeScript
app.use(Nib, nibConfig);              // config
app.use(Nib, { runtime: existing });  // or a runtime you own (SSR, tests)

useNib takes three shapes#

TypeScript
const a = useNib("p=16px");                                   // a constant
const b = useNib(attrRef);                                    // a ref
const c = useNib(() => `p=${pad.value}px; bgc=$color.surface`); // a getter

The directive vs the composable#

HTML
<!-- v-nib: applies classes to this element, re-applied when the value changes -->
<div v-nib="`p=${pad}px`">…</div>

<!-- useNib: a string you can pass anywhere, including into a child component -->
<Child :class="box" />

SSR#

TypeScript
const rt = new NibRuntime({ watch: false, ...config });
const app = createSSRApp(App).use(Nib, { runtime: rt });
const body = await renderToString(app);
const head = `<style id="nib">${collectNibStyles(rt)}</style>`;

Next steps#