Vue.js

Articles and Tutorials on Vue.js

Categories

How to Learn Vue.js in 2018

Vue.js is one of the hottest topics in the web frontend space. It has skyrocketed past React to become the most starred JavaScript framework on Github. It was also the framework that the most JavaScript developers said they wanted to learn in 2018. The big question is: How do you learn Vue.js?

Read More

Announcing LearnVueJS.com: Free Vue.js Webinars

As long as I’ve been publishing the Friday Frontend, folks have been asking for help learning Vue.js. Every time I send a survey asking what y’all want, I hear back “I want to learn Vue”. And no matter how many Vue posts I publish, I hear that folks want more.

Read More

Vue's Ecosystem Growth is Taking Off... Just Like React's Did

JavaScript framework popularity goes in cycles. The current dominant web framework is React, with a huge debate among web developers whether it is going to remain dominant going forward. There have been arguments that React may be different than previous frameworks, and achieve everlasting dominance in the ecosystem. There have also been signs that other frameworks, and particularly Vue.js, may be able to dislodge or at least join React in being dominant in terms of use.

Read More

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