Skip to content

Commit

Permalink
init of vuelidate library for Magento 2
Browse files Browse the repository at this point in the history
  • Loading branch information
mmeester committed Aug 25, 2020
0 parents commit 06bd36e
Show file tree
Hide file tree
Showing 8 changed files with 98 additions and 0 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.DS_Store
46 changes: 46 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
[![Latest Stable Version](https://poser.pugx.org/deadsimple/vuelidatelibrary/version)](https://packagist.org/packages/deadsimple/vuelidatelibrary) [![Total Downloads](https://poser.pugx.org/deadsimple/vuelidatelibrary/downloads)](https://packagist.org/packages/deadsimple/vuelidatelibrary) [![License](https://poser.pugx.org/deadsimple/vuelidatelibrary/license)](https://packagist.org/packages/deadsimple/vuelidatelibrary)

# Deadsimple Vuelidate Magento2 Composer Library

Implement modern form validation to your Magento 2 VueJS forms using [vuelidate](https://vuelidate.js.org/)

## Installation

Use composer to install the module: `composer require deadsimple/vuelidatelibrary`

## Usage

To use Vuelidate you will need to load the `Vuelidate` library and it's `Validators` using the Magento 2 requirejs methods. Select the neccesary mixin and the validators you would like to use with the destructure syntax. Load the mixin like any other mixins and start using Vuelidate as described in it's [documentation](https://vuelidate.js.org/#getting-started).


```
define([
'Vue',
'Vuelidate',
'VuelidateValidators',
], function (Vue, Vuelidate, validators) {
const {validationMixin} = Vuelidate;
const {required, email } = validators;
Vue.component('contactForm', {
template: template,
mixins: [ validationMixin ],
data() {
return {
name: null,
email: null,
}
},
validations(){
name: { required },
email: { required, email }
}
})
})
```

### Version

This library loads: `Vuelidate v0.7.5`

21 changes: 21 additions & 0 deletions composer.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"name": "deadsimple/vuelidate",
"description": "A deadsimple module to use Vuelidate in your Modern Magento 2 Vue Projects ",
"type": "magento2-module",
"license": "MIT",
"authors": [
{
"name": "Maurits Meester",
"email": "[email protected]"
}
],
"autoload": {
"files": [
"registration.php"
]
},
"require": {
"magento/framework": "100.1.*|101.0.*|102.0.*",
"deadsimple/vuelibrary": ">=1.0"
}
}
9 changes: 9 additions & 0 deletions etc/module.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Deadsimple_Vuelidate">
<sequence>
<module name="Deadsimple_VueLibrary"/>
</sequence>
</module>
</config>
7 changes: 7 additions & 0 deletions registration.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<?php

\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Deadsimple_Vuelidate',
__DIR__
);
12 changes: 12 additions & 0 deletions view/frontend/requirejs-config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
var config = {
map: {
'*': {
'Vuelidate': 'Deadsimple_Vuelidate/js/lib/vuelidate.min',
'VuelidateValidators': 'Deadsimple_Vuelidate/js/lib/validators.min',
}
},
shim: {
'Vuelidate': ['Vue'],
'VuelidateValidators': ['Vue']
}
};
1 change: 1 addition & 0 deletions view/frontend/web/js/lib/validators.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 06bd36e

Please sign in to comment.