Running Vuetify on Vert.x (w/ES4X) - vue.js

Question

I'm wondering if it's possible to run Vuetify (out-of-the-box) with Vert.x. I've played around a bit and I don't see a straightforward way but perhaps I'm missing something.
Sources:
https://vuetifyjs.com/en/getting-started/quick-start
https://reactiverse.io/es4x/start/install
Steps:
Create an out-of-the-box Vuetify:
npm install #vue/cli -g
vue create my-app
cd my-app
vue add vuetify
Test that it works by running it in Node
npm run start
When I view http://localhost:8080 (using node) it looks good. So I
create a compiled version in a dist folder
npm run build
Now I would like to try and get it working in Vert.x So I add ES4X, which is supposed to allow ES 5+ js code
npm install -g es4x-pm
es4x init
npm install #vertx/unit --save-dev
npm install #vertx/core --save-prod
npm install #vertx/web --save-prod
npm install
Create an index.js file so vert.x server for the index.html
vertx.createHttpServer().requestHandler(function (req){
req.response().sendFile("dist/index.html");
}).listen(8080);
Run Vert.x
npm start
When I view http://localhost:8080 it does not show as expected. It looks like a blank page. When I view the source code of the page in a browser, it shows the contents of the index.html file. So I know it's loading it, just not interpreting it. When I view the console I see a log entry saying Syntax error: Expected expression, got '<'
Note - I would like to avoid going the 'CDN install' route shown on the Vuetify quick-start link. My project is fairly complex and I just wanted to test how Vuetify by itself worked with Vert.x before tying in all the other dependencies

Answer 1

You've added a bare request handler, think of it as using just core nodejs modules. In order to serve multiple files and resources you should use vertx-web (which you already installed). In this case your code should be:
import { Router, StaticHandler } from '#vertx/web';
// router acts like express if you're familiar with it
const app = Router.router(vertx);
// for any HTTP GET request this will be your
// first handler "dist" is your static files root dir
app.get().handler(StaticHandler.create("dist"));
// add more handlers as needed...
vertx.createHttpServer()
.requestHandler(app)
.listen(8080);
So now all your static files should be served correctly...

Answer 2

Not sure I'm grokking this question.
Vuetify is runs in the browser, Es4x runs on the server.
You just need way to serve the static 'dist' folder, as described above.
ps: I'm assuming you're not doing server-side rendering, in which case, I'm not sure if es4x will work (it might).