Intro to Nuxt

Nuxt is a server side rendering framework built on top of Vue.

You might think 'but Vue is a framework, why a framework for a framework?'

The thing is Vue is beautiful and easy to pick up and use, but Vue Single Page Applications (SPA) -as other front end framework SPAs- have problems with Search Engine Optimization (SEO) because when a SPA url is visited, the server sends the index.html which has no content. The pages are rendered by Javascript on the browser. This reduces server load but search engine crawlers are not very good at waiting for JavaScript to render content.

Enter Server Side Rendering (SSR). SSR enables us to render our content on the fly before it hits the browser. When a user and / or crawler hits a server side rendered web application url, the server sends a fully rendered page the first time, subsequent navigation is done on the client as with regular SPAs.

This has lots of advantages and disadvantages.

Here from the Vue Docs:

Pros:

Better SEO, as the search engine crawlers will directly see the fully rendered page.

Note that as of now, Google and Bing can index synchronous JavaScript applications just fine. Synchronous being the key word there. If your app starts with a loading spinner, then fetches content via Ajax, the crawler will not wait for you to finish. This means if you have content fetched asynchronously on pages where SEO is important, SSR might be necessary.

Faster time-to-content, especially on slow internet or slow devices. Server-rendered markup doesn't need to wait until all JavaScript has been downloaded and executed to be displayed, so your user will see a fully-rendered page sooner. This generally results in better user experience, and can be critical for applications where time-to-content is directly associated with conversion rate.

Cons:

Development constraints. Browser-specific code can only be used inside certain lifecycle hooks; some external libraries may need special treatment to be able to run in a server-rendered app.

More involved build setup and deployment requirements. Unlike a fully static SPA that can be deployed on any static file server, a server-rendered app requires an environment where a Node.js server can run.

More server-side load. Rendering a full app in Node.js is obviously going to be more CPU-intensive than just serving static files, so if you expect high traffic, be prepared for corresponding server load and wisely employ caching strategies.

If a Server Side Rendered Vue App serves your purpose Nuxt makes this a breeze.

Nuxt makes the whole process as simple as possible. You only need to run 'npx create-nuxt-app' and you have a SSR app ready.

Nuxt introduces a folder structure that makes it easy to work with it. Your pages are stored in a pages folder and Nuxt adds them to the router automatically.

Your plugins are contained in a plugins folder and are run before Vue is booted.

There is a huge community around it and lots of modules to handle most of the everyday problems.

Here's a small project I made with it, Laravel, and TailwindCSS. The code for the project is on github (laravel api and nuxt frontend).