tl;dr:
Use
<example :data="{{ json_encode($data) }}"></example> for Blade and
props: ['data'] for component.
Beware of using
{!! !!} for content contains
" and
'.
—
Recently I write a lot of Laravel and VueJS 2 then faced with the common case when want to pass PHP variables to VueJS component.
There are a lot of proposed methods including pass as global JS variables, pass as a slot, and pass as a props.
Each one has its own advantages and disadvantages here I will explain.
In the most cases, we place the Laravel in the root path /.
As a result, the nginx configuration becomes
|
1 2 3 |
location / { try_files $uri $uri/ /index.php?$args; } |
However, if we want to move Laravel inside other directories, we must also change the location directive along with the public/index.php file.
Let’s say we want to move to the /app directory. Then the location directive would become
|
1 2 3 |
location ~ ^/app/. { try_files /$uri $uri/ /app/index.php$is_args$args; } |
Since nginx indicates the root path already, so we have to always refer from the root path.