Stenfert UI / vue

See Stenfert UI / core on how to set up the plugin. This document will only cover the Vue specific parts.

Installation

npm install @stenfert-ui/core @stenfert-ui/vue

Setup

Loading the plugin

To use the plugin with Vue, add the following code to your root app component:

<script setup lang="ts">
    import { load } from "@stenfert-ui/core";
    import config from "assets/ui/stenfert-ui.config";
    import { onMounted } from "vue";
    import { isLoaded } from "@stenfert-ui/vue";

    onMounted(() => {
        load(config);
    });
</script>

<template>
    <div v-if="isLoaded">
        <NuxtPage />
    </div>
</template>

Usage

Changing the site settings

The font size, line height, letter spacing, word spacing and contrast can be requested and changed dynamically during runtime. This can be done with the following stores:

import { 
    fontSize,
    lineHeight,
    letterSpacing,
    wordSpacing,
    contrast,
} from "@stenfert-ui/vue";

console.log({ 
    fontSize: fontSize.value, 
    lineHeight: lineHeight.value, 
    letterSpacing: letterSpacing.value, 
    wordSpacing: wordSpacing.value, 
    contrast: contrast.value
}); // { fontSize: "1", lineHeight: "1", letterSpacing: "1", wordSpacing: "1", contrast: "0" }

fontSize.value = "1.5"; // Range from 0 to Number.MAX_SAFE_INTEGER
lineHeight.value = "1"; // Range from 0 to Number.MAX_SAFE_INTEGER
letterSpacing.value = "1"; // Range from 0 to Number.MAX_SAFE_INTEGER
wordSpacing.value = "1"; // Range from 0 to Number.MAX_SAFE_INTEGER
contrast.value = "0"; // Range from -1 to 1

These settings are multipliers and will be multiplied against the theme's values.

Changing the theme

The theme can be changed dynamically during runtime. This can be done with the following stores:

import { getTheme } from "@stenfert-ui/core";
import { themes, activeThemeName } from "@stenfert-ui/vue";

const theme = themes.value[0]; // Let's say we want to set the active theme to the theme at index 0.

activeThemeName.value = theme.getName(); // Set the active theme to the theme at index 0.
console.log(getTheme(activeThemeName.value)); // Prints the theme at index 0.

Example

See ./example for a working example in Vue.