Phoenix, Brunch and VueJS: Part 1

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.

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.

Exposing Standalone Vue with NPM Globals (not recommended)

Brunch’s configuration allows us to expose packages as Global Variables, we can use Vue Standalone Version, let’s do this by editing assets/brunch-config.js:

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

Great! Vue instance was added to the global namespace, meaning: we don’t need to import it. However, it is always prefered to avoid working with globals. Explicit is always better!

Exposing Standalone Vue with NPM Aliases (recommended)

Brunch’s configuration allows us to create aliases for packages, let’s alias ‘vue’ to the correct Standalone Vue:

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

Success! This is the prefered method to override the default Vue runtime version by the standalone version. We need to import Vue when we want to use Vue instance, let’s see how we can do that:

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:

import Vue from 'vue'

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

GitHub Repository

This guide source code was posted at:

https://github.com/frbaroni/phoenix_brunch_vuejs

Each commit represents one step.

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