@ferremek You can probably use Vue router, never tried it. Obviously Vue router is just updating the url in JS, so there is a chance if you change your urls in wordpress that your Vue would be using different urls.
But for your situation what I’d use is wp_localize_script. That will give you the ability to pass data to your JS. For example I have done something like this:
$search_index = get_field('search_index', 'option');
wp_localize_script( 'site/main.js', 'sitejs', [
'preloaded' => \App\preloaded_urls(),
'search' => [
'index' => $search_index
]
]);
Note that this is used in conjunction with wp_enqueue_script, using the same handle you used to register your js. In sage thats happening here
Whats going on is that I’m grabbing an ACF option setting to push that to my JS, in this case its for what Algolia search index to use for custom js search field. Also I’m calling a function that outputs an array of custom dirs for various assets. But that point is you can load up your custom logic here, including current animal/event id, router data, probably even the router structure itself to help you stay perfectly in sync.
This data can be accessed from vue from a global variable, based on the 2nd parameter, so in my example of window.sitejs would contain my array of data from the 3rd parameter.
That said, there is another technique for when I need to load actual page data like from the wp rest api. I register custom rest route and then output it inline
public static function api_request($route, $variable, $handle)
{
$preload_data = array_reduce(
[$route],
'rest_preload_api_request',
array()
);
wp_add_inline_script(
$handle,
sprintf( 'var %s = %s;', $variable, wp_json_encode( $preload_data[$route]['body'] )),
'before'
);
}
I make this a static function in my App.php controller and use it like this in any of my blade templates:
{{App::api_request('/site/v1/all_teachings', 'site_events', 'site/main.js')}}
Hope that helps point you in the right direction. Would love to know how you went about getting Vue going in your Sage install. I’ve gotten it working, but I’m sure there is other ways.
