How to Build Vue Components in a WordPress Theme

Want to read the code directly? Please skip this section.

This tutorial is written based on Vue 2 and uses "Inline Template". Vue 3 has deprecated this feature, but you can achieve similar effects using alternatives such as putting templates in script tags.

A few months ago, I was building a WordPress website and needed a form with many advanced conditional fields. Different choices require different options and information, while our customers need complete control over all fields ¹ . Additionally, the form needs to appear in multiple locations on each page and have slightly different configurations.

And the title instance of the form needs to be mutually exclusive to the hamburger menu, so that opening one will close the other.

And the form contains text content related to SEO.

And we hope the server response can present some cute animation feedback.

(call!)

The whole process felt so complicated that I didn't want to handle all of these states manually. I remember reading Sarah Drasner's article "Replace jQuery with Vue.js: No build steps required", which shows how to replace the classic jQuery pattern with a simple Vue microapp. This seems like a good starting point, but I quickly realized that things can get messy on the PHP side of WordPress.

What I really need is reusable components .

PHP → JavaScript

I like the statically preferred approach of Jamstack tools like Nuxt and want to do something similar here - sending full content from the server and step-up on the client.

But PHP does not have a built-in method to handle components. However, it supports including File ² in other files. WordPress has a require abstraction called get_template_part , which runs relative to the theme folder and is easier to use. Dividing the code into template parts is the closest thing WordPress offers to components ³ .

Vue, on the other hand, is totally about components—but it can only work after the page is loaded and runs JavaScript.

The secret to this combination of examples is the little-known Vue directive inline-template . Its powerful functionality allows us to define Vue components using existing tags . It is the perfect middle ground between getting static HTML from the server and mounting dynamic DOM elements on the client.

First, the browser gets the HTML, and then Vue makes it work. Since the tags are built by WordPress, not by Vue in the browser, the components can easily use whatever information the website administrator can edit. And, contrary to .vue files (which are perfect for building more application-like stuff), we can keep the same separation of concerns as the entire website – structure and content in PHP, styles in CSS, and functionality in JavaScript.

To show how this all comes together, we’re building some features for a recipe blog. First, we will add a way for users to rate recipes. We will then build a feedback form based on that score. Finally, we will allow users to filter recipes based on labels and ratings.

We will build some components that share state and run on the same page. To make them work well together—and to facilitate the addition of other components in the future—we take the entire page as our Vue application and register the components there.

Each component will be located in its own PHP file and included in the topic using get_template_part .

Basic work

There are some special cases to consider when applying Vue to an existing page. First, Vue doesn't want you to load the scripts in it - if you do, it sends an ominous error to the console. The easiest way to avoid this is to add a wrapper element around the content of each page and then load the script outside the wrapper element (which is already a common pattern for various reasons). As shown below:

 <?php /* header.php */ ?>
<div id="site-wrapper">

<?php /* footer.php */ ?>
</div>
<?php wp_footer(); ?>

The second consideration is that Vue must be called at the end of body element so that it loads after the rest of the DOM is available for parsing. We pass true as the fifth parameter ( in_footer ) to the wp_enqueue_script function. Also, to ensure that Vue loads first, we register it as a dependency for the main script.

 <?php // functions.php

add_action( &#39;wp_enqueue_scripts&#39;, function() {
  wp_enqueue_script(&#39;vue&#39;, get_template_directory_uri() . &#39;/assets/js/lib/vue.js&#39;, null, null, true); // Change to vue.min.js in production environment
  wp_enqueue_script(&#39;main&#39;, get_template_directory_uri() . &#39;/assets/js/main.js&#39;, &#39;vue&#39;, null, true);
});

Finally, in the main script, we will initialize Vue on site-wrapper element.

 // main.js

new Vue({
  el: document.getElementById('site-wrapper')
})

Star rating component

Our single article template is currently as follows:

 <?php /* single-post.php */ ?>
<?php /* ... Article content*/ ?>

We will register the Star Rating component and add some logic to manage it:

 // main.js

Vue.component('star-rating', {
  data () {
    return {
      rating: 0
    }
  },
  methods: {
    rate (i) { this.rating = i }
  },
  watch: {
    rating (val) {
      // Prevent ratings from going beyond range by checking it every time you change if (val > 5) 
        this.rating = 5

      // ... some logic that will be saved to localStorage or elsewhere}
  }
})

// Make sure to initialize Vue after registering all components
new Vue({
  el: document.getElementById('site-wrapper')
})

We write the component template into a separate PHP file. The component will contain six buttons (one for unrated and five stars). Each button will contain an SVG, which is filled in black or transparent.

 <?php /* components/star-rating.php */ ?>
<star-rating inline-template="">
  <div>
    <p>Rating recipes:</p>
    <svg v-for="i in 5" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</star-rating>

From experience, I like to provide the top element of a component with the same class name as the component itself. This makes it easy to reason between tags and CSS (e.g.<star-rating></star-rating> Can be considered .star-rating ).

Now we include it in our page template.

 <?php /* single-post.php */ ?>
<?php /* Article content*/ ?>
<?php get_template_part(&#39;components/star-rating&#39;); ?>

HTML inside all templates is valid and the browser can understand it except<star-rating></star-rating> . We can solve this problem by using Vue's is directive:

<div inline-template="" is="star-rating">...</div>

Now assume that the maximum rating is not necessarily 5, but that it can be controlled by the website editor using the popular WordPress plugin Advanced Custom Fields (adding custom fields for pages, posts, and other WordPress content). We just need to inject its value into the prop of the component we will call, which we call maxRating :

 <?php // components/star-rating.php

// max_rating is the name of the ACF field $max_rating = get_field(&#39;max_rating&#39;);
?>
<div :max-rating="<?= $max_rating ?>" inline-template="" is="star-rating">
  <div>
    <p>Rating recipes:</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div>

In our script, let's register the prop and replace the magic number 5:

 // main.js

Vue.component('star-rating', {
  props: {
    maxRating: {
      type: Number,
      default: 5 // Highlight }
  },
  data () {
    return {
      rating: 0
    }
  },
  methods: {
    rate (i) { this.rating = i }
  },
  watch: {
    rating (val) {
      // Prevent the score from going out of range by checking it every time it changes if (val > maxRating) 
        this.rating = maxRating

      // ... some logic that will be saved to localStorage or elsewhere}
  }
})

In order to save the ratings for a specific recipe, we need to pass in the post's ID. Same idea:

 <?php // components/star-rating.php

$max_rating = get_field(&#39;max_rating&#39;);
$recipe_id = get_the_ID();
?>
<div :max-rating="<?= $max_rating ?>" :recipe-id="<?= $recipe_id ?>" inline-template="" is="star-rating">
  <div>
    <p>Rating recipes:</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div>

// main.js

Vue.component('star-rating', {
  props: {
    maxRating: { 
      // Same as before},
    recipeId: {
      type: String,
      required: true
    }
  },
  // ...
  watch: {
    rating (val) {
      // Same as before // Save to a storage every time you change // For example localStorage or publish to WP comment endpoint someKindOfStorageDefinedElsewhere.save(this.recipeId, this.rating)
    }
  },
  mounted () {
    this.rating = someKindOfStorageDefinedElsewhere.load(this.recipeId)    
  }
})

Now we can include the same component file in the archive page (article loop) without any additional settings:

 <?php // archive.php

if (have_posts()): while ( have_posts()): the_post(); ?>
<?php // Summary, featured pictures, etc., then:
  get_template_part(&#39;components/star-rating&#39;); ?>
<?php endwhile; endif; ?>

...(The remaining content is too long, omitted).. Please note that due to space limitations, I cannot generate the remaining code in full. However, based on the text you provide, I can continue to generate similar pseudo-original content as long as you provide more input. Please tell me what you want me to do next.

The above is the detailed content of How to Build Vue Components in a WordPress Theme. For more information, please follow other related articles on the PHP Chinese website!