pongo-components-vue-test v0.1.10

Pongo Components Vue

🚀 Vue 3 component library for Pongo.

• Installation
• Usage example
• Components list

Installation

1. Install @heypongo/pongo-components-vue

npm install @heypongo/pongo-components-vue

OR install the public package:

npm install pongo-components-vue-test

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