import { Meta } from '@storybook/blocks';
import { Source } from '@storybook/addon-docs';

<Meta title="Getting Started" />

# Getting Started

**Mozaic-Vue** is the [Vue.js](https://vuejs.org/) implementation of ADEO Design system.

## 📦 Installation

In order to use **Mozaic-Vue** in your **Vue.js** project, you must first install the [npm package](https://www.npmjs.com/package/@mozaic-ds/vue):

<Source
  language="bash"
  dark
  code="npm i @mozaic-ds/vue@beta"
/>

Or with **Yarn**:

<Source language="bash" dark code="yarn add @mozaic-ds/vue@beta" />

## 📝 Usage

Import the styles

<Source
  language='typescript'
  dark
  code={`
// main.ts

import '@mozaic-ds/vue/style.css';
`} />

To import and use a component, you can proceed as follows:

<Source
  language='html'
  dark
  code={`
<script setup>
  import { MButton } from '@mozaic-ds/vue';
</script>

<template>
  <MButton label="This is a Mozaic Button" />
</template>
`} />