vue.js component using laravel blade for the template - laravel

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.

Related

How to use Vue components within a blade template in Laravel Nova 4

Any ideas on how to use Vue components within Laravel Nova 4 blade files? In the example below I was testing the <Link> component in the help method for a nova resource field. E.g
Nova Resource:
Text::make('Test Field', 'test')
->help(view('nova.more-info')->render()),
nova.more-info blade file:
<Link class="text-gray-100" href="#foo"><i class="fas fa-circle-question mr-1"></i> Help</Link>
The above just displays the unrendered Link tag in the browser with no errors. However the same code/ component renders as expected in a custom tool or field etc (.vue file).
Thank you for your time.

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.

Handle content which contains laravel blade code in vuejs

#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

What is a blade directive in Laravel?

In a blade template, you see #section, #content, #yield etc. What are blade directives? Are they comparable to PHP or HTML? There doesn't seem to be much explanation on Laravel syntax in the framework.
At a basic level Blade is a templating language that compiles down to PHP and HTML.
When you use #section, #content or #yield in a .blade template file it will be compiled down to PHP.
If you want to dive in exactly to how it works try looking through the tests in frameworks Github or taking a look at the API.

Obfuscate css and html in blade template

Is there a way to make life harder on users which trying to copy my html source in laravel blade templates?
Is it possible to obfuscate blade template without javascript? I know about this for example {{ HTML::obfuscate('me#gmail.com') }} it is working with emails..

Resources