[Vuejs]-Vue 3 / Vite Broken? Cannot get Okta Widget to launch

0👍

Answering my own question here, kind of.

When I was using the colon shorthand for v-bind like I posted in the original question with a colon in front of the ‘id’:

<div :id="okta-signin-container"></div>

Vue 3/ Vite did not recognize the as having a valid name. In the runtime debugger using Vue Devtools, it showed "nAn" IIRC.

But when I removed the colon, thusly:

<div id="okta-signin-container"></div>

the behavior changed and it actually redirected to the Okta Widget and rendered the widget correctly.

I also noted that the VisualStudio Code display changed the appearance of the string from blue to orange. That’s probably not indicative of how the compiler treats it but at least it made me notice that this might be my issue and try it without the colon. (I had added the colons upon migrating from Vue 2 to 3, as I was just trying to be a bit more precise in my coding.)

I’m not sure if this was something that I missed and was not supposed to use the colon, or if this is a Vue 3/Vite bug that needs to be fixed, or a setting that I missed.

Leave a comment