There’s only a slight difference in how to reference environment variables from Nuxt 2 to Nuxt 3. Nuxt 3 provides a simple composable that you can include in your setup() method. Nuxt 2 set the environment variables in a global $config variable. The functionality is similar, but the syntax is slightly different, let’s take a […]

When migrating from Nuxt 2 to Nuxt 3, setting page titles is slightly different. In Nuxt 2 setting page meta data is done through the head() helper function. Or, if you define a title globally, you could set it in the nuxt.config.js. In Nuxt 3, page titles are set through the useMeta() composable function or […]

A notification component is a super useful, re-usable component that I add to most web apps. I use this component to communicate with the user when an action has been completed, or something needs to be brought to their attention. I like to design this component globally so I can call it from anywhere within the application. In this tutorial we will be designing a simple Vue 3 notification component to display a success, warning, and failure notification to the user. You can style this notification however you like. We will just be focusing on the functionality.

One of the first steps I did when migrating from Nuxt 2 to Nuxt 3 was to migrate my app’s layout. Since the layout was essentially the shell of my application, I figured this was a good place to start. Remember, we aren’t using Nuxt bridge and doing a straight Nuxt 2 to Nuxt 3 […]

This is a post I’ve been wanting to write for some time. We had to implement a client side queue in two of our apps recently using Vue 3 and Vuex 4.

Now why would you want a client side queue? Well with so much more power given to the web browsers, there are actually times where you might want to perform a long running task in the browser. For example, with FFMPEG WASM you can actually encode videos directly the browser itself, WITHOUT touching a server! For these scenarios, building a queue is the perfect system to make this work.

Since these are still kind of “fringe” scenarios, I wasn’t going to go to the trouble right away by making an officially supported package. However, using Vuex with the reactivity of Vue 3, you can make a simple queue system fairly simply. Let’s get started!