Articles and Tutorials on Vue.js


7 Frontend Architecture Lessons From Nuxt.js

Front-end architecture is a hot topic, and for good reason. As more and more logic has moved into JavaScript on the front-end, applications have become cumbersome to deal with. This has in turn led to the rise of frameworks and application patterns to manage that complexity. These are often encapsulated in starter templates or even full-on application frameworks. One such application framework is Nuxt.js

Read More

Building Wordpress Gutenberg Blocks with Vue.js

Wordpress's new Gutenberg editor is an extremely hot new topic in the web development world. With it, Wordpress is fully embracing React and modern JavaScript, bringing millions of developers into the modern front-end world, and creating a massive audience for existing Frontend developers.

Read More

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