Nuxt is a framework to generate Single Page Applications(SPAs) or Static web applications, it is a framework that uses Vue components.
Vue is a framework to create web components.
In this article I will explain what modern SPA/Static web-app frameworks like NUXT are and why to use them.
What’s new about static web-app generators?
There are many SPA/Static website frameworks, for every programming language and for every web components framework.
Nuxt is the static generator for web-applications that use Vue Components, inspired by NEXT, the web-app generator that uses React Components.
If you visit Staticgen you’ll see many such generator for the programming language and web components framework of you choice.
What is new about modern SPA/Static frameworks is that they use Web Components.
Why use a statc web-app generator like NUXT?
When designing a web-app, you may need the following features:
- Rapid prototyping by using existing libraries, while
- Keeping code that is easy to maintain,
- SEO, and
- Performance,
Why re-invent the wheel for each one of these features? NUXT starts by using industry standards and allows you to modify defaults to fit your needs.
Rapid prototyping via Configuration-first Approach
NUXT takes a configuration-first approach to developing SPAs and Static websites. You simply install a module or plugin, or import some files and then start developing Vue Components for your now fully configured SPA.
Keeping code that is easy to maintain
Web-components frameworks use a folder structure to allow developers to organize the code for their web components. Vue uses “components” and “asset” folders.
But a web-app has pages, layouts, data, middleware, static assets, and plugins in addition to components.
Frameworks like NUXT use a prescribed folder structure to help developers organize their code.
Search Engine Optimization
NUXT uses vue-meta to implement metatags and Vue Router to implement Search Engine URLs.
NUXT uses the folder structure to generate common route schemes without having to code your own router. However, NUXT also allows you to write your own router in case the default scheme does not fit your need.
Performance
NUXT supports Code-splitting and Server-side Rendering out of the box.
If you were to start from Vue alone, you’d need webpack to do the code-splitting.
If your application gets large, sending megabytes of JavaScript to the client may cause performance issues at load time, and high CPU and memory usage on the client-side.
Rendering components on the server helps solve both problems.
So why use a web-app generator? We’ll if you already started with Vue alone, then you probably created your own framework, so give it a name ;). It’s therefore probably not worth it adopting another framework, unless…
Unless you are a startup. Startup’s may not have developed an opinionated way of organizing their codebase, and usually startups need to prototype as fast as possible.
Another reason why you may want to use a web-app generator is if you are developing a static website with no CMS or maybe a simple file based CMS.
If you are using WordPress, then I think you are better off using Vue components alone (if you need to) and use WordPress as your front-end and back-end framework instead of using NUXT.
Why would you switch from WordPress to NUXT? That’s another blog post.
