integrate a Vue.js page with WordPress?

Question

I want to build a single page with Vue.js 2 and then add it to an existing WordPress website, e.g. as a new page in the menu. How will I do that inside WordPress? There is already an old WordPress site and I'm gonna develop a page/tool with Vue, so when it's finished I want to add it somewhere in the menu of the WordPress site as a new page.

Is it possible? What steps should I follow?

I created a custom template and inside I have a simple 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 added these:

    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' );

However, when I load the page with the custom template it shows {{msg}}. Is it wrong that I downloaded the vue script and placed it in the js folder?

I already did It - you can check it here github.com/bedakb/vuewp — Belmin Bedak
– Belmin Bedak, Commented Feb 20, 2017 at 22:21
Thanks, but I do not want a single page theme from scratch. I want a single page built with Vue to be added to an existing WordPress website. — linous
– linous, Commented Feb 20, 2017 at 23:44
Any javascript errors in your developer console, in your browser? — nibnut
– nibnut, Commented Feb 27, 2017 at 16:45
Failed to load resource: skip-link-focus-fix.js the server responded with a status of 404 (Not Found) Failed to load resource: the server 2wordpressNANjs responded with a status of 404 (Not Found) — linous
– linous, Commented Feb 27, 2017 at 19:14
If I add the JS code inside the .php file in a script everything works fine. — linous
– linous, Commented Feb 27, 2017 at 21:05

nibnut · Accepted Answer · 2017-02-20 21:07:32Z

2

I would likely go with a new template in your (child-)theme. If this is just for this one page, then make it a specific page template, named with the slug of the page that will show your Vuejs app. If you'll want to use this on multiple pages, you could make a generic template file that authors can assign to any page they create, or you could wrap your vuejs component/app in a short code. (see the naming conventions of template files)

Once you've decided on a delivery method, then you'll just have to make sure to load the vuejs javascript file created by your bundler, as well as any dependencies that aren't bundled in your app.

Does that help?

answered Feb 20, 2017 at 21:07

nibnut

3,1272 gold badges17 silver badges18 bronze badges

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

1 Comment

linous Over a year ago

It helps, but I still have to try it and see how it works. It's going to be only one page, so I should create a specific page template. so if I understood correctly: 1) I will create e.g. vuepage.php template, add it in the theme folder. And inside that will have my HTML & CSS code and also the cdn path, right? 2) Have a separate vuepage.js file with the JS code which will also upload it in the theme folder. 3) Load the .js file with wp_enqueue_scripts or something like that? Can I go like this?

Collectives™ on Stack Overflow

integrate a Vue.js page with WordPress?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related