Adding Vue.js to Foundation's ZURB Stack
Vue.js is the new hotness in the front-end world, garnering more github stars than any other project in 2017. It makes sense - Vue is simpler and easier to learn than frameworks like React.js and Angular, while still providing all the power those frameworks do. And it's easy to start using it incrementally, just dropping it into place within a site without having to change your entire site over to a single page app.
This turns out to not be too difficult, but it took a little figuring out so I thought I'd put together a quick tutorial in case anyone else wants to do this.
To start with, we need to install a few dependencies. We'll want to include
vue of course, and I
used a library called Vue Custom Element
to let me use vue elements directly in the page.
The `vue-custom-element` library relies on the W3C Custom Elements specification, which as of this writing is only available on Chrome, Safari, and a couple smaller mobile browsers according to caniuse. To enable it across all browsers we should also install a polyfill:
Next, in order to integrate Vue single file components directly into our build system with webpack, we're going to need some
dev dependencies. We'll set up
vue-template-compiler, along with their peer dependency
To teach our build system how to watch single file components, we need to update our webpack configuration to understand
The ZURB stack's default build system includes its webpack configuration in its gulpfile, so we need to modify that.
The modifications we need to make are
resolve, so that webpack knows to find and compile
- Add a
.vuerule that tells webpack how to compile
- (Bonus) add
watchdown further in the gulpfile so we get automatic recompilation on changes.
The webpack configuration in
gulpfile.js ends up looking like this (assuming no other changes):
If you also want to add the additional watch line, that changes the watch function to look like this:
Importing Vue Elements
To do this we need to import `vue` and `vue-custom-element`, import any elements we've implemented, and then register them with
each of these libraries. For simplicity, we can just do this directly in our
Now in your pages, you can use these elements just like any other element:
If you'd like to see a working example, I've set up a barebones repository with a very simple custom element here: https://github.com/kball/example-zurb-stack-vue