@mozaic-ds/chart/src/stories/GettingStarted.mdx

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

import { Meta } from '@storybook/blocks';
import { Badge, OutlineCTA, Link } from '@storybook/design-system';
import pkg from '../../package.json';

<Meta title="Getting Started" />

<style>
  {`
  .outlineCTA {
    margin: 16px auto;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .outlineCTA span {
    font-size: 14px;
  }
  .outlineCTA p {
    margin: 0;
  }
`}
</style>

# Getting Started

**Mozaic-Chart** is the [Chart.js](https://vuejs.org/) implementation for [Vue.js](https://vuejs.org/) of [Mozaic Design System Dataviz](https://mozaic.adeo.cloud/)

<OutlineCTA
  className="outlineCTA"
  badge={<Badge status="positive">Vue.js 3</Badge>}
>
  Note that this package is built to be used only with <strong>Vue.js 3</strong>
</OutlineCTA>

## Installation

> **PREREQUISITES:**<br/>
> To allow you to include and use our package, we assume that you are using a module bundlers like [Webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/) or [rollup.js](https://rollupjs.org/guide/en/), or that your project has been initiated with [Vue CLI >= 5](https://cli.vuejs.org/) or [Vite](https://vitejs.dev/guide/). Otherwise, the package might not work.<br/>
> Minimum Vue.js version required: **{pkg.dependencies.vue.slice(1)}**

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

```bash
npm install @mozaic-ds/chart --save --save-exact
```

Or with **Yarn**:

```bash
yarn add @mozaic-ds/chart -E
```

## Set up

After installing **Mozaic-Chart**, you need to set up the library.

The easiest way to do this is to import all components and make them globally available in your application.

In your entry point file, insert the following code:

```javascript
// In the entry point file of your application - usually src/main.js

import MozaicChart from '@mozaic-ds/chart';
import '@mozaic-ds/chart/dist/style.css';

Vue.use(MozaicChart);
```

<br />

### Global/local component registration

As indicated in [its documentation](https://vuejs.org/guide/components/registration.html), **Vue.js** proposes to register/import the components in a global or local way:

- The global import allows you to make your components accessible throughout your application
- The local import, on the other hand, makes a component accessible only in the part of the application that uses it

> Learn more about the notion of global/local registration on [the associated Vue.js documentation](https://vuejs.org/guide/components/registration.html).

{/* > Learn more about how to import globally or locally the components of **Mozaic-Chart** into your project, by visiting [the dedicated documentation](?path=/docs/importing-components--docs). */}

## Usage

That's it! You’re all set! ✅ <br/>
You are now able to use the **Mozaic-Chart** components in your **Vue.js** project.

Simply call the component as follows:

```vue-html
<BarChart :labels="labels" :datasets="datasets" />
```