pz-input-vue v0.1.1

PZ Input Vue

This Vue-based component allows you to use input for forms easily.

Pre-requirements

To use pz-input-vue it is necessary to have Vue installed (version 3 is recommended) in the project to deploy this component.

To use pz-input-vue it is necessary to have Tailwind installed in the project to implement this component.

Enabling JIT mode

To enable just-in-time mode, set the mode option to 'jit' in your tailwind.config.js file:

// tailwind.config.js
module.exports = {

mode: 'jit',
purge: [
    // ...
],
theme: {
    // ...
}
// ...
}

Purge CSS

To get started, provide an array of paths to all of your template files using the purge option:

// tailwind.config.js
module.exports = {
  purge: [
    './node_modules/pz-input-vue/**/*.vue',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

NPM Cache (optional)

This command should only be executed if the component is not compiling properly.

npm cache clean --force

Installation

This is the way to install using npm pz-input-vue in our project.

npm i pz-input-vue@latest

Importing

This is the way to import pz-input-vue into our project.

import PZInputVue from 'pz-input-vue'

Usage

Simple example

<template>
    <PZInputVue v-model="test" type="text" />
</template>

Example:

<template>
    <div class="col-span-6 sm:col-span-3">
        <PZLabelVue for="test" :labelText="'Test'"/>
        <PZInputVue v-model="test" type="text" name="test" class="focus:ring-test1 focus:border-test1" />
    </div>
</template>

<style scoped>
</style>

<script>
import PZLabelVue from 'pz-label-vue'
import PZInputVue from 'pz-input-vue'

export default {
    components: {
        PZLabelVue,
        PZInputVue
    },
    data() {
        return {
            test: ''
        }
    },
}
</script>

Authors

Team working on the development of pz-input-vue.

• PONZACENIO | Web developer

License

pz-input-vue is ISC licensed.