NuxtJS: From Terminal to Browser
Sébastien Chopin

Sébastien Chopin @atinux

About: Author of Nuxt.js • Community partner of Vue.js • Open Source

Location:
France
Joined:
May 17, 2018

NuxtJS: From Terminal to Browser

Publish Date: Jun 4 '19
23 1

How we changed the developer experience to stop switching between the terminal and browser.

Nuxt.js is a Vue.js framework to create different kind of web applications with the same directory structure & conventions: Universal, Single Page, PWA or Static Generated.

ℹ️ These features are all available with v2.8.0 release.

Problems

  1. Developing JavaScript applications with Webpack or any bundler requires to switch between your browser and terminal for debugging purpose.
  2. Using console.log to debug when the app is server rendered requires to remember that logs will be displayed on the terminal when refreshing the page.

Solutions

  1. Forwarding Webpack build state right in the browser and display them in a fancy manner.

foward-webpack-build-state

  1. Same for Hot Module Replacement (really useful when the project gets bigger and takes more time to re-build).

nuxt-build-indicator-hmr

  1. Forwarding SSR logs to the browser in development mode

nuxt-ssr-logs-forwarding

NuxtJS Vision

The purpose to these changes is to use the terminal for commands only.

Now you can focus right on your code and its visual result 🙂

Be lazy, be smart, be Nuxt.

Links:

Comments 1 total

  • Joel Varty
    Joel VartyAug 27, 2019

    Started using Nuxt this week in both spa and universal mode. Amazing work. I had a little trouble getting the generate function working with my CMS page routing, but eventually nailed it.

    Thanks for this great tool - hope to push it to higher limits soon!

Add comment