[SOLVED] Views not rendering on Hosted Test with no feedback

Hey all,

I’m trying to take my extension for a hosted test spin, and the all the views appear to being erroring out, but with zero feedback. The extension is loading the views, cause I can see their markup in there, but the element Vue binds to just gets replaced with <!---->. The console doesn’t output any errors either.

I’m compiling my assets, using Laravel Mix, down to css/app.css and js/app.js, running in development mode so code isn’t obfuscated.

Anybody have any insight as to why this might be happening? Lemme know if I can provide any additional information.

Here’s my full project structure, stemming from the boilerplate example, just in-case:

Maybe one of the solutions from this thread will help: [SOLVED] Vue.js is not working on Hosted Test

I had poked my head in there initially and seemingly it wasn’t relevant, but I was able to discover the issue with enough digging and a combination of answers in that thread. Solved!

I know it’s been a while but I’m in the same boat. Could you be more specific as to what the problem was and how you fixed it?

Absolutely!

My issue was trying to initially use the Vue components directly in the HTML templates, as you can in most scenarios. However, in this type of environment, you can’t. Something about the Content Security Policy needing the components to be compiled before injecting them into the views. I forget exactly.

I solved the issue by using vue-router to bind the correct components to the root element during runtime.

If you’re using Laravel Mix (and really, even if you aren’t), you can take a look at my boilerplate on GitHub and pull anything you may need. The boilerplate should have everything to take you straight through to release.

Good luck!

2 Likes

Thanks! I gotta say that it’s mighty annoying that my project was “done” when I found out I needed to re architect the whole thing due to this issue.