Get Started with Mairs

Mairs supports both Vue 3 and Nuxt 3 frameworks. It is very easy to install in your app.

install the package from npm

npm i mairs

Using components

you can import any component as following:

import { MButton } from "mairs"; // for js apps
import { MButton } from "mairs/components"; // for ts support

Only in Vue 3 (not recommended in Nuxt) you can import all the components globally. In your main.js you can :

import { createApp } from "vue";
import App from "./App.vue";
import * as M from "mairs";

const app = createApp(App);
app.use(M).mount("#app");

Styling features

The M components internally use the mairs styling variables, functions and mixins. To use them in your components you can import them as shown:

<style lang="scss" scoped>
  @use "mairs/utils" as *;
  h1 {
    color: $color_accent;
  }
</style>

Or you can import them globally in in your config file (additionalData way is recommended). Nuxt3 (Vite) example :

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: "@use 'mairs/utils' as *;",
        },
      },
    },
  },
});

Start theming

Create a Sass file for themes. include setupTheme() or setupDynamicTheme() mixin to create the theme variables. Here what the theming file for this docs looks like :

(The difference between setupTheme() and setupDynamicTheme() is that the dynamic function can only take "dark" and "light" as theme names and it switches themes based on user's system settings using media queries.)

@use "mairs/style" as *;

body {
  @include setupTheme(
    "dark",
    $colors: (
      "main": #080915,
      "accent": #445dcb,
      "onAccent": #fff,
      "text": #fff,
      "box": #10163c
    ),
    $gradients: ("gradient1": linear-gradient(red, blue)),
    $fonts: ("en1": "Poppins", "ar1": "Poppins"),
    $ui: ("radius": 4px)
  );
  @include setupTheme(
    "light",
    $colors: (
      "main": #fff,
      "accent": #445dcb,
      "onAccent": #fff,
      "text": #333,
      "box": #ebe9f3
    ),
    $gradients: ("gradient1": linear-gradient(blue, red)),
    $fonts: ("en1": "Poppins", "ar1": "Poppins"),
    $ui: ("radius": 4px)
  );
}

After creating the file you can now import it in your app. You can do that in the config file (Nuxt) or in main.js (Vue).

Add the class m-theme-<themeName> To apply any theme of the defined in themes file (No need in dynamic themes). All these variables are required. You can also add your custom variables. for more informations about variables see : variables in Mairs