Runtime variables with Vue CLI

Docker and Vue.js

When building an distributable version of a project, it should be relatively easy to swap out some variables at runtime. The benefit of this is that you can build the code once and then deploy it across your stack without the need to rebuild. There’s nothing more frustrating than building for test and then having to rebuild for production – it technically means you’re playing a guessing game as to whether what worked and was signed off, will actually work next time around! Vue CLI doesn’t cope with this concept very well. Recently, we have been using nuxt.js and there has been an introduction of runtimeConfig as a concept in their nuxt.config.js file. This is a new release as of v2.13 and works very well. There were workarounds before, but this is the next level of easy environment swapping. To […]

Persisting state with Server Side Rendering

A lot of our projects in the last couple of years have focused on Vue.js. We have used a number of scaffolding solutions and most recently we have had success with Nuxt.js. One thing we have struggled with however, is state management and persistence. When using a ‘universal’ approach it’s immediately clear that having state traverse between client-side and server-side isn’t that easy. There’s a great plugin that allows you to persist your state into local storage or cookies. Server-Side-Rendering (SSR) doesn’t have access to your local storage, so if you want to harness the power of SSR and state management you have to use cookies. We have been using the vuex-persistedstate plugin with great success. It works well with nuxt.js and if you create a plugin to handle your storage method, you can create custom hooks for getItem and […]