Filtering Lists Dynamically With Vue on the Server Side is Easier Than You'd Think

This article demonstrates a surprisingly simple method for dynamically filtering lists using Vue.js and server-side rendering, avoiding the performance hit of an extra AJAX request. Instead of fetching data via AJAX, the initial HTML is rendered server-side (using WordPress in this example, but adaptable to other CMSs like CraftCMS), and Vue.js handles the filtering client-side using v-if directives and inline JavaScript within the server-generated HTML.

The author was inspired by discussions on accessibility and site performance at the ARTIFACT conference. The key insight was to balance a fast user experience with efficient development practices. A common approach involves using a JavaScript framework to handle filtering after an AJAX request, but this introduces a delay before content appears.

The improved method leverages the existing server-side rendering capabilities. The filtering UI (created with PHP's get_terms() function in the WordPress example) is placed above the post loop. Each filter button utilizes Vue.js directives (@click and :class) to update a Vue variable (tag) and visually indicate the active filter.

The core of the solution lies in the post loop. Each post is conditionally rendered using a v-if directive that checks if the post's tags (obtained via PHP's wp_get_post_tags() and encoded as JSON) include the currently selected tag (tag variable). If no tag is selected, all posts are shown.

A minimal Vue.js instance is then initialized:

new Vue({
  el: '#filterablePosts',
  data: {
    'tag': ''
  }
});

This connects the Vue instance to the HTML element containing the posts. No complex data fetching is required; the filtering logic operates directly on the server-rendered HTML.

The article provides complete code examples, including the WordPress template integration, demonstrating how to implement this technique. It also includes a bonus section on adding an aria-live attribute for improved accessibility, providing real-time feedback to assistive technology users about the number of filtered posts. Finally, it offers a CodePen link for a working demonstration.

The above is the detailed content of Filtering Lists Dynamically With Vue on the Server Side is Easier Than You'd Think. For more information, please follow other related articles on the PHP Chinese website!