Pangea

Installation

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

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

In the main file:

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';
import 'pangea-lib/responsive-font-size.css'; // (OPTIONAL) responsive font size
import 'pangea-lib/scrollbar.css'; // (OPTIONAL) styles for scrollbars

// 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:

import { defineConfig } from 'vite';

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