Using Nuxt 2.x mixin works on localhost but when I generate static files it no longer works

24 Views Asked by At

Here are my mixins. They are sitting inside my plugins folder in Nuxt

screenshot of my mixin files in nuxt

Here are those mixins added to my plugins section of my nuxt.config.js file:

  plugins: [
    "~plugins/colorizeValues_Mixin.client.js", "~plugins/getColorMethod_Mixin.client.js", "~plugins/getSVGPathsByID_Mixin.client.js", "~plugins/googleColors_Mixin.client.js", "~plugins/originalColorMethods_Mixin.client.js"
  ],

Here's how I'm adding those mixins to an example file within my app:

...
import { colorizeSVGDataVals } from "~/plugins/colorizeValues_Mixin.client.js";
import { getColorMethod } from "~/plugins/getColorMethod_Mixin.client.js";
import { getSVGPathsByID } from "~/plugins/getSVGPathsByID_Mixin.client.js";
import { googleColorValues } from "~/plugins/googleColors_Mixin.client.js";
import { originalColorMethods } from "~/plugins/originalColorMethods_Mixin.client.js";
export default {...
...
props: {},
  mixins: [
    getSVGPathsByID,
    colorizeSVGDataVals,
    googleColorValues,
    originalColorMethods,
    getColorMethod,
  ],
  computed: {},
...

I'm using these mixins to colorize Google SVG icons, here's a snip from one of the *.vue files:

<template>
  <svg
    id="mainSVG"
    class="no-pointer-events"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 160 119.43"
  >
    <title>chrome</title>
    <category>web</category>
    <g id="chromeSVG" transform="translate(0 10)">
      <path
        id="top"
        d="M83.12,5.06l2.81.44a38.5,38.5,0,0,1,26.36,16.35c.71,1,1.35,2,2.13,3.21H79.89a19.57,19.57,0,0,0-19.7,14.29c0,.16-.11.33-.2.62-.19-.29-.33-.49-.46-.7q-5.36-9-10.73-18a1,1,0,0,1,.07-1.35,39.42,39.42,0,0,1,24-14.2c1.1-.21,2.22-.31,3.33-.47a1.61,1.61,0,0,0,.39-.16Z"
        transform="translate(0 -5.06)"
        :fill="isRolledOver ? originalColors : getColor"
      />

These are the Google colors i'm trying to mixin to each Google SVG file, so that it colorizes on rollover (file: googleColors_Mixin.client):

export const googleColorValues = {
    data() {
        return {
            defaultColors: ["#ea4335", "#fabc05", "#33a652", "#4285f4"],
        };
    },
};

This mixin piggy backs off of the previous mixin, (file: getColorMethod_Mixin.client.js):

export const getColorMethod = {
    computed: {
        getColor() {
            //remove style attribute set by GSAP, otherwise it will take precedence over this fill
            /* console.log("getColor mixin called") */
            if (this.getColorCalled == false) {
                /* console.log("get color method mixin called....") */
                this.getColorCalled = true;

                let defaultColor = this.$store.getters.getCurrentColor;
                let theItem;
                let pathID;
                for (let i = 0; i < this.pathIDs.length; i++) {
                    pathID = this.pathIDs[i];
                    theItem = this.$el.getElementById(pathID);
                    if (theItem.hasAttribute("style")) {
                        theItem.removeAttribute("style");
                        //console.log("removing style attribute");
                    }
                    pathID = "#" + this.pathIDs[i];
                    this.gsap.to(pathID, {
                        duration: 1,
                        fill: defaultColor,
                    });

                }

            }
            return this.$store.getters.getCurrentColor;
        },
    }
};

What's suppose to happen is that as a user rolls over a Google SVG icon, the SVG paths within the SVG should change to the Google colors, and then revert back to the same color as all the other icons on the rest of the page. It works when I run it in localhost but doesn't when I publish using npm run generate. Another interesting thing that happens is that if I put a console.log into the mixins, they are called only on the server side even though the file names all have ".client" in them and are suppose to run on the client side. Scratching me head on this one. You can view the live app here: https://apps.igeddit.ca/

0

There are 0 best solutions below