README

About

Laravel 5 package that allows you to share your Laravel Configuration Values with your vue front-end, using laravue-config-values.

Laravel 5.7 notice!

Configuration paths have changed in Laravel 5.7, in order for this package to function properly you need to configure correct paths for jsFile in your config\laravue-config-values-generator.php.

Install the package

In your project:

composer require tandd/laravue-configuration-values --dev

For Laravel 5.4 and below:

For older versions of the framework:

Register the service provider in `config/app.php`

TanDD\LaraVueConfigValuesGenerator\GeneratorProvider::class,

Next, publish the package default config:

php artisan vendor:publish --provider="TanDD\LaraVueConfigValuesGenerator\GeneratorProvider"

Then add the config value you want to generator in `config/laravue-config-values-generator.php`

return [
    'configValues'          => [
            'constants',
             ...
        ],
];

You can generate all config in `config` folder.

Using laravue-config-values in VueJS

Generate the include file with

php artisan laravue-config-values:generate

Then defined in Vue main.js file:

import Vue from 'vue';

import ConfigValues from './laravue-config-values.generated';

Vue.use(ConfigValues);

Using in template

The generator adjusts the strings in order to work with laravue-config-values named formatting, so you can reuse your Laravel config with parameters.

config/constants.php:

return [
    'MAX_AGE' => 50,
];

in laravue-config-values.generated.js:

    "constants":{
        "MAX_AGE": 50
    } 

Blade template:

<div class="age">
    <p>{{ config('constants.MAX_AGE') }}</p>
</div>

Vue template:

<div class="age">
    <p>{{ config('constants.MAX_AGE') }}</p>
</div>

Vue script:

console.log(this.config('constants.MAX_AGE'))

License

Under MIT

Auth

Tandd