1.0.1 • Published 3 months ago
@stenfert-ui/vue v1.0.1
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.