in a component, I am getting data for a current user with Axios. I get URL for an avatar in this format: avatars/1/mNpxJNRrRPbbWSx0kuIL40JQJIF5SM5dscTq3zpv.jpeg
I need to insert it into Storage::disk("s3"). So how would I let the variable avatar in my component?
I tried like this: <img :src="'Storage::disk("s3")->url(' + this.user.avatar + ')'"> But I get an error...
Post 2022 answer:
It's best to use this package: https://github.com/tighten/ziggy
It allows you to use call route() in vue files.
2017 answer:
I'm not sure if you are using Storage in the blade view or the component. For clarity, one can't use the Storage facade in Vue components. It's only for Laravel.
You have two options: allow the component to accept a prop or create a Laravel route that returns the URL with the help of Storage facade.
#Option 1 - Prop passing
In your blade view,
<my-component :src="'{{ Storage::disk("s3")->url(' + this.user.avatar + ')' }}">
#Option 2 - Laravel route
Create a simple route, something like
Route::get('api/my-avatar', UserController#getAvatar')
In your the UserController
public function getAvatar()
{
return Storage::disk("s3")->url( auth()->user()->avatar );
}
and call that route from axios.
Related
I followed an article here:
https://devlan.io/disabling-personal-teams-in-laravel-8-and-jetstream-1fd083593e08
Basically to disable personal teams in Laravel / Jetstream. Now the article gives the example of how to achieve this using Livewire but I am using Inertia. The Livewire template needs this to be changed from this:
#if (Laravel\Jetstream\Jetstream::hasTeamFeatures()
To this:
#if (Laravel\Jetstream\Jetstream::hasTeamFeatures() && Auth::user()->isMemberOfATeam())
How would I achieve this in Inertia? I have had a look around the web, but because I am new to this stack I am completely stumped.
Thanks in advance.
This is a conditional made in Blade templates. Since Inertia doesn't work with Blade, instead it uses some JavaScript framework (Vue, React, Svelte), what you need to do is to run this conditional somewhere in the Laravel side (Controller, Middleware) and set a variable that you'll pass your client side component to conditionally render the teams html stuff.
If you want to have this flag available to all the pages in your app, you can do this through the HadleInertiaRequests middleware.
class HandleInertiaRequests extends Middleware
{
public function share(Request $request)
{
return array_merge(parent::share($request), [
'has_teams' => Laravel\Jetstream\Jetstream::hasTeamFeatures() && Auth::user()->isMemberOfATeam()
]);
}
}
Then, your component, you can use that variable to render the teams part or not (Example using Vue):
<div v-if="$page.props.has_teams">
<!-- Teams... -->
</div>
In the event that you are developing your software using the Laravel framework and need to use the Vue library, you will face some obstacles, including how to access the files translation system provided by Laravel .
like how to access trans('home.var')
Add Language file like this
<messagings v-bind:language="{{ json_encode(trans('messages')) }}"></messagings>
then in vue component print like this
<h4>{{ this.language.messaging }}</h4>
1: pass trans as prop in blade normally just you need to encoding with json used json_encode() method :
<component :trans="{{json_encode(trans('home'))}}"></component>
2: in vue component page you need to decode json data first and set the translation data in some var :
export default {
props:['trans'],
data () {
return {
translation:[],
};
},
created(){
this.setTranslation()
},
methods:{
setTranslation(){
let decoded_trans = JSON.parse(this.trans);
this.transaction = decoded_trans;
}
}
3: Now you can access laravel trans normaly just be careful because vue will not detect if you call last node or first.
<template>
<div>
<h2>{{translation.header.login}}</h2> // this line in laravel mean : trans('home.header.login')
</div>
<template>
Finally I recently started learning vue , so this method may have some flaws, but We all strive to benefit :)
I want to create a global variable and pass this into all view, so I can get this variable into all blade template
basically, my need is to pass my general setting controller value into my common blade view like header.blade.php
Thanks in advance
For that you will need to add some code in the App->Providers->AppServiceProvider.php like this:
public function boot()
{
view()->composer('*',function($view){
$settings = Settings::firstOrNew(['id' => '1']);
$view->with('settings', $settings );
});
}
According to Laravel documentation you can use view composer:
https://laravel.com/docs/5.8/views#view-composers
for using this feature in app > AppServiceProvider and in boot method you can use this approach for passing parameter to specific view If you have data that you want to be bound to a view each time that view is rendered. this approach meet your need perfectly. for example you want to pass a parameter named userName to header.
View()->composer('header', function ($view){
$userName= "username"
$view->with(['userName'=>$userName]);
});
This is my blade code
<div id="app">
<Testcomponent bam-wam="ham" />
</div>
This is my VueJS Component code
<script>
export default {
name: "ExampleComponent",
props: [
'bamWam'
],
data () {
return {
};
},
created() {
console.log(this.bamWam);
}
}
</script>
Question is
This code runs good but I am asking what is better using Axios and Vuex to fetch data from my Laravel app or simply Pass data throw props like I did in this code?
Pass data through props is the best way.
<my-component my-data="yourData"></my-component>
If you want to use laravel variable for data from blade then,
<my-component my-data="'{{ $data->id }}'"></my-component>
<my-component :my-data="'{!! json_encode($data) !!}'"></my-component>
Avoid api call as much as possible. It will reduce the total number of request to server and expose fewer number of api endpoint.
If the data is available to the view where the component is added. Then the best way to pass php arrays from laravel to a vue component is to utilize json encoding like so:
<my-component :needed-data='#json($laravelCollection)'></my-component>
This will make you will be easily to perform actions to the php array in the Vue controller as if it was a JS object. Keep in mind that you have to use single quotes for #json.
For simple strings you can just directly pass it as props without the encoding.
This approach is better than creating a new API specifically for this component.
This was the only way that works for me:
<my-component :data="{{ $collection }}"></my-component>
JSON parsed solutions prints data in HTML.
My view Codeigniter is like this :
<form id="search_form_hotel" name="search_form" method="post">
...
</form>
...
<script>
...
$.ajax({
url: base_url + 'hotel_booking/hotel/search_hotel',
type: "post",
...
</script>
This :
url: base_url + 'hotel_booking/hotel/search_hotel',
hotel : controller name in laravel framework
search_hotel : method name in laravel framework
Whether it can call a function in the laravel controller from codeIgniter view?
Any help much appreciated
Cheers
No, you can not. Inject controller's function in views are completely outside of arquitectura. Also, laraval does not register the routes in the same way as codeigniter does.
In codeigniter the url pattern defines the structure of a controller, however in laravel you are need to register every route separately without taking in consideration the url format.