I tried Nuxt.js and why you should too!
Tags: vue, nuxt, programming, webdev
Published: 2021-09-29 19:25:40

If you’re a Vue.js developer, by now you’ve probably heard of Nuxt.js. But you might not know what all the hype is about. You’re probably asking, “Why do I need a framework for a framework?” Vue already makes the development of JavaScript apps easier. What’s the idea behind Nuxt.js?
But all i'm asking here is to wait and see my friend.
##What is Nuxt.js?
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4lrvs6vshxf4uikxkul.png) 
Nuxt.js is a higher-level framework that builds on top of Vue. It simplifies the development of universal or single page Vue apps.

Nuxt.js abstracts away the details of server and client code distribution so you can focus on application development. The goal with Nuxt is for it to be flexible enough for you to use as a main project base. Because most of what Nuxt does happens during the development phase, you get a lot of features with only a few extra kilobytes added to your JavaScript files.
From routing to asynchronous data to middleware, it’ll handle all the complex pre-coding configuration, so you can focus solely and entirely on developing a great Vue.js web app effortlessly.

##How Can Your Project Benefit from Using Nuxt.js?
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dghqqz1mklnrwj6pvbcu.png) 
Let’s highlight some of the most irresistible capabilities of Nuxt.js, those that might have already made you stop and wonder:
* Easy setup using the command-line with the starter template
* It’s great for SEO: it solves all the SEO issues that single-page apps are reputed for (client-rendered content, mobile web performance, URL and routing, etc.)
* It provides an opinionated structure and setup.
* automatic code-splitting. 
* It can Create universal apps without the hassle:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ap3308qv1ibp8mpv1ju3.png)
If you don't know what a universal app is? we can describe it as a JavaScript code that can execute both on the client and the server side. Many modern JavaScript frameworks, like Vue, are aimed at building Single Page Applications (SPAs).
There are a lot of advantages to having a SPA over a traditional website. But SPAs also come with disadvantages such as long load times, and Google struggles with them because there’s no content initially on the page to crawl for SEO purposes.
All of the content is generated with JavaScript after the fact. A universal app is about having an SPA, but instead of having a blank index.html page, you’re preloading the application on a web server and sending rendered HTML as the response to a browser request for every route in order to speed up load times and improve SEO by making it easier for Google to crawl the page.
This is the problem Nuxt.js aims to solve for Vue applications. Nuxt.js makes it simple to share code between the client and the server so you can focus on your application’s logic.

* Access to everything in the [Nuxt.js community](https://github.com/nuxt-community): it's a GitHub collection that compiles helpful libraries, modules, starter kits, and more to make it even easier to create your app. 

##But?
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29b7b5b20ex8kog4f32r.png) 
There is always a "But" in everything, that's why of course there is some problems like:
* Getting Custom Libraries to Work with Nuxt with Can Be Challenging.
* High Traffic Can Be Particularly Heavy on Your Server.
* Debugging It Can Get Painful.
* It Still New so There’s a Relatively Small Community Behind It.

That's why I should warn you to be aware of before you decide whether to use or not to use Nuxt.js.

#Conclusion
All of these features make the development of Vue.js apps a much nicer experience. Even if you don’t need a universal app and want to stick with an SPA, there are still benefits to using Nuxt.js. It can be your project’s main base with benefits like .vue files, ES6 compilation, and many more features i didn't figure out yet.