Building Modern Web Apps with Nuxt 3 and Vue Composition API

Nuxt 3 represents a significant evolution in the Vue ecosystem, bringing improved performance, better TypeScript support, and a more intuitive developer experience. This guide covers key patterns we use in production applications.

Why Nuxt 3?

Nuxt 3 offers several advantages for building modern web applications:

• Hybrid Rendering: Choose SSR, SSG, or client-side rendering per route
• Auto-imports: Components, composables, and utilities are automatically imported
• TypeScript First: Full TypeScript support out of the box
• Nitro Server: A powerful server engine with edge deployment support

Composition API Patterns

Composables for Reusable Logic

Extract reusable logic into composables:

// composables/useAuth.ts
export function useAuth() {
  const user = useState<User | null>('user', () => null)
  const isAuthenticated = computed(() => !!user.value)

  async function login(credentials: Credentials) {
    const response = await $fetch('/api/auth/login', {
      method: 'POST',
      body: credentials,
    })
    user.value = response.user
  }

  return { user, isAuthenticated, login }
}

Type-Safe Props and Emits

Define component interfaces explicitly:

interface Props {
  title: string
  variant?: 'primary' | 'secondary'
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
})

const emit = defineEmits<{
  (e: 'update', value: string): void
  (e: 'close'): void
}>()

Data Fetching Strategies

useAsyncData for Server-Side Data

const { data: posts, pending } = await useAsyncData('posts', () =>
  queryCollection('blog').order('date', 'DESC').all()
)

useFetch for API Calls

const { data, error } = await useFetch('/api/users', {
  query: { page: currentPage },
})

Performance Optimization

Lazy Loading Components

<template>
  <LazyHeavyChart v-if="showChart" :data="chartData" />
</template>

Image Optimization

Use Nuxt Image for automatic optimization:

<NuxtImg
  src="/images/hero.jpg"
  width="1200"
  height="600"
  format="webp"
  loading="lazy"
/>

Conclusion

Nuxt 3 provides a robust foundation for building modern web applications. By leveraging its features effectively, you can build performant, maintainable applications that scale with your needs.