Over the past 2 years, I've dived into Nuxt's capabilities, and I've been consistently blown away by its versatility and power. From lightning-fast static site generation to seamless server-side rendering, Nuxt has transformed the way I approach and understand Vue.js and web development in general.

In this post, I'm excited to share with you five of the coolest things I've discovered you can do with Nuxt. These aren't just surface-level tricks – they're game-changers that have allowed me to take my projects to the next level.

Whether you're a seasoned Vue.js developer or just dipping your toes into the world of modern web frameworks, I promise you'll find something here to spark your creativity and streamline your workflow.

So, let's dive into the wonderful world of Nuxt. Trust me, by the end of this post, you'll be excited to fire up your code editor and start experimenting!

Build Fullstack Apps without leaving Nuxt

What I consider one of its most game-changing features: the ability to build full-stack applications without ever leaving the Nuxt ecosystem. This is particularly prominent in Nuxt 3, and it's revolutionized the way I approach web development.

Nitro - Nuxt Server Engine

At the heart of this capability is the Nuxt Server Engine. It allows you to write server-side logic right alongside your frontend code, all within your Nuxt project. This means you can handle everything from API routes to database operations without needing a separate backend framework.

Here's a simple example of how you can create an API endpoint in Nuxt:

// server/api/users.js
export default defineEventHandler(async (event) => {
  // You can perform database operations, authentication, etc. here
  const users = await fetchUsersFromDatabase()
  return users
})

This creates a /api/users endpoint that you can call from your frontend code or even use as a standalone API.

Create Routes or Components with just a command

One of the things that continually impresses me about Nuxt is how it streamlines the development process. A perfect example of this is the ability to create routes or components with a simple command. This feature has been a massive time-saver in projects, and it's one of those little things that make working with Nuxt such a joy.

Auto-generated Routes

In traditional Vue.js applications, you'd need to manually set up your router and create each route. Nuxt takes care of this for you with its file-based routing system. Simply create a Vue file in your pages directory, and Nuxt automatically generates the corresponding route.

For instance, if you create a file at pages/about.vue, Nuxt will automatically create a route for /about. It's that simple!

But it gets even better. With Nuxt 3, you can use the Nuxt CLI to generate these files for you. Here's how it works:

npx nuxi add page about

This command will create a new about.vue file in your pages directory, complete with a basic component structure. It's a small thing, but when you're rapidly prototyping or building out a large application, these seconds saved add up quickly.

Easy Component Creation

The same principle applies to components. Instead of manually creating files and setting up the basic structure, you can use the Nuxt CLI:

npx nuxi add component TheHeader

This command will create a new TheHeader.vue file in your components directory, saving you the trouble of setting up the basic component structure.

Manage 3rd party scripts with performance in mind

Third-party scripts are a double-edged sword. They allow us to quickly add powerful functionality to our sites – think analytics, video embeds, maps, or social media integrations. However, they can significantly impact our site's performance, privacy, and user experience if not managed properly.

Introducing Nuxt Scripts (Beta)

I want to highlight an exciting new module: Nuxt Scripts. This module promises to enhance performance, privacy, and developer experience when incorporating third-party scripts into Nuxt applications.

Nuxt Scripts is currently in beta, but provides solutions to address these challenges head-on. While it's not yet ready for production use, it offers a glimpse into the future of script management in Nuxt applications. Here's why you should be excited about it:

1. Performance Optimization
   • Promises script loading triggered only when Nuxt is ready, by default.
   • Plans for advanced triggering of script loads, independent of implementation specifics.
   • Aims to improve script loading times with Bundling Remote Scripts.
2. Enhanced Developer Experience
   • Proposes a curated script registry for common third-party applications.
   • Aims to simplify analytics event management, e.g., tracking page views.
   • Plans for input validation for script options.
   • Promises type safety and SSR-compliant APIs.
3. Privacy Protection
   • Aims to minimize user data exposure by Bundling Remote Scripts.
   • Plans for integrated consent management.
   • Proposes enhanced script privacy settings such as crossorigin="anonymous" and referrerpolicy="no-referrer".

How to Use the Script Module

Using the Script module is straightforward. First, you need to install it:

npx nuxi@latest module add @nuxt/scripts

That's it! The Nuxt Scripts module should be downloaded and added to your Nuxt Config modules

Now let’s see a basic use case by loading the script in our component. You can do this by using the useScriptNpm registry script.

<script setup lang="ts">
useScriptNpm({
  packageName: 'js-confetti',
  file: 'dist/js-confetti.browser.js',
  version: '0.12.0',
})
</script>

If you check your browser requests, you should see the script being loaded when the component is mounted.

Preview APIs from Nuxt Devtools

As we continue our exploration of Nuxt's capabilities, I can't help but get excited about one of my favorite new dev ex features: the ability to preview APIs directly from Nuxt Devtools. This feature is and will be a game-changer in our development workflow, and it's one of those things that we all can agree is a huge developer experience boost.

Previewing Your APIs

Once you've created an API route in your Nuxt application (as we discussed in the previous section), you can instantly preview and test it using Nuxt Devtools. Here's why this is so cool:

1. Instant Feedback: You can see the response of your API endpoints without leaving your development environment or setting up a separate API testing tool.
2. Real-time Updates: As you make changes to your API routes, the preview updates in real-time, allowing for rapid iteration and debugging.
3. Method Switching: Easily switch between different HTTP methods (GET, POST, PUT, DELETE, etc.) to test various scenarios.
4. Request Body Editor: For POST and PUT requests, you can edit the request body directly in the Devtools interface.
5. Headers and Params: Add custom headers and URL parameters to your requests, simulating different client scenarios.

Automatic Sitemap Generation for improved SEO

I can't overlook one of Nuxt most useful features for SEO: automatic sitemap generation. This ties in perfectly with Nuxt's static site generation and server-side rendering capabilities, enhancing your site's discoverability and search engine performance.

The Importance of Sitemaps

Before we look at how Nuxt handles sitemaps, let's quickly recap why sitemaps are crucial:

1. Improved Search Engine Crawling: Sitemaps help search engines like Google discover and index all the pages on your website more efficiently.
2. Faster Indexing: New or updated content can be indexed more quickly when listed in a sitemap.
3. Hierarchy Communication: Sitemaps can indicate the relative importance of pages within your site structure.
4. Handling Large Websites: For sites with hundreds or thousands of pages, sitemaps ensure no important pages are overlooked by search engines.
5. Support for Rich Media: XML sitemaps can include information about specific types of content like videos or images.

Nuxt and Sitemaps

Now, here's where Nuxt shines. With the @nuxtjs/sitemap module, you can automatically generate a sitemap for your Nuxt.js project. Here's how easy it is to set up:

Install @nuxtjs/sitemap dependency to your project:

npx nuxi@latest module add sitemap

Set Site Config

It's recommended to always set a canonical site URL to avoid duplicate content issues.

You can set your site URL in many ways, the easiest is nuxt.config or .env:

While optional, it's also recommended to set a name as this will be displayed on your sitemap.

export default defineNuxtConfig({
  site: {
    url: 'https://example.com',
    name: 'My Awesome Website'
  },
})

After you've set up the module, if you visit /sitemap.xml you can see the generated sitemap.

Conclusion

Nuxt has genuinely changed the way I approach web development. Its combination of power, flexibility, and developer-friendly features makes it a joy to work with. Whether you're building a simple blog or a complex web application, Nuxt has something to offer.

I encourage you to give Nuxt a try on your next project. Explore these features and discover even more cool things you can do. Trust me, once you start, you'll wonder how you ever developed without it!

If you are also looking for a comprehensive guide on becoming a Nuxt master then let me introduce you to our MasteringNuxt 3 course. Curated and developed to provide you with everything you need to build a real world Nuxt application. Definitely check it out.