Nuxt/docs/content/2.concepts/1.introduction.md

# What is Nuxt?

Nuxt goal is to make web development intuitive and performant with a great developer experience in mind.

## Why Nuxt?

To understand what is Nuxt, we need to understand what we need to create a modern application:
::list{type=success}

- A JavaScript framework to bring reactivity and web components, we chose [Vue.js](https://v3.vuejs.org).
- A bundler to support hot module replacement in development and bundle your code for production, we support both [Webpack 5](https://webpack.js.org/) and [Vite](https://vitejs.dev/).
- A transpiler in order to write the latest JavaScript syntax while supporting legacy browsers, we use [esbuild](https://esbuild.github.io) for that.
- A server for serving your application in development, but also to support [server-side rendering](https://vuejs.org/api/ssr.html#server-side-rendering-api) or API routes, Nuxt uses [h3](https://github.com/unjs/h3) for deployment versatility such as serverless, workers, Node.js and unmatched performance.
- A routing library to handle client-side navigation, we chose [vue-router](https://router.vuejs.org/).
::

This is only the tip of the iceberg, imagine having to set up all of this for your project, make it work, and then, maintain it over time. We have been doing this since October 2016, tuning all the configurations to provide the best optimization and performance for any Vue application.

Nuxt takes care of this so you can focus on what matters: **creating your web application**.

On top of this setup, Nuxt provides a [directory structure](/docs/directory-structure/app) to follow, focused on specific features to keep your focus on creating, not configuring.

## How does it work?

Nuxt is composed of different [core packages](https://github.com/nuxt/framework/tree/main/packages):
::list{type=info}

- Core Engine: [nuxt3](https://github.com/nuxt/framework/tree/main/packages/nuxt3)
- Bundlers: [@nuxt/vite-builder](https://github.com/nuxt/framework/tree/main/packages/vite) and [@nuxt/webpack-builder](https://github.com/nuxt/framework/tree/main/packages/webpack)
- Command line interface: [nuxi](https://github.com/nuxt/framework/tree/main/packages/nuxi)
- Server engine: [@nuxt/nitro](https://github.com/nuxt/framework/tree/main/packages/nitro)
- Development kit: [@nuxt/kit](https://github.com/nuxt/framework/tree/main/packages/kit)
- Nuxt 2 Bridge: [@nuxt/bridge](https://github.com/nuxt/framework/tree/main/packages/bridge)
::

We recommend reading each concept to have a full vision of Nuxt capabilities and scope of each package.

## Are you Nuxt?

Nuxt is the backbone of your Vue.js project, giving structure to build your project with confidence while keeping flexibility.

Extendable with a strong module ecosystem and hooks engine, it makes it easy to connect your REST or GraphQL endpoints, favorite CMS, CSS frameworks and more. PWA and AMP support is only a module away from your Nuxt project.

::alert{type=info icon=👍}
Ready to try? Head over the [Installation section](/getting-started/installation).
::

### Are you *courageously* Nuxt?

Take a stab at an open [issue](https://github.com/nuxt/framework/issues). This is actually the best way to learn Nuxt, by actually diving into the code. You may even bring an approach or alternative solution that makes Nuxt even better! So, what are you waiting for? Let's go!