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.

Our Vue app makes a HTTP call to `/api/config` to get various values it needs to operate into the Vuex store. — ceejayoz, Sep 18 '18 at 12:55
Can u please tell location of `/api/config` and where does vue.js store it? — Pankaj, Sep 18 '18 at 12:57
We created it. We made a Laravel route that outputs a JSON response including the various configuration items we want the Vue app to have. It's not something that's built-in. — ceejayoz, Sep 18 '18 at 13:09
Creating a blade file with global JS variables that are your constants in the classes. You can also use a middleware to know where to put those variables. I don't, just an idea — dacastro4, Sep 20 '18 at 22:38

score 5 · Answer 1 · answered Sep 21 '18 at 00:27

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.

Erubiel · Answer 2 · 2018-09-23T09:02:48.257

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

score 0 · Answer 3 · answered Sep 24 '18 at 14:27

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

3 Answers3