Essential patterns for building scalable, maintainable Nuxt applications
Design patterns in Nuxt.js provide proven solutions to common problems in web application development. They help create applications that are:
This guide covers the most essential Nuxt.js design patterns with practical examples you can use in your projects today.
Create consistent page layouts with reusable templates
<!-- layouts/default.vue -->
<template>
<div>
<AppHeader />
<NuxtPage />
<AppFooter />
</div>
</template>
<!-- pages/index.vue -->
<script setup>
definePageMeta({
layout: 'default'
})
</script>Build complex UIs from small, reusable components
<!-- components/FeatureCard.vue -->
<template>
<div class="feature-card">
<Icon :name="icon" />
<h3>{{ title }}</h3>
<p>{{ description }}</p>
</div>
</template>
<!-- pages/index.vue -->
<template>
<div>
<FeatureCard
v-for="feature in features"
:key="feature.id"
v-bind="feature"
/>
</div>
</template>Reuse stateful logic across components
// composables/useCounter.ts
export const useCounter = () => {
const count = ref(0)
const increment = () => count.value++
const decrement = () => count.value--
return { count, increment, decrement }
}
// components/Counter.vue
<script setup>
const { count, increment } = useCounter()
</script>// stores/counter.ts
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++
}
}
})
// components/Counter.vue
<script setup>
const counter = useCounterStore()
</script>// parent component
const user = ref({ name: 'John' })
provide('user', user)
// child component
const user = inject('user')Handle navigation guards and route protection
// middleware/auth.ts
export default defineNuxtRouteMiddleware((to) => {
const { isAuthenticated } = useAuth()
if (!isAuthenticated && to.path !== '/login') {
return navigateTo('/login')
}
})
// pages/dashboard.vue
definePageMeta({
middleware: 'auth'
})Extend Nuxt functionality or add global features
// plugins/hello.ts
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.provide('hello', (name: string) => `Hello ${name}!`)
})
// components/MyComponent.vue
<script setup>
const { $hello } = useNuxtApp()
console.log($hello('World')) // "Hello World!"
</script>Improve performance by lazy loading components
<script setup>
const MyComponent = defineAsyncComponent(() =>
import('./MyComponent.vue')
)
</script>
<template>
<Suspense>
<MyComponent />
<template #fallback>
<LoadingSpinner />
</template>
</Suspense>
</template>Create server-side API endpoints
// server/api/hello.ts
export default defineEventHandler((event) => {
return { message: 'Hello World' }
})
// Client-side usage
const { data } = await useFetch('/api/hello')Centralize error handling
// plugins/error-handler.ts
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.hook('vue:error', (error) => {
// Send to error tracking service
console.error('Vue error:', error)
})
nuxtApp.hook('app:error', (error) => {
// Handle app errors
console.error('App error:', error)
})
})Manage head tags and SEO metadata
// composables/useSeo.ts
export const useSeo = (title, description) => {
useHead({
title,
meta: [
{ name: 'description', content: description },
{ property: 'og:title', content: title }
]
})
}
// pages/index.vue
<script setup>
useSeo('Home Page', 'Welcome to our website')
</script>Share services across components
// plugins/api.ts
export default defineNuxtPlugin(() => {
const api = {
fetchPosts: () => $fetch('/api/posts')
}
return {
provide: { api }
}
})
// components/Posts.vue
<script setup>
const { $api } = useNuxtApp()
const posts = await $api.fetchPosts()
</script>Extend Nuxt core functionality
// modules/my-module.ts
export default defineNuxtModule({
meta: {
name: 'my-module'
},
setup(options, nuxt) {
// Add custom logic here
}
})Nuxt.js design patterns provide structured approaches to solving common problems in web application development. By applying these patterns, you can create applications that are:
Pro Tip: Start with the patterns that address your immediate needs, then gradually incorporate others as your application grows in complexity.
| Pattern | Best For | Complexity |
|---|---|---|
| Layout | Page structure | Low |
| Composables | Reusable logic | Medium |
| Pinia | Global state | Medium |
| Middleware | Route protection | Low |
| Plugins | Global features | Medium |
| Dynamic Import | Performance | Medium |
| Server API | Backend logic | High |
| Error Handling | Debugging | Medium |
| SEO | Search optimization | Low |
| DI | Service sharing | High |
| Modules | Nuxt extensions | High |