I'm Jonas Galvez, a writer and coder from Brazil. I build web applications for a living, specialising in UI/UX work with both React and Vue-based architectures, and distributed systems with Node.js, Python and Go.

I'm a software engineer at FLAGCX and senior consultant at STORED. I like minimalism, challenging projects and the rework philosophy.

I'm the creator and maintainer of xmlwitch, a popular Pythonic XML generation library. You should try it.

I am driven by purpose and cultivate a stoic attitude towards life.

Nuxt and ElementUI

My first contact with UI components was with Flash MX back in 2002. For someone who had started coding with Flash and never used other tools, I was impressed. I thought these were going to take over the web back then. And studying their source accounted for much of my programming education.

I'm feeling nostalgic about that time.

Since then (and moving on from Flash) I have used jQuery UI, ExtJS and most recently, Bootstrap. None of them came close to giving me the excitement ElementUI has. Built entirely in Vue (although there's also a React fork), it has a wide range of beautifully designed UI controls, a clean API, built-in form validation and a rather decent grid system. I'm hooked.

I feel Vue lets me harness JavaScript's expressiveness on real problems, bringing boilerplate to the absolute minimum. The code I have to write is concise, but still hackable – and the same can be said for ElementUI – it's very easy to dive into the Vue source for each component and figure things out. We're only afraid of magic when we don't understand it. I find Vue's magic is approachable and worthwhile to learn.

Nuxt is inspired by Next and basically provides universal rendering for Vue applications. I was happy to discover it also features the simplest, smartest set of conventions and defaults I've ever seen in a JavaScript framework. In a world of endless configuration files and massive startup scripts, its simplicity is, to put it poetically, intoxicating.

Here's a 30-second introduction to Nuxt: npm install nuxt, add nuxt as the start script in package.json, create a index.vue file like this under pages/, npm start and you're done. It auto generates routes based on pages/ (dynamic routes included), you can have master templates in layouts/ plus assets/, plugins/, components/ and middleware/.

Vuex is automatically set up if you have a stored/index.js file. Then you just use nuxt.render as a middleware on the server. All the asset bundling and the development server is handled with sensible defaults, or you can cleanly extend Webpack.

There's not much else to say, it's that simple. Nuxt has been fully compatible with ElementUI since December 2016. Just npm install element-ui and add plugins/element-ui.js:

import Vue from 'vue' const ElementUI = require('element-ui') const locale = require('element-ui/lib/locale/lang/en') Vue.use(ElementUI, { locale })

And then specify it in the plugins entry of nuxt.config.js. It did require setting loaders explicitly as you would have in Webpack, to enable loading of the ElementUI CSS. I liked how easy it was to make sure the CSS was included beforehand.

Nuxt adds an asyncData() method to page components that runs before any rendering happens. You can return a Promise-resolved object from it which is then merged with the object returned by data(). The snippet bellow retrieves an image on the server and renders it as inline Base64 on the client:

<template> <el-alert title="Image rendered as inline base64" type="success" :closable="false" /> <img :src="img" /> </template> <script> import fetch from 'isomorphic-fetch' export default { asyncData () { return fetch('https://vuejs.org/images/logo.png') .then((response) => response.buffer()) .then((buffer) => { const vueLogo = buffer.toString('base64') return { img: `data:image/png;base64,${vueLogo}` } }) } } </script>

ElementUI also makes $alert() and $message() readily available on the Vue instance (among others). Just a tiny convenience, but it resonates with the overall experience I'm having with ElementUI. It's the first time I truly liked a framework implementation of pieces of functionality I had to reimplement a dozen times. This might very well be my new first choice for building web applications.