Handle content which contains laravel blade code in vuejs - laravel

#Asking
Help me for my problem,
I have blog content and it has syntax examples like {{ $title }} because my content describes laravel blade.
Problem
When I render my blog content on Vuejs everything goes wrong because there is a sytax blade {{ $title }}
Any solution to this problem?

please use below code
{{ $title }} - use for laravel blade
{{{$title}}} - use for Vue js in laravel blade page
if you want to bind both please try with below code
In script tag
var title = '{{$title}}';
In Vue js CLI
data:return{ title:'{{$title}}' }
If you still getting a problem, then please brief all about your problem with the code I will resolve it.

I try to parse README.md file from hexters/rolevel and I render the README.md content with vuejs, and my apps error and Blank

Related

how to highlight Laravel Blade directives inside script tags with vscode?

If I have a basic component with inline scripts like this
LARAVEL PHP COMPONENT
#if(true)
<div class="button-comp"></button>
#endif
<script>
#if(true)
document.querySelector('.button-comp').addEventListener('click', (e) => console.log(e) );
#endif
</script>
the Blade if directives inside the script tags, will not highlight in a correct way:
is there any settings that I'm missing in my vscodes's laravel extensions?
Laravel Extra Intellisense
Laravel Blade Snippets
UPDATE
this is related to LARAVEL BLADE SNIPPETS extension, there are other users with the same issue https://github.com/onecentlin/laravel-blade-snippets-vscode/issues/127. As #TimLewis wrotes in the comments, only solution is to assign the PHP variable to a JS variable, and use a JS if statement,in this way I can avoid the use of blade directives.

Laravel 8 Livewire wire:click:prevent Not Working

Please Someone please I am in the middle of my final year project but this is not working I am trying for 3 days I am new so I don't know how to ask a question so if you need something please ask me Thanks
This is the view for Shop and i have used Composer require Hardevine/shoppingcart
This is the ShopComponent for Shop
When I ran Laravel 8 on IIS, I had a similar problem. The problem was that the browser couldn't access some of the livewire js files, and the solution was:
Go to D:\Projects\Laravel\laravel8ecommerce\vendor\livewire\livewire\config\livewire.php
and set
'asset_url' => "your_url",
and the problem was disappeared.
I had same problem. To solve this issue what I did was enclose my blade template files with a <div> containing an id="main" like so:
<div id="main">
your blade template code
<div>
Instead Of This
wire:click:prevent=“store({{$product->id}},’{{$product->name}}’,{{$product->regular_price}})”
You need to use this in your blade file
#livewireStyles
your code will be in this area
#livewireScripts
Try This For Calling Store Function
wire:click.prevent="store({{$product->id}},{{$product->name}},{{$product->regular_price}})”
Or
wire:click="store({{$product->id}},{{$product->name}},{{$product->regular_price}})”
My solution was based on #KumTem answer
Inside the livewire blades located at app\resources\views\livewire\sample_blade.php
<div id="main">
... templates here
</div>

Laravel (5.2) Blade - How to prevent a Blade Directive in an email address from being parsed?

Update This is a bug in Laravel 5.2 & 5.3
I've got a weird one here. A user's email address on our client's system has a domain with the following substring in it '#parent'. I am not including the whole thing just for the sake of privacy.
Because #parent is a Blade directive, Laravel seems to either process or ignore the #parent and strips it out of the rendered email address on the page.
For example, let's say the email address is john#parentstuff.com. Laravel will render the following on the page: johnstuff.com. See how it removes #parent from the email?
What I've tried to fix it:
1. {!! $user->email !!}
2. {{ e($user->email) }}
I know that this is an issue with Blade as AJAX & jQuery rendered content with this same email address is displayed just fine elsewhere on the site.
UPDATE
Upon further investigation, it appears this may be a bug in how Blade processes the #parent directive. I set up 3 new Laravel projects for the following versions: 5.2, 5.3 and 5.4. The project in question is a Laravel 5.2 project, FYI.
I created the following setup for each of the above mentioned versions to test the bug.
Route
Route::get('/test', function () {
$foo = 'john#parentingstuff.org';
return view('test')->with('foo', $foo);
});
Templates
Base
<html>
<head>
<title>App Name - #yield('title')</title>
</head>
<body>
<div class="container">
#yield('content')
</div>
</body>
</html>
Test View
#extends('test-base')
#section('content')
{{$foo}}
#endsection
Outputs
L5.2: johningstuff.org
L5.3: johningstuff.org
L5.4: john#parentingstuff.org
Theories
One very interesting case I noticed while running these tests was that having the {{$foo}} variable inside of a #section directive vs moving it outside of the #section directive led to two different outputs.
Example
{{$foo}}
#section('content')
{{$foo}}
#endsection
The output of this was...
john#parentingstuff.org
johningstuff.org
Conclusion
So, does anyone know how to patch this bug in Laravel 5.2 or Laravel 5.3? Currently, upgrading to L5.4 is not an option for our client.
Anyone have any clever tricks they can think of that might help?
I believe the problem is elsewhere. You are doing probably something more than you wrote.
Sample controller method content
return view('test', ['email' => 'john#parentstuff.com'];
Sample view:
Email is: {{ $email }}
Result is:
Email is: john#parentstuff.com
so I believe you are doing something more than you wrote.
Something very screwy is going on in your setup, because that shouldn't be possible. Laravel processes Blade instructions before interpreting any variables.
I tested with a very simple example:
Route::get('test', function() {
$foo = 'john#parentstuff.com';
return view('test')->with('foo', $foo);
});
and a Blade template of:
{{ $foo }}
and it works just fine. #parent is not interpreted.
This is a bug in Laravel verions prior to 5.4. See the following:
https://github.com/laravel/framework/issues/10068
https://github.com/laravel/framework/pull/16033
This is a bug in Laravel 5.1 too.
A quick solution could be to change the # sign to
#
to fix it.

Display images in Laravel

I can't get the images to display on my laravel website. I have the images in the public/img directory and have tried with
src="{{ url('img/logo.png' }}"
and
{{ HTML::image('img/logo.png') }}
I'm using Laravel 5.2. The url displays correctly in the web console as localhost:8000/img/logo.png but doesn't display the image
I don't know whether it was your typo when writing this post or not, can you try to change your code to:
src="{{ url('img/logo.png') }}"
^
you left out a close bracket
If there is any changes please leave it in comment, I will try to modify my answer.
Hope it helps =)

vue.js component using laravel blade for the template

My idea is to use laravel blade in the <template></template> of a vue/vueify component. I am not sure how to get the blade processor to run and output the html into the template inside the .vue file or in an imported template file.
I don't believe what he's trying to do is preposterous.
I find that there're things that Laravel blade does better than Vue and just want to get a prepared blade run template to be returned asynchronously using vue resource.
What you can do is actually make vue blade templates. That are actually then passed by Laravel via a route that returns a view that has vue code. That way it enables the user of blade templates to do what he does best in PHP and blade them return a good vue template that had code.
If you have the template inline then you can output whatever you want inside of it ( from your something.blade.php file ):
<super-duper-component inline-template >
{!! $some_php_variable_sent_to_the_view !!}
#{{ $data.someVueDataProperty | json }}
</super-duper-component>
You can use the blade #include('path-to.super-duper-component') to include this snippet from a simple super-duper-component.blade.php file so you can keep the component's template in one location for maintaining the template in the future.

Resources