FRONT END

Home › Glossary › Front End· 290 ·

Nuxt

\\nukst\\n.

Filed underFront EndSoftware Engineering

In brief · quick answer

Nuxt is an open-source full-stack framework built on Vue.js that provides server-side rendering, file-based routing, static site generation, and auto-imports. It is to Vue what Next.js is to React.

§ 1 Definition

Nuxt (also called Nuxt 3) is a full-stack web framework built on Vue.js and created by the Nuxt Labs team. It extends Vue.js with production-grade features inspired by Next.js: server-side rendering, static site generation, file-based routing, server routes, auto-imports of components and composables, built-in state management (useState), TypeScript support, and a powerful module ecosystem. Nuxt 3 introduced the Nitro server engine, which enables cross-platform deployment (Node.js, serverless, edge, static) from the same codebase. Nuxt's auto-import feature eliminates repetitive import statements for components, composables, and utilities. The conventions-first approach means developers write less boilerplate than raw Vue. Companies using Nuxt include DHL, Nintendo, Adobe, and Upwork.

§ 2 Auto-Imports and Convention

Nuxt auto-imports components from the `components/` directory, composables from `composables/` directory, and utilities from `utils/` directory. This means you can use any component anywhere in your templates without explicit import statements. Nuxt also provides auto-imported utilities like `useState`, `useFetch`, `useRouter`, `useHead`, and `useRuntimeConfig`. This convention-over-configuration approach significantly reduces boilerplate compared to vanilla Vue or Vue with Vite.

§ 3 Nitro Engine and Deployment

Nuxt's Nitro server engine decouples the application from the deployment platform. The same Nuxt application can be deployed as a Node.js server to Vercel, Netlify, Cloudflare Pages, AWS Lambda, or as a static site on any CDN. Nitro automatically generates the appropriate output format for each platform. It also provides server routes (like Next.js API routes), server middleware, caching, and hot module replacement during development.

§ 4 Note

Common misunderstanding: Nuxt is not Vue plus a router. It is a full-stack framework with automatic code splitting, server-side rendering, server API routes, auto-imports, and a deployment engine. Much of the work that requires manual configuration in vanilla Vue (routing, SSR, data fetching, SEO) is handled automatically in Nuxt. Another misconception: Nuxt is only for SSR. It supports SSG (`nuxt generate`), CSR (by disabling SSR), and hybrid rendering (some routes SSR, others prerendered) within a single project.

§ 5 In code

```vue
<!-- pages/index.vue -->
<script setup lang="ts">
const { data: posts } = await useFetch('/api/posts');
</script>

<template>
  <div>
    <h1>{{ posts?.length }} Posts</h1>
    <PostCard v-for="post in posts" :key="post.id" :post="post" />
  </div>
</template>
```

```typescript
// server/api/posts.ts
export default defineEventHandler(async (event) => {
  const posts = await db.post.findMany();
  return posts;
});
```

§ 6 Common questions

Q. Should I use Nuxt or plain Vue?: A. Use Nuxt for any project that needs SSR, good SEO, file-based routing, or multiple pages. Use plain Vue with Vite for single-page apps, embedded widgets, or projects where full-stack features are unnecessary.
Q. Can I add Nuxt to an existing Vue project?: A. Not straightforwardly. Nuxt is a framework with its own project structure. It is better to start a new Nuxt project and migrate components than to try adding Nuxt to an existing Vue app.

Key takeaways

Nuxt is the official full-stack framework for Vue, providing SSR, SSG, file-based routing, and server routes.
Auto-imports eliminate repetitive import statements for components, composables, and utilities.
Nitro engine enables deployment to any platform (Node.js, serverless, edge, static) without configuration changes.

How Atomic Glue helps

Atomic Glue builds Nuxt applications for clients who have chosen Vue as their framework but need SSR, SEO optimization, and full-stack capabilities. We leverage Nuxt's auto-imports and conventions to ship features faster, and the Nitro engine ensures flexible deployment options. If your project is in the Vue ecosystem, we can help you evaluate whether Nuxt or a lighter setup serves your needs best. This is part of our broader website development services.

Get in touch

# Nuxt

Nuxt is an open-source full-stack framework built on Vue.js that provides server-side rendering, file-based routing, static site generation, and auto-imports. It is to Vue what Next.js is to React.

Category: Front End (also: Software Engineering)

Author: Atomic Glue Development Team

## Definition

## Auto-Imports and Convention

## Nitro Engine and Deployment

## Note

## In code

## Common questions
Q: Should I use Nuxt or plain Vue?
A: Use Nuxt for any project that needs SSR, good SEO, file-based routing, or multiple pages. Use plain Vue with Vite for single-page apps, embedded widgets, or projects where full-stack features are unnecessary.
Q: Can I add Nuxt to an existing Vue project?
A: Not straightforwardly. Nuxt is a framework with its own project structure. It is better to start a new Nuxt project and migrate components than to try adding Nuxt to an existing Vue app.

## Key takeaways

Nuxt is the official full-stack framework for Vue, providing SSR, SSG, file-based routing, and server routes.
Auto-imports eliminate repetitive import statements for components, composables, and utilities.
Nitro engine enables deployment to any platform (Node.js, serverless, edge, static) without configuration changes.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/nuxt