Looking to integrate a Vue.js 2 single page into an existing WordPress website? Perhaps you've already got an old WordPress site and now want to develop a new Vue tool or page that can be added seamlessly to the menu. How can this be achieved within WordPress?
Is it even possible? What are the necessary steps to make this integration happen?
I've crafted a custom template housing a basic div message.
new Vue({
el: "#hello-world-app",
data() {
return {
msg: "Hello World!"
}
}
});<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="main-content" class="main-content">
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<div id="hello-world-app">
<h1>{{ msg }}</h1>
</div>
</div><!-- #content -->
</div><!-- #primary -->
</div><!-- #main-content -->In functions.php, I have made the following additions:
function my_enqueue_stuff() {
if ( get_page_template_slug() == 'page-surveypage.php' ) {
wp_enqueue_script('vue-dist', 'get_template_directory_uri() . '/js/vue.js, array (), 1.1, true );
wp_enqueue_script('vue-survey', 'get_template_directory_uri() . '/js/survey.js, array (), 1.1, true);
}
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );
Interestingly, upon loading the page with the custom template, all I get is {{msg}}. Could it be due to my decision to download the Vue script and place it in the js folder?