Multi-Page Vue
2017-10-03

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):

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