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 3)

import { createApp } from 'vue';
import PeridoComponents from '@perido/vue-components/src/index.js';
import '@perido/vue-components/src/css/main.scss';
import App from './App.vue';


const app = createApp(App);
app.use(PeridoComponents);
app.mount('#app');

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 3 SFCs compiled by Vite (@vitejs/plugin-vue).
  • CSS is included in @perido/vue-components/src/css/main.scss and assumes the Perido Tailwind palette.