The VueJS project was created using the Webpack template in vue-cli. When building for production, a static folder is generated with 2 subfolders and an index.html file. The subfolders include css and js, with one css file and three javascript files - app.xxxxxxx.js, manifest.xxxxxxxx.js, and vendor.xxxxxxx.js.
I deployed the production VueJS project on both a Node server and an Apache server. For the Node server, ExpressJS was used:
...
app.use('/public', express.static(__dirname + '/public'));
app.use('/static', express.static(__dirname + '/public/static'));
app.use('/js', express.static(__dirname + '/public/static/js'));
app.use('/css', express.static(__dirname + '/public/static/css'));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/public/index.html'));
});
...
The single page application functions properly on the Node server.
As for the Apache server, I transferred the HTML content from the generated index.html to an index.php, ensuring the CSS and JS directories are accessible.
Now, I'm attempting to replicate this setup with WordPress without success.
In WordPress, I have loaded all JS and CSS files using wp_enqueue_script() and wp_enqueue_style() but struggle to integrate the HTML markup correctly with the CSS and JS files. This seems to be where the issue lies. What am I overlooking?
This is how the generated index.html structure looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
...
</body>
</html>
The provided code snippet from functions.php:
...
While the top-level menu and submenu appear correctly, clicking on the Sub Level Menu displays only text and not the VueJS SPA as expected.
Surely, the JS and CSS files are loading because upon inspecting the source code, the links to these files can be clicked displaying their contents.
The structure of CSS and JS files inside the twentyseventeen theme directory can be seen here:
https://i.sstatic.net/11k78.png
When defining the HTML content within the admin_sub_page_callback(), the code <div id="app"></div> was extracted from the original index.html page generated by the VueJS project.