WordPress - send ajax request from vuejs app

Question

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?

Vijay Hardaha · Accepted Answer · 2022-09-17 10:47:24Z

1

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:

handle name - that is your registered script name.
js object name - an object name that you can use globally in your Js file
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"

answered Sep 17, 2022 at 10:47

Vijay Hardaha

2,6161 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

newbiedev Over a year ago

ok, now is more clear. For the handler I know I need to pass an action in the post request body that will refer to a function I can add using a plugin or a snippet in the functions.php file, right?As I know, I will not be able to test the code during the dev mode in vue?

IT goldman · Accepted Answer · 2022-09-17 10:32:53Z

1

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.

answered Sep 17, 2022 at 10:32

IT goldman

20.4k2 gold badges18 silver badges34 bronze badges

2 Comments

newbiedev Over a year ago

I'm not sure that I can use php in a vue template. most of the app code will run in vuejs and I will only have a php wordpress plugin to handle the data, if possible I want to have php logic all in the plugin

IT goldman Over a year ago

The only php logic you need inside your vue js is the address of the ajax url: ajax_url. So if you are not sure, just use some other config var for your vue js that holds that value. (yes, even hardcoded)

Collectives™ on Stack Overflow

WordPress - send ajax request from vuejs app

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related