@m2s2/vue-lib

@m2s2/vue-lib

Vue 3 component library by M²S² Engineering Group. Built with Composition API and <script setup> throughout.

For live component demos and prop documentation, see Storybook.

Installation

npm install @m2s2/vue-lib @m2s2/tokens

Peer Dependencies

Setup

Import the stylesheet in your entry file:

import { createApp } from 'vue';
import App from './App.vue';
import '@m2s2/vue-lib/styles';

createApp(App).mount('#app');

Usage

<script setup lang="ts">
import { Navbar, Footer } from '@m2s2/vue-lib';
import type { NavbarConfig, FooterConfig } from '@m2s2/vue-lib';

const navbar: NavbarConfig = { brand: 'My App', brandPath: '/', isFixed: true, buttons: [] };
const footer: FooterConfig = { brandName: 'My App', links: [] };
</script>

<template>
  <Navbar :config="navbar" />
  <main>...</main>
  <Footer :config="footer" />
</template>

Components

Dialog and Panel

Dialog and Panel are provided via Vue's provide/inject system. Wrap your app (or the relevant subtree) with the providers and use the composables to open them imperatively:

<script setup lang="ts">
import { DialogProvider, PanelProvider } from '@m2s2/vue-lib';
</script>

<template>
  <DialogProvider>
    <PanelProvider>
      <RouterView />
    </PanelProvider>
  </DialogProvider>
</template>

<script setup lang="ts">
import { useDialog, usePanel } from '@m2s2/vue-lib';

const { dialog, confirm } = useDialog();
const { panel } = usePanel();
</script>