Learn Nuxt.js: The Vue Meta-Framework

Nuxt is to Vue what Next.js is to React: a full framework that takes care of routing, SSR, data fetching, and a thousand other details so you can focus on the app.

1. File-Based Routing

Drop a .vue file in pages/ — that's a route.

pages/
  index.vue           -> /
  about.vue           -> /about
  blog/index.vue      -> /blog
  blog/[slug].vue     -> /blog/:slug

2. Auto Imports

Components in components/ and composables in composables/ are imported automatically. So are Vue's reactive APIs (ref, computed, etc).

3. Data Fetching

Use useFetch or useAsyncData. They run on the server during SSR and hydrate on the client.

<script setup>
const { data: posts } = await useFetch('/api/posts')
</script>

<template>
  <ul>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

4. Server Routes

Need a backend? Drop a file in server/api/.

// server/api/posts.get.ts
export default defineEventHandler(async () => {
  return [{ id: 1, title: 'Hello Nuxt' }]
})