Using NuxtJS to Build a Stateful Vue Application

The request this time was to build a mortgage lending search and application tool from the ground up. Data would be sourced from third-party mortgage APIs, and completed applications would be submitted to another third-party custom administrative tool.

Key Requirements

• Modern, fast, responsive framework
• Stateful data management
• Optional server-side support

Additional Features and Considerations

• No obscure frameworks
• Ease of use and maintainability
• Readily extensible
• Secure

Build Process

This build started with a thorough analysis of front-end frameworks and overall goals for the application. NuxtJS, a Vue framework, was chosen for its cleanliness, speed, API integration, and state management. While not as robust or mature as React, Vue JS was appealing to the client for both its feature set, as well as the newness and popularity of the growing framework.

Next GitHub was chosen for code management and version control. This also allowed for the use of GitHub Pages as a development environment due to the nature of the application framework.

One State to Rule Them All

The nice thing about using NuxtJS as the core framework is that it comes bundled with Vuex store. Combined with the fetch hook, this allowed for pre-populating field and search data from API calls. This way the client could control what values they wished to be available in the search form through their own administrative interface.

Similarly, when a search was run, the resulting data could be set in the Vuex store and accessed throughout the site without the need for repeated API calls. From there a method was implemented to monitor JWT expiration, and would reauthenticate as necessary.

To Render (Server-Side) or Not to Render (Static)

One challenge with code portability is server side rendering. With NuxtJS the decision to generate a static site was made to support deployment to GitHub Pages. However, the flexibility of the framework also allowed for SSR in the future if it became necessary.

A nice side effect of static code is that site speed was blazingly fast. API calls were made in the background and stored for later processing as the user navigates the site. This ensured data would be readily available with each click. In fact page re-rendering was so quick, delays and animated transitions became necessary to indicate to the user a component had been updated or changed.

HTML Templating

One last reason the decision was made to use Vue JS was HTML template support. The familiar templating structure of Vue JS meant the site would be more accessible for future developers who may not have as much experience in JavaScript libraries. On top of that, NuxtJS has extensive documentation making onboarding a quick and painless endeavor.

And finally through a componentized approach, the code base was kept highly organized and readable. Components were built in a manner to be portable, reusable, while also accepting the overall style guidelines from global CSS. But also capable of taking new style updates should new global styles be implemented or altered.