Phoenix, Brunch and VueJS: Part 1

25 January 2017

Phoenix + Vue + Brunch

Phoenix, Brunch and VueJS: the heaven

Phoenix is an extremely powerful, simple, easy, fast web framework. It is made for the new web, for dynamic beautiful web applications. Behind Elixir, my language of passion, powered by Erlang and it’s battle proven Erlang VM (BEAM), Phoenix contains everything you need to rapidly build your web application, ready for scalability and fault tolerance.

By the default, Phoenix comes with Brunch embedded (you can opt-out of it!), Brunch is a front-end build tool, it is wonderful, it was created to be easy, simple and ultra-fast. Brunch tries to automatically configure itself, based on the installed NPM packages. It’s configuration is simple and small, usually, things simply works, allowing us to focus on our website features.

Together, Phoenix and Brunch creates the perfect environment for any developer. They are easy to learn, they are powerful, fast, has an ultra performance.

Now, imagine if we could find an web component that brings us the same benefits from both tools above? This is called Vue. Vue is simple, it is performant. Vue was designed on the success and failures of its competitors, it is small, it is modular and it’s made to create fast and powerful front-end web applications.

Creating our sandbox

Let’s create a new empty Phoenix project, it will be our sandbox. I choose to not include ecto (by using --no-ecto), as in this experiment we won’t need any database connection.

mix phx.new --no-ecto phoenix_vue

Installing Vue

Now we have our project, let’s install Vue in it. To do that, we can simply npm install it and Brunch will take care of the rest. First, we go to the assets/ folder

phoenix_vue/ $ cd assets
../assets/   $ npm install --save vue

Loading Vue

Usually:

import Vue from 'vue'

Should do the trick.

But there’s a problem: we would be importing Vue Runtime build.

WAT?!

Runtime vs Standalone

Vue is distributed in two builds: Runtime and Standalone.

In a nutshell, the Runtime version is lighter, it doesn’t include the precious template compiler feature.

What it means? Unfortunately, you cannot use DOM templates (write your Vue code directly to the DOM), neither use Vue’s template property. You have to build your templates into a render function.

To bypass this restriction, we must use the Standalone version, which doesn’t require us to build our templates into a render function.

By installing Vue using NPM, we retrieve both packages: Runtime and Standalone. The Standalone version is contained at /vue/dist/vue.common.js, let’s see how to use Standalone version instead of Runtime version.

FAILURE: Exposing Standalone Vue with NPM Aliases

Brunch’s configuration documentation exposes us the NPM.Aliases property. We could alias Vue to the standalone version by changing our assets/brunch-config.js:

-    enabled: true,
+    enabled: true,
+    aliases: {
+      'Vue': 'vue/dist/vue.common.js'
+    }

However, I didn’t succeed by using this method. When I tried to import Vue, I still received the Runtime version. Maybe, it was a bug in my Brunch build.

SUCCESS: Exposing Standalone Vue with NPM Globals

Brunch’s configuration documentation also allows us to expose packages as Global Variables, this way I was able to replace the Runtime version with our so wanted Standalone version:

-    enabled: true,
+    enabled: true,
+    globals: {
+      Vue: 'vue/dist/vue.common.js'
+    }

Success! We also gain the benefit to not need to import Vue to our Javascript files.

Hello World

Now we have Vue exposed to our application, let’s build a simple Hello World.

Replace the entire contents of lib/{project}/web/templates/page/index.html.eex with:

<div id="vue-playground">
  {{ message }}
</div>

Then, append to file assets/app.js the following code:

new Vue({
  el: '#vue-playground',
  data: {
    message: 'Hello to Vue World!'
  }
});

Remember: we are exposing Vue as a global, so we don’t need to import it.

Phoenix - Hello to Vue World!

Next step: Single File Components

In order to take advantage of Vue library, one must learn how to use the Single File Components . This feature allows developers to take even more advantage of Vue design, which was made to heavily use Components. They keep components simple and unified. Also, they enforces us to separate components in several files.

Part 2: Phoenix, Brunch and VueJS: single file vue components

comments powered by Disqus