I've created this page template for integrating a vue app into an existing website

<?php
/*
* Template Name: Registration Form
*/

get_header();
?>
<div id="app"></div>
<?php
get_footer();
?>

After a bit of debugging I've solved a problem with vue router that wasn't loading the views for my app due to the base url that I need to set manually.

In my vue app I will have a custom login and registration form that I need to handle in wordpress. To achive this I want to use axios in the vue app to make requests and pass the data to wp.

I've readed about admin-ajax.php but I'm a bit confused on how to make it working with vue. In the wordpress documentation it's suggested to use wp_localize_script() fuction to pass the admin url to the script that will need it.

I have created a simple function in the functions.php file

function setup_ajax_vue(){
  wp_register_script('vue-js', get_template_directory_uri() . '/dist/assets/index.js', array(), false, true );
  wp_enqueue_script('vue-js');
  wp_register_script('vue-css', get_template_directory_uri() . '/dist/assets/index.css');
  wp_enqueue_style('vue-css');
}
add_action('wp_enqueue_scripts', 'setup_ajax_vue');

In this function that I will move into a plugin, I'm loading at the moment, only the vue app files. How I can integrate the ajax handler correctly to let the vue app send ajax request to process the forms data?

CodePudding user response：

Added somewhere in your page this code before your ajax call.

<script>
    var ajax_url= "<?php echo admin_url('admin-ajax.php'); ?>";
</script>

So then you can:

    <center>
        <button style="margin:50px" onclick="do_ajax()">Ajax</button>
    </center>

    <script>
        var url = "<?php echo admin_url('admin-ajax.php'); ?>";
        function do_ajax() {
            var request = new XMLHttpRequest();
            request.open("POST", url   "?action=process_contact_form");
            request.onreadystatechange = function() {
                if(this.readyState === 4 && this.status === 200) {
                    alert(this.responseText);
                }
            };
            var formData = new FormData();
            formData.append("subject", "value");
            formData.append("message", "hello value")
            request.send(formData);
        }   
    </script>

Or of course using axios or fetch.

CodePudding user response：

wp_localize_script function is often used to pass generic data from PHP to JavaScript.

In simple words, if you have to pass some data from php to Javascript, WordPress later add a new function wp_add_inline_script but wp_localize_script is better when you're registering a script.

This function needs 3 args:

1. handle name - that is your registered script name.
2. js object name - an object name that you can use globally in your Js file
3. data array - a php array of data, you don't need to json encode it, wordpress will do it for you.

function setup_ajax_vue() {
    wp_register_script( 'vue-css', get_template_directory_uri() . '/dist/assets/index.css' );
    wp_enqueue_style( 'vue-css' );

    wp_register_script( 'vue-js', get_template_directory_uri() . '/dist/assets/index.js', array(), false, true );
    wp_enqueue_script( 'vue-js' );
    wp_localize_script( 'vue-js', 'vue_js_params', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'setup_ajax_vue' );

so in your code, you'll localize the php data with your registered script by the above code.

Note: you need to register the script first and then localize it.

in the above code, we have used the js object name vue_js_params and we've passed ajaxurl in the data.

so in your js code, you can access it using vue_js_params.ajaxurl it will be globally available to be used.

If you don't know how to register an ajax callback in WordPress then you can learn it from tutorials, I am sure there will many google article on "How to use ajax in WordPress"