Nuxt Essentials: A Practical Cheatsheet for Beginners & Returners

Nuxt’s been around for a while -built on top of Vue- and with Nuxt 4 just around the corner, it’s a good time to revisit some of the basics. If you're new to Nuxt (or Vue), or just catching up after a break, here’s what people are actually talking about when they say things like 'Vite', 'Pinia', or 'Nitro'.

Folder structure in Nuxt

Folder	Purpose
pages/	Auto-routes based on file names
components/	Vue components
layouts/	Custom layouts
middleware/	Functions run before rendering page
plugins/	Inject functions/libraries
composables/	Auto-imported composables

Key tools in Nuxt ecosystem

Tool	Purpose
Nitro	Server engine (used for SSR, server APIs, middleware)
Vite	Frontend bundler (use for Dev server, build optimization)
Pinia	State management system

Now let's get into detail (only a bit)

Plugins:

Plugins in Nuxt are a way to extend your app’s functionality by injecting features, libraries, or custom logic into the app context. They run before your Vue components are created. They run globally and are available everywhere without having to import it manually each time.

In Nuxt 3, you can create a plugin like:

// /plugins/myPlugin.ts
export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.provide('hello', () => 'Hello from plugin!')
})

And use it like:

const hello = inject('hello')

Composables:

In short: Composables = Reusable logic using Composition API

Let's look at a simple composable example:

// composables/useCounter.ts
export const useCounter = () => {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}
```js

You can use it in your vue component like:

Clicked {{ count }} times

Middleware:

// middleware/auth.global.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useUser()
  if (!user.value) return navigateTo('/login')
})

---

What is Nitro?

Nitro is a lightweight universal server engine built by the Nuxt team. It’s what powers SSR (Server-Side Rendering), API routes, and deployment adapters in Nuxt 3.

Nitro: Next Generation Server Toolkit

What is Vite?

Vite is a (blazing fast) modern frontend bundler with tree shaking, instant dev start and fast Hot Module Replacement.

Vite: the build tool for web

What's Pinia then?

Pinia is the official state management library for Vue 3, and by extension, Nuxt 3.

Think of Pinia as Vuex’s leaner, friendlier successor. You define a store using "defineStore()" and use it in components without boilerplate.

It's lightweight and modular and there's first-class support for it in Nuxt (meaning it's officially integrated, fully supported, and works seamlessly out of the box)

The store for Vue.js

I've heard of Rollup and Rolldown, what are they?

Rollup is a JavaScript module bundler (like Webpack or Vite's underlying engine for builds), known for being simple, fast, and tree-shake-friendly. It takes all your import/export JavaScript (or TypeScript) files, bundles them into one or more optimized output files.

In our context, Vite uses Rollup under the hood for production builds.

Rolldown is a newer project, currently under development (time of writing this article: June/July 2025).

It's a Rollup-compatible bundler written in Rust, aiming to be blazing fast (like esbuild or Turbopack).