tandd/laravue-configuration-values

Generates a vue config file from your Laravel Configuration Values.

3.0.0 2021-06-17 19:24 UTC

Requires

• php: >=5.6.0
• ext-json: *
• ext-mbstring: *
• illuminate/console: ~5.1.0|~5.2.0|~5.3.0|~5.4.0|~5.5.0|~5.6.0|~5.7.0|~5.8.0|~6.0|~7.0|~8.0
• illuminate/support: ~5.1.0|~5.2.0|~5.3.0|~5.4.0|~5.5.0|~5.6.0|~5.7.0|~5.8.0|~6.0|~7.0|~8.0

MIT

• TanDD

• laravel
• vue-configuration-values
• laravel-vue.js-configuration-values

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