Will Nuxt 3 Make Vue.js Great Again? | by Jose Granja | May, 2022

Lighter, quicker, auto-imports, superior developer expertise

Image by Writer

Just lately now we have had thrilling releases for the React ecosystem. First, it was Subsequent.js, then got here Remix, and afterward React 18. These had been stealing the thunder of any JavaScript framework. They had been driving all of the frontend discussions and growing React’s momentum.

Fortunately, the Nuxt group is making a giant comeback with its newest Nuxt 3 model. It’s at present in RC and the steady launch is due in June. As nice as a Vue.js is, it’ll fail to realize traction if it lags behind in framework options. This model may play a giant function in growing its recognition 🚀.

What’s Nuxt anyway? You may consider it because the Remix/Subsequent.js equal written in Vue.js. It’s an isomorphic JavaScript framework that empowers us to put in writing code that executes each on the consumer and on the server. It abstracts all of the complexity and configuration away.

The brand new Nuxt 3 launch is filled with many options. Not solely to create performant net functions but additionally to lift the developer expertise to an entire new degree. It has built-in TypeScript assist which is superior. The one apparent caveat is that it’s extremely opinionated. It’s a tall we have to pay for. Nonetheless, seeing how superb this evolution is, I’ll fortunately pay for it.

On this article, I’ll summarise among the best options which may hopefully lead many builders to modify from React.

This new model of Nuxt is powered by a brand new server engine which is nicknamed Nitro. It’s constructed from the bottom up, that means no legacy code.

What are its options?

  • Cross-platform assist for Node.js, Browsers, service-workers, and extra: it makes the engine platform-agnostic
  • Serverless assist
  • API routes: it’s powered internally by the unjs/h3 venture.
  • Computerized code-splitting
  • Sizzling module reloading
  • Hybrid mode: granularly controlling how your pages are rendered. Extra on that within the subsequent part.

In abstract, we get an incredible engine that’s not solely in a position to energy SSR. We are able to create static, spa, or occasion api functions. The truth that it’s platform agnostic and light-weight makes it tremendous highly effective. It doesn’t solely imply quicker response occasions however the liberty to host the applying the place we wish to. We are able to now deploy our code immediately on the sting. Which means the SSR code is executed as shut as attainable to the end-user.

At present the Nuxt framework helps two rendering modes:

  • Shopper-side: the browser downloads all of the JavaScript recordsdata after which it generates the HTML parts
  • Server-side: the server generates the HTML web page and returns it again to the consumer. The consumer is then hydrated so as to add the interactivity.

Every of these approaches has its execs and cons. For instance, server-side rendering is dearer since we’re computing the view in our internet hosting. Nonetheless, client-side doesn’t play properly with website positioning.

In prior variations, we had to decide on both one or the opposite method for the entire utility. On this new launch, now we have a Hybrid Rendering. We are able to customise the conduct on a per route foundation.

In abstract, now we have extra granular management over which routes we wish to be utilizing SSR and which not. It lets us benefit from the execs of every method and design our net utility accordingly.

⚠️ This won’t be a part of the primary steady launch however might be coming shortly after.

Imports are a trivial process. It’s such boring work that we usually depend on tooling to deal with these (VSCode extensions) and a few to order these (ESLint). What in the event that they weren’t wanted?

That’s exactly what is going on on Nuxt 3. We gained’t want so as to add any import statements anymore. It is going to be labored out robotically by the engine. How will Nuxt know the way to resolve these? They’re primarily based on a listing and naming construction.

  • parts/ — that is the place Vue parts must be positioned.
  • composables/ — that is the place Vue compostables must be positioned.

Elements

Let’s say we created a parts/Foo.vue:

<template>
Foo
</template>

To make use of this element all now we have to do is use it in our .vue template file matching the element file identify.

<template>
<div>
<Foo />
</div>
</template>

How does that occur? Internally the engine creates the whole lot within the .nuxt folder. We are able to examine the .nuxt/parts.d.ts and discover our parts definition there.

Dynamic Imports

What if we wished to import that element in a Lazy approach? It may be simply finished by prefixing Lazy to the element Title.

<template>
<div>
<LazyFoo /> // element might be lazy loaded
</div>
</template>

Nested Elements

What if the element is in a nested listing? We simply must amend the trail listing to the element’s identify. For instance parts/bar/foo.vue .

<template>
<div>
<BarFoo />
</div>
</template>

💁‍♂️ It’s endorsed to call the element parts/bar/BarFoo.vue for consistency although.

Shopper Particular Elements

What if we wish to make that element Shopper solely? We are able to use the ClientOnly wrapper.

<template>
<div>
<ClientOnly>
<LazyFoo />
</ClientOnly>
</div>
</template>

Express Imports

We are able to use specific imports if wanted by utilizing the #parts on this state of affairs.

import  Foo  from '#parts';

The documentation is nice. There may be the normal API that may be discovered here.

Nonetheless, there may be an attention-grabbing and intuitive information to get began here. It’s nonetheless a piece in course of however helps us perceive the Nuxt venture in a straightforward approach. As Nuxt has a whole lot of options scoped by folder it may be laborious to grasp at first. Some directories take part in some file-based routing.

Listed here are some examples on the folders we’d discover:

  • pages: file-based routing to create routes inside your net utility via Vue Router.
  • server: folder scanned to register API and server handlers with HMR assist.
  • public: the place we have to put our property
  • parts: all of the parts which are exportable from any web page.
  • plugins: listing the place we have to place our imported plugins.

With a purpose to rapidly grasp this, you’ll find on this information the whole tree of any Nuxt venture.

Caption from https://v3.nuxtjs.org/guide/directory-structure/components

There are additionally some interactive examples that may be discovered here. These have hyperlinks to CodeSandBox or StackBlitz.

At present, the JavaScript frameworks actually think about the developer expertise. There may be nice assist for TypeScript is Nuxt 3. We are able to mix the API typings with our parts which wraps the entire thing collectively properly.

Additionally, we are able to now use the newest fancy constructing instruments for constructing our initiatives. It makes the entire expertise extra snappy.

Out of the field Nuxt 3 helps:

  • Vite
  • webpack 5+ esbuild
  • PostCSS

The default builder is Vite however switching to Webpack5 is simple however simplifying tweaking the nuxt.config.ts file:

export default defineNuxtConfig(
vite: false
)

You may prolong any config by utilizing

  • extendWebpackConfig(callback, choices?)
  • extendViteConfig(callback, choices?)
  • addWebpackPlugin(webpackPlugin, choices?)
  • addVitePlugin(vitePlugin, choices?)

Due to the trendy JavaScript compilers we are able to count on lighting quicker construct time and a greater developer expertise.

We now have seen how nice and essential this launch is. Hopefully, it’ll assist improve the curiosity of Vue.js. It’s superior to have range since competitors brings many good concepts. That’s how innovation is pushed ahead.

We are able to see how React is dominating JavaScript’s View ecosystem.

Image from www.npmtrends.com.

React’s group is greater and it’s simpler to land a job. Nonetheless, instruments like Nuxt 3 may be capable to steadiness the scales.

Nonetheless, it’s a nice time for being an online developer. We now have loads of nice selections. Will we go for Remix, Subsequent.js, or Nuxt.js? We are able to’t probably go fallacious with any of these. It is going to all boil all the way down to our private preferences.

More Posts