Here are my mixins. They are sitting inside my plugins folder 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/
