How to use enqueue()->localize() in vite/sage11

vite
1

I have an implementation in sage10 which is using the following code to pass some variables to a javascript:

bundle('foo')->enqueue()->localize('fooAjax', ['ajaxurl' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('foo_check_nonce')]);

Is there a way to achieve that with vite?

2
3

I would go with a different approach.

I enqueue my scripts in a separate file/s, based on the volume of the project. There i would do something like that:

add_action(‘wp_enqueue_scripts’, function () {

    $style = Vite::asset('resources/css/survey/survey.css');
    $script = Vite::asset('resources/js/survey/survey.js');

    wp_enqueue_style( 'survey', $style, false, '1.0.0' );
    wp_enqueue_script( 'survey', $script, false, '1.0.0', [
        'in_footer' => true,
        'strategy' => 'defer'
    ]);

    wp_localize_script( 'survey', 'surveyData', [
        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
        'nonce'   => wp_create_nonce( 'survey_nonce' ),
    ] );

}, 100);

Thus you are getting the most out of both worlds. And you do not inline scripts, as your CSP would like that.

You may also consider using the bundle() helper.

4

I’m still not clear on this solution. The link seems to suggest moving the enqueue out of admin_head filter, but I’m fairly new to Vite, so could someone provide more details? As with the original question, I’m trying to get Ajax working on the front end of my WP site.

5

The REST API has been in WordPress for almost a decade. Y’all really shouldn’t be using admin-ajax…

As far as “localizing” scripts goes in Sage 11/Vite – just output the JS you need. Several approaches have been shown.

What have you tried?

6

Thanks for responding. In app.js, I have the AJAX call, so it is loaded automatically by Sage:

$.ajax({
                type: 'POST',
                url: frontend_ajax_object.ajaxUrl,
                data: {action: 'event_month'},
                dataType:"json",
                success: function (data) {
                    console.log(data);
                },
            });

My actual php function called by this jquery function is in ajax.php (which is loaded through functions.php), which also includes:

<?php
namespace App;
class Ajax {
    public function __construct() {
        add_action('wp_ajax_event_month', [$this, 'event_month']);
        add_action('wp_ajax_nopriv_event_month', [$this, 'event_month']);
    }
    public function event_month() {
        wp_send_json_success('Month test');
}

Before Vite, I would use the bundle (as described in the initial question). But the following does not work (this is in add_action(‘wp_enqueue_scripts’ …):

    wp_localize_script( 'app', 'frontend_ajax_object', [
        'ajaxUrl' => admin_url( 'admin-ajax.php' ),
        
    ] );

When I run it, I get frontend_ajax_object is not defined. I could pull the AJAX code into a separate js file, enqueue and localize it separately, but it seems to me there should be a way to incorporate the “wp_localize_script” using the Sage infrastructure

7

There aren’t any enqueued assets in Sage 11. wp_localize_script requires using a handle that is enqueued.

Personally I would ignore @hristolaskov’s post on this topic.

Follow the solution in this topic for your answer. Just output the JS you need on the front-end — there’s several different ways to do it.

And again… it’s 2025, seriously stop using admin-ajax. Use the REST API.

I’m locking this topic because it already has a linked solution that shows a couple of different approaches you can use.

If you need more hands on support, consider hiring someone from the community.