Add page transition

assets/global.scss

@@ -1,3 +1,15 @@
 body {
   font-family: "Alata", sans-serif;
 }
+
+.page-enter-active, .page-leave-active {
+  transition: 500ms ease opacity;
+}
+
+.page-enter, .page-leave-to {
+  opacity: 0;
+}
+
+.page-enter-to, .page-leave {
+  opacity: 1;
+}

assets/js/background-canvas.js

@@ -102,6 +102,8 @@ export class BackgroundCanvas {
     // eslint-disable-next-line unicorn/prevent-abbreviations
     const ctx = this._ctx;
 
+    if (ctx === null) return;
+
     ctx.clearRect(0, 0, this.width, this.height);
 
     for (const line of this._lines) {

nuxt.config.js

@@ -19,6 +19,8 @@ export default {
   ** Global CSS
   */
   css: ["@/assets/global.scss"],
+
+  layoutTransition: "page",
   /*
   ** Plugins to load before mounting the App
   */