01 sep

Still working on the Vue version of our new site, I swear! It had to be put on hold because of BUNCH of new projects came down the pike (thanks, covid!), but it continues!

I really want the students to be able to take part in this new build, it will be VERY helpful for me and really great for their experience! In order for them to contribute, I need to make sure we’re all working with the same environment and tools. Docker to the rescue!

Thankfully, I don’t have to reinvent the wheel on this. Some people who are no doubt smarter than me already created a docker image for headless WP with Vue/nuxt: wuxt

This image is a bit out of date, so I of course thought it would be great fun to tinker with it and see how badly I could break it.

Once I got the container up and running, installed WP, and made sure the front end was loading, I started messing with the nuxt install. Here are my notes.

Upgrading nuxt inside wuxt container

• Use docker exec to drop you into command line for front end container: docker-compose exec front.wuxt bash
• Follow the nuxt docs to upgrade: change the line in package.json with the version of nuxt you want to upgrade to, delete node_modules folder and yarn.lock
• run yarn command
• I got some errors about a package that needs a stable version of node (meaning an even number), and the container I’m using had node:11-slim installed, so I had to get crafty and update the node version for the container.
• In docker-compose.yml, find the section for front.wuxt and change the image to whatever version of node you want; I went with node:12-slim since that’s currently LTS/slim
• Do some docker-compose down and docker-compose up -d to pull down the new image and get that up and going
• I tried yarn again once I exec’d back into front.wuxt, but it was still giving me an error
• Decided to try the ol’ npm install instead. This took FOREVER, but everything installed Who knows what was up with yarn
• Before exiting exec mode, run yarn to rebuild your yarn.lock
• Then run yarn dev to rebuild your nuxt app. This also took longer than I anticipated.
• Check localhost:3080 to make sure WP is up, then localhost:3000 for front end
• Party!

04 sep

More updates to the wuxt container! Since we have our new plugins in its own repo (thanks to Jared!), I decided to add those to the wuxt container as a submodule. This way, I won’t have to manually update them when something changes, I can just pull them in via git fetch, which will be very useful!

Adding submodule to wuxt container

Many thanks to this working with submodules blog post

It should’ve been as simple as git submodule add https://github.com/<user>/repo ua-lib-cpts, but the wuxt .gitignore file was ignoring the plugins directory, so it wasn’t that simple. I updated the .gitignore to ignore only the three standard plugins (akisment, hello dolly, index), then ran the submodule command again.

I opened up the wuxt WP backend (localhost:3080/wp-admin), and activated the plugin. Everything is there!

Time to start adding the nuxt/vue files I’ve created.