Can I use a Vue interpolation inside a VuePress code block - vuepress

In my VuePress project I have a code block that looks like this
```cs
string pageName = getPageName("{{ $page.key }}");
```
What I want to see on the static site is:
```cs
string pageName = getPageName("v-10013ae8");
```
Where the interpolation of {{ $page.key }} is rendered as v-10013ae8
I've tried
~~~{{ $page.key }}~~~
````{{ $page.key }}````
This is the VuePress documentation I have been following
Templating/Interpolation
Syntax Highlighting

Related

how to static image show in vue?

in My Laravel project I use vue . In my vue component I want to show static image, but the image not showing
<img style="border:10px solid #000;" :src="'public/images/principle.jpg'" alt="">
<img style="border:10px solid #000;" src="/images/principle.jpg" alt="">
The error is because you are defining a string into a vue binding
:src=""
This expects a javascript constant
You could just do
src="/images/test.png"
But this will cause errors as you navigate to sub routes and pages.
In Laravel there is an asset helper and it looks like this
asset('images/test.png')
This will output a full url
http://localhost:8000/images/test.png
This asset helper is useful in PHP. But is not available to JS
So you can make it available using a vue mixin
In the head section of your HTML
Add this
<script> window._asset = '{{ asset('') }}'; </script>
This will bind the asset helper to the window
Next create a mixin in your app/js
It will look something like this
module.exports = {
methods: {
asset(path) {
var base_path = window._asset || '';
return base_path + path;
}
}
}
The final step is to require the mixin
in your app.js
Vue.mixin(require('./asset'));
Then you can use it in vue
<img :src="asset('images/test.png')" />

Show content on blade template depending the url

I'm trying to show some content depending on the url on ablade template but it's not working.
#if(Request::url() === 'myurl')
// code
#endif
I cannot see Request::url() content I tried wir dd, #dd, {{Request::url() }}, but always I get the literal text.
what I have to do?
Instead of matching urls, use request pattern matching. In blade you can do.
#if(request()->is('user/yourroute'))
// code
#endif
#if(Request::is(''))
// code
#endif

Shopify Assets API unexpected constant in blade template

I am passing mySnippet in Shopify via assets API then later i want to use the variables passed from include snippet i am getting unexpected constant
Snippet code i put in cart.liquid file
{% include 'mySnippet', appKey:'2001' %}
My PHP CODE
$mySnipet = view('mySnippet')->render();
Blade file
{{mapKey}}
Error
Unexpected constant mapKey
You can pass liquid variable string in value of key in view then from your snippet you can use it as following
{% include 'mySnippet', appKey:'2001' %}
PHP CODE
$data = array();
$data['mapKey'] = "{{mapKey}}";
$mySnippet = view('mySnippet',$data)->render();
Blade Template
{{$mapKey}}
Final output in template.liquid at Shopify will be following
{{mapKey}}
Once your snippet render on Shopify page it
2001

Change interpolation brackets - Angular2

I want to use Laravel Blade and AngularJS.
Is some way to change interpolate sintax, change {{text}} for [{text}] or somthing like that?
I already change all components.ts files adding the line:
interpolation: ["{[", "]}"],
but, where I write blade, app breaks...
Thanks a lot everybody ;)
You can define your Blade content tags in your routes.php file:
Blade::setContentTags('<%', '%>');
Blade::setEscapedContentTags('<%%', '%%>');
EDIT: You can add # in front of the brackets, so Blade won't render it.
#{ var }
or you can pass the directive for blade not to render part of the HTML using #verbatim keyword.
#verbatim
<div>
{{ var }}
</div>
#endverbatim

Laravel blade #include into a Javascript variable?

In a Laravel 5 blade template I have a <script> section.
In this section I need to set a variable to a string that is coming from another blade template.
I tried something like :
<script>
var a = "#include 'sometext.blade.php' ";
</script>
but this obviously doesn't work.
Also, the included blade can contain both single and double quotes, so these need to be escaped somehow, or the Javascript will not be valid.
Any ideas?
Ended up needing similar functionality when working with DataTables, and the additional actions HTML needs to be injected after the fact via jQuery.
First I created a helper function with this (from Pass a PHP string to a JavaScript variable (and escape newlines)):
function includeAsJsString($template)
{
$string = view($template);
return str_replace("\n", '\n', str_replace('"', '\"', addcslashes(str_replace("\r", '', (string)$string), "\0..\37'\\")));
}
Then in your template you could do something like:
$('div.datatable-toolbar').html("{!! includeAsJsString('sometext') !!}");
to include the sometext.blade.php blade template with escaping of quotes and removal of newlines.

Resources