Search & Filter with Vue.js in WordPress
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: WordPress Search with Vue.js, spa, search, rest api, single-file components.
Requires WordPress: 4.9
Requires PHP at least: 5.6.0
A Single Page Search app integrated inside a child theme of the Twenty Seventeen WordPress theme implemented with Vue.js.
The intent is to help developers with a boilerplate single page app created with Vue.js inside a WordPress child theme.
The child theme registers a Custom Page Template
Search Page Template.
The Custom Page Template loads a Single Page Search App implemented with Vue.js
- Download the latest archive and extract to a folder
- Make sure you have the WordPress
Twenty Seventeentheme installed
- Upload the
vuetwentyseventeenchild theme folder from the extract to the
- Activate the theme through the
Themes Menuin WordPress
- Make sure the
vuetwentyseventeenchild theme is activated.
- Create a Page from your admin dashboard in WordPress or use an existing one where you want the Vue Search App to render.
- Open the Page in Edit mode from your admin dashboard.
- On the right hand side under attributes you’ll see a template
Search Page Template
- Select the
Search Page Templateand save the page.
- You'll see the Single Page Search app render on the page.
To Make Changes
- Setup your development environment (see accompanying article)
- Navigate to the
spadirectory using your system terminal
npm installto install required packages in
npm run dev
- Enqueue the dynamic script
- When done, generate a build with
npm run buildand enqueue it again.
Note: You may need to modify the CSS to suit your theme.
- Requires the Twenty Seventeen WordPress theme.
- Boilerplate files and comments have not been removed.
- Uses Bootstrap for the CSS
- The request to the WordPress REST API only loads 1000 records. Modify this in