Review of Wordpress and Vue.Js: Router Edition

Headless WordPress, or Head-ish WordPress?

I tried explaining a WordPress Theme’s code to a non-nerd (yeah, the girlfriend). Analogies I tried: A blended smoothie, minestrone soup, and a zombie. Zombies won. Here goes:

“Headless” is trending.
Pantheon has a great summary: there are more than 2 options out there.

#RouterGoals

Wordpress has its own internal routing. If you’ve been more than knee-deep in Wordpress it’s easily missed, so here are a few reminders:

  • Permalink Structure: Using get_the_permalink($post->ID) instead of manually typing a link.
The Wordpress Template Hierarchy

So what does VueRouter Cover?

Initially, not much. VueRouter has a <router-link> tag equivalent to get_permalink().

/page-name
/parent-page/page-name
/category/category-name
/category-name/post-title
/2017/10/
/author/wiley-coyote/

Enter: A Drop-in WordPress-Vue Route Builder.

Believe it or not, I’d actually came up with a similar approach as Mr. Pellegrom by the time I came across his code. I had already coded up over half of the WordPress Rewrites, so I’m starting with his simple theme (updated for Vue2) as a demo.

Routes created using the Theme Unit Test. Still fast with over 300 routes!

Benefits

  1. The only routes you need to mod are your own custom ones.
  2. Supports common Component Names: Page, Blog, Home, Archive, Post, Search, Author, ArchiveDate. What you attach to these is up to you.
  3. Pulls in Page Template names as Component Names for the page using it.

Resolvable URIs

Pages:
/about/
/about/page-image-alignment/
Archive:
/category-three/
/category/category-three/
/post_tag/
/custom-taxonomy/custom-term/
Archive by Date:
/2017/10/
Single Post:
/uncategorized/hello-world/
/custom-post-type/post-name/
Author:
/author/road-runner/
Search:
/search/markup+formatting
404:
/XYZ

Usage

High Level

Have a WordPress Install? Know NPM? Give a go!

Medium Level

If you’ve got your own WP Theme using Vue, basically, just toss in the vue-router.php file, and check the integrations:

$wp_vue= new WP_Vue_Router_Context();wp_localize_script( 'rest-theme-vue', 'wp', 
array(
'root' => esc_url_raw( rest_url() ),
'base_url' => $base_url,
'components'=> $wp_vue->get_components(),
'routes' => $wp_vue->get_routes(),
)
);
var router = new VueRouter({  mode: 'history'});for (var key in wp.routes) {    
var route = wp.routes[key];
router.addRoutes([ {
path: wp.base_path + route.slug,
component: Vue.component(capitalize(route.type)),
props: {default: true, postId: route.id}
}]);
}

Closing Thoughts

I’m not yet sure whether I just created a crutch, or laid down a first paving-stone. Either way, I plan to extend this basic theme into something I can use for client sites with lots of plugins, as well as building it out to handle caching, etc like Bill Stavroulakis PWA site.

Next Steps

There are a handful of routes that are still missing. I declined to handle Post-Attachments and Comment-Paging, since they are often handled in other ways. I also will defer to WordPress for per-category RSS feed handling.

  • Options for which object-types, or categories.
  • I’ve yet to test this with various plugins.

(Front|Back|Web) × (Developer|Ops) @WierStewart