Vue.js + AJAX Shortcode

Question

I know this question has been asked before, but I can't find a substantial answer for my specific use case.

Overview

I've been working developing a Wordpress based website using the REST API and Vue.js as the front end framework. I have no issue fetching posts, displaying data, etc.

Issue

Since Vue.js runs in the client side, I'm having some issues when working with plugins/shortcodes that require to be rendered server side within the php. I'm looking for a solution to render a shortcode in a php function and send the rendered data to my front end, to ultimately display it using Vue.js.

JS

var http = new XMLHttpRequest();
var url = '/wp-admin/admin-ajax.php';
var data = { action: 'my_ajax_shortcode' };
http.open('POST', url, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
        // response......
    }
};
http.send(data);

PHP

add_action('wp_ajax_my_ajax_shortcode', 'my_ajax_shortcode()');
add_action('wp_ajax_nopriv_my_ajax_shortcode', 'my_ajax_shortcode()');
function my_ajax_shortcode() {
    echo do_shortcode('[contact-form-7 id="98" title="Contact Test"]');
    die;
}

Results

I'm not very familiar with the Ajax communication in the context of Wordpress, so maybe somebody can help me or give me some direction. My responses usually log '0' when I run this code. Although I'm using Contact Form 7 for this example, I'm just trying to grasp the general flow of this operation, so I can apply it to other cases.

Thanks! Any help or pointers would be useful to help me understand this problem.

Answer 1

My solution was simpler than I thought....

Since I'm just trying to execute shortcodes in the frontend, I can just localize the script and pass the shortcodes as variables:

functions.php

wp_localize_script( 'BUILD-script', 'sharedData',
  array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'mailchimpForm' => do_shortcode('[mc4wp_form id="100"]'),
        'contactForm' => do_shortcode('[contact-form-7 id="98" title="Contact form 1"]')
    )
);

Basically I'm jus assigning the shortcodes to two variables and make them available in my main js bundle.

build.js

So now I can access those shortcodes, rendered, in my components.

export default {
    name: 'my-component',
    data() {
        return {
            mailchimp: '',
            contact: ''
        };
    },
    mounted() {
        this.mailchimp = sharedData.mailchimpForm;
        this.contact = sharedData.contactForm;
    }
}; 

And rendered by simply using the Vue v-html directive:

<div id="mailchimp" class="chimp--container" v-html="mailchimp"></div>
<div id="contact" class="contact--container" v-html="contact"></div>

Hopefully this will help somebody!