Laravel class access in Vue.js

Question

I have the following class where I defined my Minimum/Maximum length values:

class MinMaxValuesUser {
    const Min_UserName = 6;
    const Max_UserName = 30;
}

Below is the rule in request class where the min max values are used instead of hardcoding it.

public function messages() {
    return [

        "Min_UserName.min" =>  trans("Profile.Min_UserName"),
        "Max_UserName.max" =>  trans("Profile.Max_UserName")
    ];
}

public function rules() {

    return [
        "UserName" =>  "min:" . MinMaxValuesUser::Min_UserName 
                          . "|max:" . MinMaxValuesUser::Max_UserName
    ];
}

and below is the JQuery Validate code where I used the same server-side class.

$('form#frmProfile').validate({
    rules: {
        UserName: {
            minlength: {!! \App\MinMaxValues\MinMaxValuesUser::Min_UserName !!},
            maxlength: {!! \App\MinMaxValues\MinMaxValuesUser::Max_UserName !!}
        }
    }
});

Issue

As I am writing a lot of code, so I have started to use Vue.js which is already embedded in Laravel. Everything works great here

but as we know vue.js is a front-end framework and loads in client side so will not be able to use the above server-side classes to keep the min max numbers centralized.

Kindly suggest how to get rid of this issue.

Answer 1

put your user configurations in a /config/user.php file like this

<?php

return [
  'Min_UserName' => 4,
  'Max_UserName' => 10
];

You can now access it anywhere in your php like this

config('user.Min_userName'); // specific value
config('user'); // array of both values

And you can place it into your view files like this:

@json(config('user'))

If your view component is defined in a blade file you can put this in your data definition:

'user_requirements': @json(config('user'))

If your vue component is buried down further in a js file then you'll want to define a js variable in your blade template (probably your layout) like this

let MyUserReqs = @json('user');

And then you can define it in your vue component using the js variable MyUserReqs .

Answer 2

You can set up your app.blade.php template something like this:

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Site Properties -->
    <title>{{ config('app.name') }}</title>

    <!-- Styles -->
    <link href="{{ asset('inside/css/app.css') }}" rel="stylesheet">

</head>
<body>

    <div id="app"></div>

    <!-- Scripts -->
    <script src="{{ asset('inside/js/app.js') }}"></script>

    <script type="text/javascript">
        const globalProps = {
            minlength: {!! \App\MinMaxValues\MinMaxValuesUser::Min_UserName !!},
            maxlength: {!! \App\MinMaxValues\MinMaxValuesUser::Max_UserName !!}
        }

        globalProps.install = function(){
          Object.defineProperty(Vue.prototype, '$globalProps', {
            get () { return globalProps }
          })
        }

        Vue.use(globalProps);
    </script>

</body>
</html>

We define a constant, then "install/define" that constant as a vue.prototype object, then we tell vue to use it. You can also do that set up in any blade template... but if you need it everywhere on you app, you can set it up here.

Then you are ready to go, in your vue instances you can use it like this for the html/template

<div v-if="$globalProps.minlength == 6"></div>

And if you want to access it inside the script:

methods: {
    someMethod() {
        if(this.$globalProps.maxlength == 6){
        }
    },
}

Outside vue, on jquery, you could refer to it simply as globalProps.maxlength

Answer 3

I would take the validation logic away form the front end and instead handle this in the backend. This way, you only have to write the validation logic in one place and the front end will handle the response appropriately.

Jeffery Way did a really good tutorial on this. I would recommend following this - https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19

Laravel class access in Vue.js

Question

3 answers

solution1
5 2018-09-21 00:27:25

solution2
2 2018-09-23 08:48:06

solution3
0 2018-09-24 14:27:33

Laravel class access in Vue.js

Question

3 answers

solution1 5 2018-09-21 00:27:25

solution2 2 2018-09-23 08:48:06

solution3 0 2018-09-24 14:27:33

solution1
5 2018-09-21 00:27:25

solution2
2 2018-09-23 08:48:06

solution3
0 2018-09-24 14:27:33