Nuxt patterns you will love as a Vue.js developer (Part 2)
By: Fotis Adamakis
Tags: Vuejs, Vue, Nuxtjs

[Learning Nuxt]

In the first part of this series, we discovered features that enhance the development experience of Nuxt and make it one of the best frameworks to work with. Now we will demonstrate some useful patterns that can be used to provide clean solutions to some everyday problems.

Fetching status

To access asynchronous data from an API in your components you can use Nuxt fetch() hook.

By checking $fetchState.pending , we can show a message when data is waiting to be loaded. We can also check $fetchState.error and show an error message if there is an error fetching the data.

Refreshing page data

It’s possible to only refresh the data provided by asyncData or fetch without doing a full page refresh using the $nuxt.refresh() helper.

Connection checker

Nuxt provides a handy helper to detect if the user is offline

Using the activated hook

Keep alive works just like with Vue and keeps the enclosed component in the memory for future re-use and improving performance.

There is an elegant pattern using the activated hook that keep alive provides and the timestamp of the last fetch call that nuxt automatically provides in this.$fetchState.timestamp .

You can use both of these to add a 30 seconds cache to fetch :

Nuxt router extra add-ons

Sometimes the file-based routing is limiting and not easy to reason about when using aliases. routers-extra-module extends Vue router with the following features

Custom paths for a page by simply adding a block inside Vue file and define a path in JavaScript or Yaml

Multiple aliases for a single page

Multiple params regardless of the pages directory structure

Vue Lazy hydration

Server-side rendering is the ability of an application to contribute by displaying the web page on the server instead of rendering it in the browser. Server-side sends a fully rendered page to the client; the client’s JavaScript bundle takes over which then allows the Vue.js app to hydrate. This improves first contentful paint and perceived performance but time to interactive and input latency are actually getting a bit worst especially on low-end devices. We can defer the hydration of some components that are not essential for the initial page load until they are visible or the user interacts with them. vue-lazy-hydration is a renderless Vue.js component that defers the hydration of pre-rendered HTML.

Scroll behavior

The scrollBehavior option lets you define custom behavior for the scroll position between routes. This method is called every time a page is rendered.

This example forces the scroll position to the top for every route:

Conveniently you can do the same thing using the scroll top property in a page level.

Client-only component

This component is used to purposely render a component only on client-side. To import a component only on the client, register the component inside the client-side only tag.

Using a Custom Loading Component

To create your own loader component you need to give a path to your component in the loading option. Then, your component will be called directly by Nuxt.js. Your component has to expose a start, finish and optionally a fail and increase methods.

Nuxt Image

Nuxt image is a new directive built to provide plug-and-play image optimization for Nuxt apps. It makes it easy to integrate a CDN for images and deliver the smallest possible high-quality image so that the performance of our site doesn’t suffer.

Usage is pretty straightforward

Output uses modern responsive images techniques to provide the best image possible based on user screen resolution

Conclusion

Nuxt is an extremely powerful framework that's proven to work for large-scale applications. Many patterns have been created around it and elegantly solving most of the problems should be straightforward for any developer.

I hope you enjoyed this and If you have any favorite patterns please send them in the comments. Thanks!