Skip to content
Perido Style Guide

Using Vue Components

Using Vue Components

Install

Terminal window
npm install @perido/vue-components @perido/tailwind-config

Register globally (Vue 2)

import Vue from 'vue';
import PeridoComponents from '@perido/vue-components/src/index.js';
import '@perido/vue-components/src/css/main.scss';


Object.values(PeridoComponents).forEach((component) => {
  if (component && component.name) {
    Vue.component(component.name, component);
  }
});

Register locally

import { PButton, PInput } from '@perido/vue-components/src/index.js';


export default {
  components: {
    PButton,
    PInput,
  },
};

Tailwind preset

Apply the shared preset in your Tailwind config:

tailwind.config.js
const perido = require('@perido/tailwind-config');


module.exports = {
  presets: [perido],
  content: ['./src/**/*.{vue,js,ts}'],
};

Notes

  • The components are Vue 2 SFCs compiled by Vite (vite-plugin-vue2).
  • CSS is included in @perido/vue-components/src/css/main.scss and assumes the Perido Tailwind palette.