ERTU Forms is a library for building input components in Vue 3 applications.
npm install ertu-formsA customizable and Nuxt 3-compatible input component with validation and masking support.
- β
Vue 3 + Nuxt 3 support
- π Masking (string or function-based)
- β
Validation rules (required, minLength, maxLength, email)
- π Optional i18n-style custom messages
- π§© Plugin or named import usage
- π§ Supports custom user-defined validation functions
``bash`
npm install ertu-forms
`ts
import { createApp } from 'vue'
import App from './App.vue'
import ERTUForms from 'ertu-forms'
const app = createApp(App)
app.use(ERTUForms, {
messages: {
required: 'Bu alan zorunludur',
email: 'GeΓ§erli bir e-posta giriniz'
}
})
`
`ts`
import { BaseInput } from 'ertu-forms'
`ts`
// nuxt.config.ts
export default defineNuxtConfig({
components: [
{ path: 'node_modules/ertu-forms/src/components', extensions: ['vue'] }
]
})
| Prop | Type | Description |
|--------------|----------------------------------|-------------|
| modelValue | string | Bound value |rules
| | Record | Validation rules |mask
| | string \| (val: string) => string | Optional mask |messages
| | Record | Optional per-instance override |
Built-in rules:
- requiredminLength
- maxLength
-
-
Custom rule example:
`ts`
rules: {
required: true,
isUsername: (val) => val.startsWith('@') || 'Username must start with @'
}
String-based:
`ts`
mask: '###-##-####'
Function-based:
`ts`
mask: (val) => {
return '+90 (' + val.slice(0, 3) + ') ' + val.slice(3, 6) + ' ' + val.slice(6)
}
``
ertu-forms/
βββ src/
β βββ components/ # BaseInput.vue
β βββ utils/ # masking & validation logic
β βββ plugin.ts # Vue plugin install
β βββ index.ts # Entry point
βββ playground/ # Nuxt 3 example usage
To publish this package:
`bash``
npm login
npm version patch # or minor/major
npm publish --access public
---
Made with β€οΈ by ertugrul.yaman