A Bridge to expose Routes and Variables from multipage applications. Currently developed for Laravel to be user in conjuction with the php package LaravelVueBridge (https://github.com/ianrothmann/LaravelVueBridge)
npm install vuebridge --save-dev
To import the shared laravel routes, use the following plugin:
import {VueBridgeRoutes,VueBridge} from 'vuebridge/vuebridge';
Vue.use(VueBridgeRoutes);
To start a root vue component, use VueBridge.VueRoot:
const App = VueBridge.VueRoot({
store,
el: '#app',
data : {
},
mounted(){
},
methods: {
}
});
Create a mixin on any page page:
const viewMixin = {
...
};
This mixin will automatically be added to the Root Vue instance on page load.
If it is being used with Laravel, you can use the mix plugin to automatically push your view mixins through the laravel mix pipeline for transpilation etc.
In webpack.mix.js
,
const vueBridge = require('VueBridgeJs/vuebridge-webpack');
vueBridge.mixViews(src,dest);
By default src is located in resources/assets/js/views/
and dest public/js/views/
.
More information on view mixins can be found in the LaravelVueBridge component's readme.
Routes will be available as VueResource resources. Components can access:
this.$routes.route_name(data).then(...);
For more information see VueResource resource documentation here: https://github.com/pagekit/vue-resource/blob/develop/docs/resource.md
The route actions may also be accessed through this.$routeActions
VueBridge now requries VeeValidate. It automatically installs the server
validator. You can use it by specifying the route name and the column name to send the value as.
- Example:
server:{route_resource_name},{column_name}
<rw-input v-validate="'required|email|server:unique_email,email'" label="Email"></rw-input>
On the server side (Laravel):
web.php
Route::get('/examples/rocketforms/unique_email/{code}', 'Examples\ExampleController@unique_email')->name('unique_email');
Controller:
public function unique_email($code){
return ['valid'=>false,'data'=>'The field is invalid. I am the server. You sent: '.$code];
}
You have to return an array with valid
=>true/false and the message in data
.
If a Vuex store is used, exposed variables could be accessed through
$store.state.server.variable_name
If Vuex is not used, it will be available in the Root Vue component as this.server.