Phoenix and Vue.js

Another great combination! Like peanut butter and jelly! Oh, I’ve made myself hungry again… :(

Introduction

In another tutorial, we pieced React.js and Phoenix together. One of my favorite things about Phoenix, especially with the upgraded version of Brunch, is how dead-simple it is to integrate pretty much any front-end framework directly into your application. Today we’ll explore getting a base application up and running with a very simple Vue.js app!

Current Versions

Phoenix: v1.1.4

Vue.js: v1.0.16

NPM: 3.6.0 (Very important, this process will not work with NPM 2.x; you need to use 3.x)

NodeJS: v5.6.0

Brunch: v2.1.x, v2.2.x, v2.3.2+(v2.3.0 breaks with error messages about NODE_ENV being undefined, so make sure you’re using one of the versions I listed!), v2.4.x

Creating Our Project

We’ll start by creating our Phoenix project before we do anything else. This will require us having Phoenix latest (v1.1.4+) installed via local hex before anything else.

$ mix local.hex
$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez

If you’ve installed Phoenix before, it will ask you if you want to override any existing packages. Just say yes here. Next, we’ll create a new Phoenix application:

$ mix phoenix.new pxvue

Go ahead and answer yes to fetching/installing dependencies. We’ll be needing them this time! Now, move into that directory and we’ll move on to installing our NPM dependencies.

$ cd pxvue

Installing Our NPM Dependencies and Configuration

We’ll start off incredibly simple and just install Vue.js as our only dependency. We could also include things like vue-router and similar packages if we wanted to go the SPA route, but for right now let’s keep our lives simple.

$ npm install --save vue

After this is complete, we’ll need to modify our brunch-config.js file in the root directory of our Phoenix application to support the new modules we installed. We need to whitelist the installed npm modules under the npm configuration section so that brunch knows we’re going to use “vue”:

npm: {
    enabled: true,
    // Whitelist the npm deps to be pulled in as front-end assets.
    // All other deps in package.json will be excluded from the bundle.
    whitelist: ["phoenix", "phoenix_html", "vue"]
}

Save this file, and run brunch’s build command just so that we’re sure everything is golden (technically, the first time you start up the Phoenix server this will happen anyways, but if you already started your server up this won’t happen unless you modify something, which we’ll do later):

$ brunch build

Important Note About NPM Versions

This tutorial assumes you are using NPM 3.x. If you’re using NPM 2.x you’re going to hit issues attempting to build everything together, as has been suggested by a few people. For more information, please reference https://github.com/phoenixframework/phoenix/issues/1410#issuecomment-166001866. Special thanks to Matt Widmann and Fabio Akita for pointing this out on the post about React.js!

Writing An Example Component

Now let’s set up our Phoenix app so that we can add a small Hello World vue component on our page. Open up web/templates/page/index.html.eex and replace the contents of the whole file with:

<div id="hello-world">
  {{message}}
</div>

Finally, you’ll want to add the following snippet of code to the bottom of your web/static/js/app.js file:

import Vue from "vue";
new Vue({
  el: "#hello-world",
  data: {
    message: "Hello World"
  }
});

It Works!

Start up the server if you haven’t already:

$ iex -S mix phoenix.server

And on the main page, you should see something like the following:

Our working Vue.js Hello World example in our app!

Congratulations! You now have a working Vue.js component inside of a Phoenix application with almost no extra work or effort! Enjoy! If you want to just check out the repo for this as a starting point, you can find it at: https://github.com/Diamond/pxvue