Implement custom WebGL shaders in vuejs - vue.js

Question

I found a three.js example of an effect I'm attempting, but the implementation doesn't appear to be explained, and may be an older version of three/js. I'm also just getting into three.js/WebGL, so I may just be plain wrong about things.
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
The example uses "shaders", which are in script tags with the type="x-shader/x-vertex" attribute. I'm able to put the script tags in my head and everything works as advertised.
However, I'm using VueJS, and so I really would rather not put these in my index.html file. I tried to just inject the string directly to the material:
const vertexShader = `
uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;
void main()
{
vec3 vNormal = normalize( normalMatrix * normal );
vec3 vNormel = normalize( normalMatrix * viewVector );
intensity = pow( c - dot(vNormal, vNormel), p );
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`;
And:
vertexShader: vertexShader,
But I get a
THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false
Program Info Log: Fragment shader is not compiled.
So I tried to actually put it in a created script tag thinking the browser must be doing some magic:
const createShader = (text) => {
const tag = document.createElement("script");
tag.setAttribute("type", "x-shader/x-vertex");
const tnode = document.createTextNode(text);
tag.appendChild(tnode);
document.head.appendChild(tag);
return tag.textContent;
}
And:
vertexShader: createShader(vertexShader),
But that has the same issue.
Is there a clean way to make this happen, or is direct code on page load the only option?