├── .gitignore ├── README.md ├── dist ├── build.js └── build.js.map ├── package.json ├── src ├── error.js ├── form.js ├── main.js └── mixin.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | .idea/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Laravel Validator 2 | 3 | This plugin handle laravel validation response and simple creating form and posting data. 4 | 5 | #install 6 | ``` 7 | npm i vue-laravel-validator --save 8 | ``` 9 | ##Usage 10 | javascript file 11 | ``` js 12 | import Vue from 'vue'; 13 | import VueResource from 'vue-resource'; 14 | import LaravelValidator from 'vue-laravel-validator'; 15 | 16 | Vue.use(VueResource); 17 | Vue.use(LaravelValidator); 18 | 19 | new Vue({ 20 | data(){ 21 | return { 22 | form: this.$form({ 23 | 'user': null, // or Vuex this.user.name eg. 24 | 'age': null, 25 | 'email': null 26 | }) 27 | } 28 | }, 29 | methods:{ 30 | sendform(){ 31 | this.form.post('http://yourlaravel.com/api/save').then((response) => { 32 | console.log('success') 33 | }, (response) => { 34 | console.log('error') 35 | }) 36 | } 37 | } 38 | }); 39 | ``` 40 | template file 41 | ``` html 42 | 65 | ``` 66 | 67 | Laravel Validation 68 | ``` php 69 | public function save(Request $request){ 70 | $this->validate($request, [ 71 | 'name' => 'required|min:3|max:32', 72 | 'age' => 'required|numeric|max:99|min:18', 73 | 'email' => 'required|email' 74 | ]); 75 | } 76 | ``` 77 | 78 | ## Available Properties 79 | | Title | Type | Description | 80 | | :------------- | :------------- | :------------- | 81 | | `.$busy` | `Boolean` | form proccess status (use loading animation eg.) | 82 | | `.$errors.get({input})` | `Array|String` | Get laravel response error | 83 | | `.$errors.has({input})` | `Boolean` | get input has error | 84 | | `.$errors.all()` | `Array|String` | get all laravel errors | 85 | | `.$fields.{input}` | `Input` | get raw input value (use in template) | 86 | | `.post(uri)` | `string` | Vue-resource post method | 87 | | `.put(uri)` | `string` | Vue-resource put method | 88 | | `.delete(url)` | `string` | Vue-resource delete method | 89 | -------------------------------------------------------------------------------- /dist/build.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueLaravelValidate=t():e.VueLaravelValidate=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var u=n[r]={exports:{},id:r,loaded:!1};return e[r].call(u.exports,u,u.exports,t),u.loaded=!0,u.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(4)},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n {\r\n resolve(response);\r\n }, (response) => {\r\n\r\n vm.setError(response.data);\r\n\r\n reject(response);\r\n\r\n }).finally(() => {\r\n vm.setBusy(false);\r\n });\r\n\r\n });\r\n }\r\n\r\n}\n\n\n// WEBPACK FOOTER //\n// ./src/form.js","import Form from './form';\r\n\r\nexport default class{\r\n\r\n constructor($http) {\r\n this.$http = $http;\r\n }\r\n\r\n form(fields) {\r\n return (new Form(fields, this.$http));\r\n }\r\n\r\n}\n\n\n// WEBPACK FOOTER //\n// ./src/main.js","import Main from './main';\r\n\r\n\r\nexport default {\r\n install: function (Vue) {\r\n Vue.mixin({\r\n beforeCreate: function () {\r\n this.$form = (new Main(this.$http)).form;\r\n }\r\n });\r\n\r\n }\r\n};\n\n\n// WEBPACK FOOTER //\n// ./src/mixin.js"],"sourceRoot":""} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-laravel-validator", 3 | "description": "Laravel validation error handler for vuejs", 4 | "author": "Metin Seylan", 5 | "license": "MIT", 6 | "main": "dist/build.js", 7 | "scripts": { 8 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 9 | }, 10 | "devDependencies": { 11 | "babel-cli": "^6.11.4", 12 | "babel-loader": "^6.2.5", 13 | "babel-preset-es2015": "^6.3.13", 14 | "babel-preset-stage-0": "^6.3.13", 15 | "cross-env": "^2.0.0", 16 | "webpack": "^1.13.2" 17 | }, 18 | "dependencies": { 19 | "vue": "^1.0.26", 20 | "vue-resource": "^0.9.3" 21 | }, 22 | "version": "1.0.3", 23 | "repository": { 24 | "type": "git", 25 | "url": "git+https://github.com/MetinSeylan/VueLaravelValidator.git" 26 | }, 27 | "keywords": [ 28 | "vuejs", 29 | "laravel", 30 | "validator", 31 | "vuejs", 32 | "validate", 33 | "form" 34 | ], 35 | "bugs": { 36 | "url": "https://github.com/MetinSeylan/VueLaravelValidator/issues" 37 | }, 38 | "homepage": "https://github.com/MetinSeylan/VueLaravelValidator#readme" 39 | } 40 | -------------------------------------------------------------------------------- /src/error.js: -------------------------------------------------------------------------------- 1 | export default class{ 2 | 3 | constructor($errors) { 4 | this.$errors = $errors; 5 | } 6 | 7 | 8 | has(id){ 9 | return this.$errors.hasOwnProperty(id); 10 | } 11 | 12 | get(id){ 13 | if(this.has(id)) return this.$errors[id]; 14 | } 15 | 16 | 17 | all(){ 18 | return this.$errors; 19 | } 20 | 21 | 22 | } -------------------------------------------------------------------------------- /src/form.js: -------------------------------------------------------------------------------- 1 | import Error from './error'; 2 | 3 | export default class{ 4 | 5 | constructor(fields, $http) { 6 | this.$fields = fields; 7 | this.$http = $http; 8 | this.$errors = new Error({}); 9 | this.$busy = false; 10 | } 11 | 12 | 13 | post (uri, options) { 14 | return this.request('post', uri, options); 15 | } 16 | 17 | patch (uri, options) { 18 | return this.request('patch', uri, options); 19 | } 20 | 21 | put (uri, options) { 22 | return this.request('put', uri, options); 23 | } 24 | 25 | setBusy(status){ 26 | this.$busy = status; 27 | } 28 | 29 | setError(errors){ 30 | this.$errors = new Error(errors); 31 | } 32 | 33 | request (method, uri, options) { 34 | this.setError({}); 35 | var vm = this; 36 | 37 | return new Promise(function (resolve, reject) { 38 | vm.setBusy(true); 39 | 40 | vm.$http[method](uri, vm.$fields, options).then((response) => { 41 | resolve(response); 42 | }, (response) => { 43 | 44 | vm.setError(response.data); 45 | 46 | reject(response); 47 | 48 | }).finally(() => { 49 | vm.setBusy(false); 50 | }); 51 | 52 | }); 53 | } 54 | 55 | } 56 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Form from './form'; 2 | 3 | export default class{ 4 | 5 | constructor($http) { 6 | this.$http = $http; 7 | } 8 | 9 | form(fields) { 10 | return (new Form(fields, this.$http)); 11 | } 12 | 13 | } -------------------------------------------------------------------------------- /src/mixin.js: -------------------------------------------------------------------------------- 1 | import Main from './main'; 2 | 3 | 4 | export default { 5 | install: function (Vue) { 6 | Vue.mixin({ 7 | beforeCreate: function () { 8 | this.$form = (new Main(this.$http)).form; 9 | } 10 | }); 11 | 12 | } 13 | }; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpack = require('webpack'); 3 | module.exports = { 4 | entry: ['./src/mixin.js'], 5 | output: { 6 | path: path.resolve(__dirname, './dist'), 7 | filename: 'build.js', 8 | library: ['VueLaravelValidate'], 9 | libraryTarget: 'umd' 10 | }, 11 | resolveLoader: { 12 | root: path.join(__dirname, 'node_modules'), 13 | }, 14 | module: { 15 | loaders: [ 16 | { 17 | test: /\.js$/, 18 | loader: 'babel', 19 | exclude: /node_modules/, 20 | query: { 21 | presets: ['es2015'] 22 | } 23 | }, 24 | { 25 | test: /\.json$/, 26 | loader: 'json' 27 | } 28 | ] 29 | }, 30 | devtool: 'eval-source-map' 31 | } 32 | 33 | 34 | 35 | 36 | if (process.env.NODE_ENV === 'production') { 37 | module.exports.devtool = 'source-map' 38 | 39 | module.exports.plugins = (module.exports.plugins || []).concat([ 40 | new webpack.DefinePlugin({ 41 | 'process.env': { 42 | NODE_ENV: '"production"' 43 | } 44 | }), 45 | new webpack.optimize.UglifyJsPlugin({ 46 | compress: { 47 | warnings: false 48 | } 49 | }), 50 | new webpack.optimize.OccurenceOrderPlugin() 51 | ]) 52 | } 53 | 54 | --------------------------------------------------------------------------------