Laravel class access in Vue.js

Asked 18/9, 2018 at 12:53 Answered 24/9, 2018 at 14:27

laravel vue.js laravel-5.6 laravel-blade laravel-5.7

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.

Eskisehir answered 18/9, 2018 at 12:53 Comment(5)

Our Vue app makes a HTTP call to /api/config to get various values it needs to operate into the Vuex store. – Felt 18/9, 2018 at 12:55

Can u please tell location of /api/config and where does vue.js store it? – Eskisehir 18/9, 2018 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. – Felt 18/9, 2018 at 13:9

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 – Sensorium 20/9, 2018 at 22:38

@ceejayoz: Can you please share any sample code? – Eskisehir 28/9, 2018 at 18: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.

Caius answered 21/9, 2018 at 0:27 Comment(0)

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

Lagan answered 23/9, 2018 at 8:48 Comment(0)

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

Natoshanatron answered 24/9, 2018 at 14:27 Comment(0)

Recommended topics

Hot tags