For front end work, my current tool of choice is Vue. However, the benefits of a SPA (single page app) don't out-weight the costs to me for most applications I've worked on. Vue is flexible enough to accommodate this, but I didn't have a great example of what that would truly look like.

I'm still not comfortable with Webpack, and feel as if each line is a research project. There is really no denying its power though, nor the variety of tasks it can accomplish. In the end, my solution is more of a Webpack solution than a Vue one, but does involve both.

Webpack will take each folder name under the pages directory, and capture the name. For each (chunk) name, it will create an entry point, and with the HtmlWebpackPlugin, an HTML page. This page, in turn, is based on the template in the templates folder. The source for the project is at Github here, and looks like this:

The output directory, dist, is very simple:

This is meant as a starting point, both for myself and anyone that comes across it. Some things I'd like to see working (and will create a new branch in this repository if/when I do):

• SASS support within the Vue files
• Global stylesheets also used within the template
• Merge app.js into the template, and have each page determined by a Vue file
• Create a common bundle for better client request management
• Turn this into a template for jump starting new projects
• Convert this blog into something using this process, since it did in the end create a bunch of static assets

Thanks to Plortinus for creating Vue Multiple Pages, which was a great resource and guide for creating this.