# Pangea

## Installation

Install the following packages in your project with npm or yarn:

```bash
1. yarn add pangea-lib
2. yarn add pinia
3. yarn add pinia-plugin-persistedstate
```

In the `main` file:

```javascript
import { createApp } from 'vue';
import App from '@/App.vue';
// pinia
import { createPinia } from 'pinia';
import { createPersistedState } from 'pinia-plugin-persistedstate';
// pangea
import Pangea from 'pangea-lib';
// styles
import 'pangea-lib/main.css';

// create app
const app = createApp(App);
// pinia
const pinia = createPinia();
pinia.use(createPersistedState({ storage: localStorage }));
app.use(pinia);
// pangea
app.use(Pangea, pangeaOptions); // pangeaOptions object is OPTIONAL
// mount
app.mount('#app');
```

> **Note**: Pangea includes sanitize.css by default.

If you want to use the Stylus helpers:

1. `yarn add stylus --dev`
2. Add the following to your `vite.config`:

```javascript
import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      stylus: {
        additionalData: `
          @import "pangea-lib/dist/styles/breakpoints.styl";
          @import "pangea-lib/dist/styles/helpers.styl";
        `,
      },
    },
  },
});
```
