Well, it kind of works, there were a few minor omissions here and there - nothing that couldn’t be sussed out fairly quickly. But there was something that bothered me:
don’t forget to add a proper include statement to your application layout
web/templates/layout/app.html.eex:
<link rel="stylesheet" href="<%= static_path(@conn, "/css/components.css") %>">`
Say what? Brunch is a bundler and the default Phoenix project bundles to priv/static/css/app.css (/css/app.css to the outside world). Why do I need another CSS file? It turns out that Brunch’s plugin ordering seems to be determined to the some degree by the order they are found in the package.json dependencies (which is automatically kept in alphabetical order). So css-brunch runs before javascript-brunch followed by vue-brunch, So that CSS file generated by vue-brunch comes into existence too late to be bundled with the other CSS files - so the workaround is to have the Vue CSS in a separate file. Now there is a discussion around possibly being able to order Brunch plugins in the future - but I’m starting to wonder if Brunch is showing its age (i.e. being geared towards a different kind of web development workflow).
Furthermore I can’t help but get the impression that Vue tooling tends to favour Webpack. So it may be worth considering getting on the Webpack bus sooner than later. Now Using Webpack with Phoenix and Elixir only deals with webpack 1.13 - but it still gives a good guide to the “integration points” that need to be taken care of. There are two possible surprises:
- It is recommended to ignore the
--no-brunchoption. It’s simply easier to delete thebrunch-config.jsand modify thepackage.jsonto strip out “project-level brunch”, but all this has to happen before the dependencies are loaded so, - decline the automatic installation of the dependencies when the project is generated.
There is also a Brunch dependency in config/dev.exs that needs to be adapted. Once the configuration files have been adapted it’s easy enough just to load them later with mix deps.get - at this point in time Brunch is still used on the dependency level to generate phoenix_html.js and phoenix.js. Interestingly live-reloading doesn’t actually rely on Brunch (article: Behind the magic of Phoenix LiveReload).
So it might make sense to become familiar with Webpack 2 on a Phoenix base install and once all of that seems to work, push further by adding Vue into the mix.
