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?

EDIT:

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"]' ); ?>
    </div>
</section>

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.

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?

EDIT:

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"]' ); ?>
    </div>
</section>

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.

• shortcode
• rest-api

• how do you want to use shortcode ? edit your question to show the code you tried. – Kaperto Commented 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 ♦ Commented Dec 10, 2019 at 10:20
• I am sorry working on it ! – Pedro Ferreira Commented Dec 10, 2019 at 10:23
• the edit is done – Pedro Ferreira Commented 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 ♦ Commented Dec 10, 2019 at 12:52

1 Answer 1

After a while i got it :

In the functions.php i added the line :

 wp_localize_script('vue_wordpress.js','sharedData',array(
    '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.