Currently i am developing a wordpress website with Vue.js and the wordpress REST API, and can't find a solution to use wordpress shortcodes ex: Contact Form 7

I have been trying this example , but it doesn't seem to work with me Vue.js + AJAX Shortcode

Anyone ever had a similar problem?


For Example

In regular wordpress

I can use the contact forms plug in this way

 <section class="container section__form display--grid">
    <div class="form__content display--flex width--full justify--center">
        <?php echo do_shortcode( '[contact-form-7 id="75" title="Formulário de contacto 1"]' ); ?>

Since vue is on the client side and not directy connected to wordpress i can't use this way

I Thought that might be a way i could use the short code like a vue component or use php inside a vue component.

  • how do you want to use shortcode ? edit your question to show the code you tried.
    – Kaperto
    Dec 10, 2019 at 10:15
  • I don't understand what the problem is, can you explain it in your question so that no prior knowledge of Vue.js and Contact Form 7 is necessary?
    – Tom J Nowell
    Dec 10, 2019 at 10:20
  • I am sorry working on it ! Dec 10, 2019 at 10:23
  • the edit is done Dec 10, 2019 at 11:05
  • hmmm, are you using the ancient Admin AJAX like the question you linked to? Or are you using the modern REST API interface?
    – Tom J Nowell
    Dec 10, 2019 at 12:52

1 Answer 1


After a while i got it :

In the functions.php i added the line :

    'contactForm' => do_shortcode('[contact-form-7 id="5" title="Formulário de contacto 1"]')

to the already existing function i had:

 function vue_wordpress_scripts()
    // Styles
    wp_enqueue_style( 'style.css', get_template_directory_uri() . '/style.css' );
    // wp_enqueue_style('vue_wordpress.css', get_template_directory_uri() . '/dist/vue-wordpress.css');
    // wp_enqueue_style('global',get_template_directory() . '/styles/menu.css' ); //copiar este código para adicionar mais styles.  
    // Scripts
    // Enable For Production - Disable for Development
    // wp_enqueue_script('vue_wordpress.js', get_template_directory_uri() . '/dist/vue-wordpress.js', array(), null, true);
    // Enable For Development - Remove for Production
     wp_enqueue_script( 'vue_wordpress.js', 'http://localhost:8080/vue-wordpress.js', array(), false, true );


and i called the shortcode in the component. The mistake was on my part.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.