Building Modern Websites with Nuxt 4

Nuxt 4 brings a host of improvements that make building modern web applications a joy. Let's explore some of the key features that make it stand out.

The Power of File-Based Routing

One of Nuxt's strongest features is its file-based routing system. Simply create a file in the pages directory, and you've got a route.

pages/
├── index.vue        → /
├── about.vue        → /about
└── blog/
    ├── index.vue    → /blog
    └── [slug].vue   → /blog/:slug

Auto-Imports

Gone are the days of manually importing every component and composable. Nuxt automatically imports:

• Components from the components/ directory
• Composables from the composables/ directory
• Utils from the utils/ directory
• Vue's reactivity APIs (ref, computed, etc.)

<script setup>
// No imports needed!
const count = ref(0)
const doubled = computed(() => count.value * 2)
</script>

Server-Side Rendering by Default

Nuxt 4 provides SSR out of the box, which means:

• Better SEO with fully rendered HTML
• Faster initial page loads
• Improved performance on slower devices

Hybrid Rendering

With routeRules, you can configure different rendering strategies per route:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/api/**': { cors: true },
    '/admin/**': { ssr: false }
  }
})

Conclusion

Nuxt 4 continues to push the boundaries of what's possible with Vue.js. Whether you're building a simple blog or a complex web application, it provides the tools you need to succeed.