Is there some way I can use blade type syntax with React to handle my Laravel routes? Let's say I have something like the following:
<div class="card">
Go to your account
</div>
If I try to make this into a Reactjs component, clearly the blade type syntax won't work.
I have looked into React Router, but don't exactly know how it would fit into my application, or if it is even necessary for me to use (I'd much rather use plain Laravel routes).
React code is not executed by Laravel, but by the user's browser. So when the time comes to generate that href, inside the user's browser, the code does not have any more access to Laravel or Blade tools.
What you can do is to pass all the info you need to your React app, beforehand, when you use blade to generate the top level React invocation:
<script>
React.render(
MyApp({
accountShow: "{{ route('account.show', $user->slug) }}",
//etc.
}),
document.getElementById('myContainer')
)
</script>
So then in your React app you can use those properties and pass them down to inner components, e.g:
<CardLink href={this.props.accountShow}>
Go to your account
</CardLink>
Related
i m new to vue & i does lots of google but have not found any solution which is match to my current situation so don't know how i can pass route in vue component,
is there any way to pass this laravel route into vue template as below. my vue is location is resource/assets/js
here is code
<template>
<a href={{route('/')}}></a>//i want to pass laravel route
//to view component this line
//throw error
</template>
route(web.php) code
Route::get('/' , function(){
Return view('homepage');
});
i want to pass this url into vue component whose location (vue) is resource/assets/js
You have to pass it as a prop inside your vue component.
They are two different steps.
Laravel spits out the compiled template
Vue parses the components and initializes them.
At step 2 you have to pass a prop with the route parsed at step 1
Something like this
<my-component route="{{ route('my-route') }}"></my-component>
Then within your component
<template>
<a :href="route">CLICK HERE</a>
</template>
<script>
...
props: {
route: { type: String, required: true }
}
...
</script>
Try with
<a :href="{{route('/')}}"> or <a v-bind:href="{{route('/')}}">
Don't use double curly brackets in your Vue components in relation to Blade. They are not functionally equivalent. Instead, pass the url as a string or bind it to a data attribute. The interpolation error you're seeing is a result of using the curly brackets and expecting them to be rendered vie the blade engine.
Your example is quite simple as route('/') is equivalent to just /.
// this is all you need to hit your defined route.
...
Take a look at this package for generating client side routes and helpers in the Laravel fashion. Quite a handy package, I might add. I've used it myself in several larger projects.
https://github.com/aaronlord/laroute
As an aside, you mean the resources location resource/assets/js. Ultimately, that component will be located within your public directory if you use a build tool such as webpack, grunt, gulp, etc. so it's current location within the project directory isn't particularly relevant.
OK, since none of above really worked for me, my solution is:
<my-component route="'{{ route('my-route') }}'"></my-component>
(This is an example of passing a route through component's props, but should work the same when used within <a href=...)
For me looks like Vue doesn't know that you're trying to pass a string so tries to evaluate your route as an expression. Quotes tell Vue that you want this to be a string.
Another solution, which works for passing almost everything (for instance whole objects) to Vue is encoding your variable using JSON format like:
<my-component route="{{ json_encode(route('my-route')) }}"></my-component>
Or Laravel 5.5 and up you can use #json shortcut Blade directive for json_encode:
<my-component route='#json(route('my-route'))'></my-component>
Going further about JSON and objects - if Blade destroys your object data because of escaping the content you can use the following code:
<my-component route="{!! json_encode(route('my-route')) !!}"></my-component>
More on JSON and escaping data in Blade you can find here.
I'm a software engineer and don't have a lot of experience with PHP or javascript. I will upgrading my skills in this so i started with a PHP framework Laravel which looks very nice in my opinion. I'm familar with the MVC principal so i can find my way in Laravel!
I created some models with corresponding controllers. I also created some blade views to display the data. I give a model object to the blade view as folows:
$person = new \App\Person("Firstname", "Lastname");
return view('personView', compact('person'));
I can get it done to use the person object in the blade view to display his variables with:
{{ $user->name }}
Now i tried to go one step further and want do do some stuff with Vue so i can display and manipulate the object on client side (and dispay dynamic data). Later i want to save the client side object via a action in the controller over a HTTP post or something, but fist things first...
I'm be able to create a vue object with some data in it and display it in HTML controlls for example.
So, summerized
i'm be able to generate my backend objects and manipulate them. I can bring them to my view and display them with {{ $obj->var }}
I'm be able to create Vue objects with data, and manipulating this data and show it with #{{ data }}.
My problem is that i can't get the data from the controller (which i give wat i gave to the view) into the Vue object. What is the best practice to do this? Or is this not the way to go? in that case, what is convinient to do as i read that Laravel has Vue integrated and this sounds for me that there should be a (best practice) way to achieve this?
I looked for a creat tutorial but couln'd find this. So if someone has a good tutorial to learn understanding Laravel in combination with Blade and Vue, please share!
I already tried something like this, unfortunately without any result:
new Vue({
el: '#someElement',
data: {
person: {!! $person!!}
}
})
(Using Laravel 5.4.x and Vue 2.4.x)
You can simply pass the object to the vue component like that:
<my-component :person="{{ $person }}" ></my-component>
And your Vue component
<template>
{{ person.name }}
</template>
<script>
export default {
props: ['person']
}
</script>
I'm using Vue.js and Laravel to render a simple table listing products. From there I want to link to a product detail page like this:
#{{ product.id }}
Since the table is generated on client side base on a data object, I'm looking for the most elegant way to implement that while not bypassing any laravel methods like route() that allows me to link to a named route.
Do I really have to manually merge the result of the route-method with the Vue variable in Javascript?
In my mind is something like:
#{{ product.id }}
which I could probably parse/inject by Vue via data binding?
As Vue it's client side and laravel it's server side you can't accomplish that in that way.
But you can do something like this over the rendered route:
Create a vue method
goto_route: function (param1) {
route = '{{ route("yournamedroute", ["yourparameter" => "?anytagtoreplace?"]) }}'
location.href = route.replace('?anytagtoreplace?', param1)
}
Now in your action element
<div v-for="o in object">
<a v-on:click="goto_route(o.id_key)">press</a>
</div>
Basically you're replacing the... uhmm... let's name it "placehoder" in the rendered route with the required value.
hope it helps.
As mentioned in the title I'm using Laravel 5.2 and I've set up TwigBridge so I can use twig for my views. I'm just using the basic Auth package that comes with Laravel. The problem is when I use twig templates I get the following error:
An exception has been thrown during the rendering of a template ("Session store not set on request.") in "...resources/views/auth/register.twig" at line 17.
This is pointing to a use of the {{ old('name') }} call. I've tried switching it to input_old as I think TwigBridge prefers that, but that didn't help. If I use the blade template there's no problem though. I'm not doing anything special either. I just rename the blade template so it isn't called, and my register twig template is called instead since it uses the name register.
The old values are fetch from the session. To get these values to store in session & fetch these values back, you need to apply \Illuminate\Session\Middleware\StartSession and
\Illuminate\View\Middleware\ShareErrorsFromSession middlewares to your routes. Both of these are a part of middleware group web.
You can apply web middleware group to all your routes(unless you are creating an API), like this:
Route::group(['middleware' => ['web']], function () {
Route::get("login" , "AuthController#getLogin");
//Similarly all other routes here
});
Here i was i have :
A RESTful Symfony API that i created with few bundles
A front AngularJS that i have in the web repository
Now here is a sample of my routing file :
$routeProvider.
when('/liste-produits', {
templateUrl: '../templates/list-products.html',
controller: 'ProductListCtrl'
}).
otherwise({
redirectTo: '/'
});
The fact that i have to use "../". Because otherwise it won't work in dev environnement (app_dev.php). And of course by the time i will post it in production (app.php) i won't need to add this "../"
Do you guys understand my problem ?
Since i can get assetic from Symfony work in the routing file.
How can i solve this ?
There is an approach, where you define a global variable in your base twig file:
Symfony 2:image paths in javascript file with assetic which you can in turn use in e.g. AngularJS.
There is also a bundle called FOSJsRoutingBundle, it sort of exposes your routes to the client and thus javascript. That might be interesting for you.
However there is another option; - I have personally used the approach posted by Rein Baarsma with the twig file and then cached the resulting javascript.
It's fairly simple to write a request listener that renders the twig file to a javascript file once a day or whenever the javascript file is deleted.
I used the same approach with the stylesheets for a project with daily changing colors.
If you do not cache it, the browser will revisit the route returning the javascript on each page and rerender the javascript file, which adds a lot of overhead.
You could simply make a Symfony Controller with a view on a js file. That way you can use the twig (or php) template functions (like twig's path() function) to avoid any strange urls.
In your controller:
public function routingAction(Request $request) {
$this->render('angular/routing.twig.js');
}
And in your routing
$routeProvider.
when('/liste-produits', {
templateUrl: {{ path('product_list') }},
controller: 'ProductListCtrl'
}).
otherwise({
redirectTo: '/'
});