How to render my Vuejs App in a WordPress site

Question

In my functions.php file I have this code:

// Load both vue from the CDN as well as the scripts for the slideout cart and checkout
function load_vue_scripts()
{
    $scriptpath =  (get_stylesheet_directory_uri() . "/vue/slideout-cart/dist/slideout-cart.js");
    wp_register_script('vuejs_source', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
    wp_register_script('slideout-cart', "{$scriptpath}", 'vuejs_source', 1, true);
    plugin_dir_url(__FILE__) . "vue-cart/public/img"]);
//    echo $scriptpath;
    wp_enqueue_script('vuejs_source', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
    wp_enqueue_script('slideout-cart', "$scriptpath", 'vuejs_source', 1, true);
}

This loads Vuejs from the jsdelivr CDN, as well as loads my script from my the dist directory in my Vue app. Then, I create a div like so for my app to mount on:

<div id="slideout-cart" class="container" role="main"></div>

Then, I tell my app to mount on that div:

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#slideout-cart");

I see the script in my source tab on chrome, and I even see the console.log()'s coming from the app, but nothing is rendered. What am I doing wrong?

Looks fine to me, check if the component is loaded into the DOM (if the HTML is available within #slideout-cart). If so, check if there are styles which are hiding the element. Do you have the scripts available within the same page context (not within an iframe?) as the DOM element? — ssc-hrep3
– ssc-hrep3, Commented Feb 10, 2021 at 23:49

StevenBoyce · Accepted Answer · 2021-02-16 17:21:41Z

1

So as it turns out, I was doing everything right to render the app, but forgot to check my network tab and see that I wasn't sending the correct credentials to init the cart, so I was getting 401s back from my api and my app wasn't rendering at all

answered Feb 16, 2021 at 17:21

StevenBoyce

4716 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

How to render my Vuejs App in a WordPress site

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related