Articles and Tutorials on Vue.js


Async Data Options in Vue's Nuxt.js

There are a number of benefits to writing "Universal JavaScript" applications - applications that render full pages on the server but then after page load "hydrate" a single page application. These applications have all of the SEO and initial pageload sped benefites of server-rendered applications, combined with the fluidity and power of a SPA.

Read More

Transparent Wrapper Components in Vue

In a current Vue project, I have a couple different components that are almost just native elements, but with a slight wrapper around them that adds functionality. Examples include a date input that uses a particular date picker and a textarea that auto resizes.

Read More

Why VueX Is The Perfect Interface Between Frontend and API

The increase in complexity in front end web development has driven to increasing amounts of specialization and separation of front and back end. This specialization and increased complexity has a number of benefits - the quality of user experiences on the web has increased exponentially, while simultaneously reaching more people across more types of devices than ever in history. However, it also introduces a number of challenges. The Challenge: Interfacing between Frontend and API The interface between frontend and API has become a common point of friction, challenge, and complexity.

Read More

Creating Multi-root Vue.js Components

A common constraint in component-based frameworks like Vue.js is that each component has to have a single root element. This means that everything in a particular component has to descend from a single element, like this:

Read More

Adding SCSS Libraries like Foundation to Vue's Nuxt.js

I recently wrote about adding Vue.js to a Foundation ZURB stack project. Today I want to look at the opposite situation: Integrating Foundation as an SCSS library into a Vue project, or more specifically, a Nuxt.js project. Nuxt.js is a higher level framework built on top of Vue.js that provides two major benefits: Nuxt makes it super easy to set up a "Universal JavaScript" application with server side rendering. Nuxt prepackages a set a "golden path" set of choices of the many components you can use.

Read More