Roots Discourse

How to integrate third party API in Sage with Vue

Hey guys,

Currently I am working on a project where I need to integrate a third party API in a WordPress theme. I am currently using Bedrock and Sage and I am probably gonna use Vue for loading the API data.

The website needs to present the API data in the following ways:

So far I have integrated Vue in my Sage theme successfully, that’s working perfectly. The main question I have is how to do the routing for the archive and single pages. Can I use Vue router for that? How does that work together with Sage/WordPress? How can I get an animal ID from the URL and pass it into Vue so it shows the right animal page?

Any help or suggestions will be greatly appreciated! I am currently using the Roots stack for 3 months and I’m loving it! :smile:

Cheers,
Ferre

@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.

Awesome, @Andrew_Scofield! I thought I posted a reply but now I see that I didn’t finish it when I started it ;-). I am still working on this implementation, I chose to do it in a custom WP plugin so I can use the functionalities on other projects as well. So with that it is technically not Sage related anymore…

If people are interested in the implementation of an API with Vue in a custom WordPress plugin let me know, then I will work out in detail how that works. Maybe I can help the community by doing that.

This topic was automatically closed after 42 days. New replies are no longer allowed.