Guide
Vue Setup
Configure Nmorph in a regular Vue 3 application.
Plugin setup
The Vue plugin installs translations, creates common CSS variables, initializes the theme, detects browser dimensions, and provides z-index helpers through the Nmorph instance.
import { createApp } from "vue";
import { NmorphLibrary } from "@nmorph/nmorph-ui-kit/plugin";
import "@nmorph/nmorph-ui-kit/styles.css";
import App from "./App.vue";
createApp(App).use(NmorphLibrary).mount("#app");Options
The plugin accepts theme, i18n, and zIndex options. Theme options control colors and shadow variables. i18n options can add or override library messages. zIndex sets the base stacking value used by components that need layers.
app.use(NmorphLibrary, {
theme: {
defaultTheme: "light",
themes: {
light: { main: "#e9ecec", text: "#687b9e", accent: "#4a90e2" },
},
},
zIndex: { base: 1000 },
});Direct imports
Components can be imported directly from the package. This is the preferred style for local examples and for applications that want explicit component usage.
<script setup lang="ts">
import { NmorphButton, NmorphTextInput } from "@nmorph/nmorph-ui-kit";
</script>
<template>
<NmorphTextInput placeholder="Name" />
<NmorphButton text="Save" />
</template>