pongo-components-vue

Pongo Components Vue

Vue 3 components library based on Tailwind CSS for Pongo 🚀

• Installation
• Usage example
• Components list
• Test components

Installation

1. Install @heypongo/pongo-components-vue

npm install @heypongo/pongo-components-vue

OR install the public package:

npm install pongo-components-vue

2. Install TailwindCSS

This library uses TailwindCSS classes by default. To install TailwindCSS follow his official documentation: https://tailwindcss.com/docs/installation

3. Add the @tailwindcss/forms plugin

The default theme of this library depends on the @tailwindcss/forms plugin. To use it, follow the steps on the plugin source page. https://github.com/tailwindlabs/tailwindcss-forms

4. Add the Pongo Tailwind Config

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', './node_modules/litepie-datepicker/**/*.js'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.blueGray,
      red: colors.red,
      yellow: colors.amber,
      green: colors.emerald,
      blue: colors.cyan,
      indigo: colors.blue,
      purple: colors.violet,
      pink: colors.pink,
      'litepie-primary': colors.blue, // color system for light mode
      'litepie-secondary': colors.coolGray // color system for dark mode
    },
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans]
      }
    }
  },
  variants: {},
  plugins: [require('@tailwindcss/forms')]
}

Usage example

Here is an example for a Button :

<template>
  <PongoButton>{{ $t('pages.myPage.buttons.action') }}</PongoButton>
</template>
<script>
import PongoButton from '@heypongo/pongo-components-vue'

export default {
  components: {
    PongoButton
  }
}
</script>

Components list

• Button
• Modal
• Notification
• Dropdown
• Card
• Pagination
• Table
• ConfirmButton
• DownloadCsvButton
• Tooltip
• Loader
• Form

Test components

Clone this repository

git clone [e-mail]:heypongo/PongoComponentsVue.git

Copy .env.example file to .env and configure variables :

cp .env.example .env

Install dependencies

npm i

Run the server

npm run dev

Go to localhost:3000