07 apr

I’m going to start experimenting with building our headless wordpress with Vue! Before I go installing a bunch of stuff and forgetting what I did, I decided to fire up the ol’ work log. It’s always handy in cases like these!

vue cli, app setup

The tutorials I followed for vue cli all used npm install -g vue-cli but I should’ve checked the latest documentation on that because that’s deprecated! The latest version uses the new notation npm install -g @vue/cli. Of course when I tried to install the latest, I got an error about overwriting the old version of vue, so now I need to delete some stuff. The npm error tells me to run the install with –force to “overwrite files recklessly.” Seeing as I’ve never written anything in vue or ever used vue-cli, I think I’ll be okay overwriting it.

npm i -g @vue/cli --force

hello world

Then I ran vue create hello-world and chose babel, eslint, and npm during installation. The build told me to cd hello-world and npm run serve so I did. It told me where my app is running (port 8081 since my local bitnami is currently running in 8080), and I opened the browser there. Hello world app is successfully running!

08 apr

Things went to shit yesterday after getting this installed. My internet kept going in and out, then when I went to handle a baby situation, my computer decided to do a software update? So. Yeah.

I had a shower thought yesterday: wouldn’t this whole thing be easier in a docker container? Like, is there a headless wp/vue front-end container floating around out there somewhere? It would make my prototyping life so much easier! Well, no, there isn’t one on docker hub. And after a look on github, there are PLENTY of vue/wordpress themes, but no containers for headless WP/vue front-end. So. I’m going to make that? Probably. Once I’m done learning a bit about vue.

09 apr

I did it! I built the alerts front end in vue!

I found a vue version of bootstrap, BootstrapVue, which made it SUPER easy to get this up and going. Their selling point is that they’ve rebuilt bootstrap components in vue so you don’t need to include jquery, which is awesome. BUT bootstrap is a required dependency, and jquery is a dependency of bootstrap, so… I ended up installing jquery as a dev dependency, so maybe it will end up being fine.

10 apr

Now that I’ve got one app working, it’s time to get the headless WP part of it connected. So far today, I’ve bebopped around and researched what that looks like here in 2020, and it looks like I probably should be using Vue/Nuxt/Vuex combo with WP to get all the pieces working together. I can of course use Vue by itself and try to do single page application style routing, but I think it will be much cleaner to use SSR with Nuxt and keep all of the state stored in one place with Vuex. It might prove to be too much machine for what we’re building, but I think it’s worth it!

One of the reasons our current build is complicated is because it’s trying to use Angular as a SPA when our website is clearly more that one page. SSR would’ve made things much cleaner and much more clear to new devs on the project. I’m sure that wasn’t really an option at the time, so I’m not blaming anyone for making poor choices. You do what you can with what you have, but that’s also why it seems like such a mess.

So! I found an amazing Smashing tutorial on headless WP with Vue which had a video in it where Sarah Drasner spins up a full app with Vue/Nuxt/Vuex complete with navigation, API fetching, and animations in less than an hour. It blew my mind!

My task, should I choose to accept it: use this tutorial to set up headless WP with Vue and all the extra libraries. Then get this setup into docker to share with the rest of the team. Ready, set, GO!

At the end of all this, I need to write up a report on my research on front-end frameworks, why I think Vue is the best option, and all the libraries we’ll need to use to make this transition. I’m actually starting to get a little excited about this project!

headless WP

Gotta say, local by flywheel makes getting a local wordpress install up and running DEAD SIMPLE. I wish this had been around when I was developing wordpress themes back in 2013… my life would’ve been so much easier! Also, the plugin FakerPress makes some great dummy content.

I added Jared’s alert app port to my wordpress build. It didn’t have the API enabled, so I added that to his CPT in the $args array: show_in_rest => true. When I went to the URL for the alert post type end point, the alerts were there but none of the custom content was. So I had an adventure figuring out how to add custom meta content to the REST API.

Turns out, there’s a WP filter rest_prepare_[CPT] where the bracket area is the name of the CPT (alert in this case). Then you add each post meta and return it as data. For example, each alert has a message, and you add that like this:

$message = get_post_meta( $post->ID, 'alert-message', true );
if( $message ) {
	    $data->data['message'] = $message;
	}

At the end, return $data and add the filter by calling the function (my_rest_prepare_alert):

add_filter( 'rest_prepare_alert', 'my_rest_prepare_alert', 10, 3 ); 

I’ll put that up in github somewhere once I get this whole thing figured out. The important thing for now is that the REST API has our custom data in it! Now I need to build a vue front-end for this test data.

emmet snippets

I got really tired of creating the same vue boilerplate over and over. I decided to take some time to create my own emmet snippets for emmet-vim based on Sarah Drasner’s VSCode snippets. This took a bit of figuring out, but I think I got it! Again, I’ll put that up on github when I get it all ironed out. I’ll probably start by adding them piecemeal when I need something. We’ll see!