What is Nuxt?

This course will be based on Nuxt.js version 3. But first, let's briefly cover what Nuxt is. If you are new to Nuxt, it can be helpful to explore related concepts, such as Vue.js and Single Page Applications.

Vue.js

From a developer’s point of view, Vue provides many benefits. One of these benefits is reactivity. When our state (app data) changes, all parts of our app are updated to reflect this. Reactivity is also possible with regular JavaScript, but it is a more time-consuming task.

We can also structure our code into smaller, reusable components. This helps keep larger projects remain organized and maintainable. The framework is also very performant and optimized, providing super-fast updates, along with many other benefits, many of which we’ll discover in this course.

Single Page Applications

One of the other terms you may hear is a Single Page Application (SPA). Despite the name, it does not mean our project is just one single page. Vue.js can be used to create a SPA, and this typically means that when a user first visits our website or application, the server will return a JavaScript bundle rather than just the home page. This bundle contains all of our applications, including all the pages and assets, meaning we can use JavaScript to switch between pages without a page reload. This often happens using a router package (more on this later).

This is in contrast to traditional websites, where visiting a new page will cause the page to be requested from the server and a page reload. Using the SPA approach to switch between pages inside the browser is much faster, resulting in a great user experience.

SPAs are not without drawbacks. As we might expect, downloading a big JavaScript bundle on the first visit can result in a slightly slower initial load time.

Historically, search engine optimization (SEO) has been an issue with the SPA approach. With non-SPA websites, a web page is requested from the server, and the page keywords and content can be crawled by a search engine. Crawling a JavaScript bundle with the SPA approach can be more difficult for search engines, although some sources claim this is less of an issue as search engines make improvements in crawling JavaScript content. Nuxt provides various solutions to help with some of these issues.

Nuxt.js

Nuxt addresses some of the drawbacks of SPAs by providing alternative rendering modes and automatically splitting up our JavaScript bundle. These smaller bundles are faster to download and can improve the user experience. Tree shaking Tree shaking is a term commonly used within a JavaScript context to describe the removal of dead code. is also automatically taken care of. This means any unused code is removed, which reduces the size of our project.

Using server-side rendering, Nuxt can also improve our application’s discoverability on search engines. It does this by creating the page content on the server before sending it to the browser, allowing search engines to crawl the content. This is a benefit over SPAs, which can make it hard to crawl a JavaScript bundle.

Key differences between Vue.js and Nuxt

Overall, the idea is to make the experience better for both the developer and the user while also adding performance improvements. The unique file-based routing offers convenience to the developer. Developers can simply create files, and the routing is taken care of, along with automatically prefetching page content, which might be needed next.

Auto-import automatically imports and makes files available in components and pages, reducing development time and the chances of typing errors. Minification of our production code is also automatically applied. Using Nuxt, we can also create our own server or API. This is not something we can do with Vue.js. This can keep our application organized by grouping all aspects into one single project.

Nuxt uses the same code style as Vue.js but builds on top of what Vue.js offers. The SEO concerns of SPAs are addressed with server-side rendering, and optimized images can help improve performance. Along with built-in state management and composables for common tasks such as data fetching.

Nuxt is also more extendible using a module-based approach. Additional features can be added by developers to extend the Nuxt core. If you are new to Nuxt, don’t let all of these phrases and terminology demotivate you; starting can be relatively easy, and you can build upon your knowledge in small steps.