The Vue meta-framework. File-based routing, server rendering and — its signature trick — auto-imports: use components and composables without ever writing an import.
In Nuxt you never type import for your components, ref, useFetch or composables — Nuxt scans your folders and wires them in automatically. Click Use it to drop a symbol into the editor and watch the import appear for free.
app.vue — what you write
Nuxt adds behind the scenes
Hover a green symbol in the editor to see where it came from.
<!-- app.vue — zero imports, all auto-wired --> <script setup> const count = ref(0) // ref auto-imported const { data } = await useFetch('/api/me') // composable auto-imported </script>
Like Next, Nuxt turns the pages/ folder into your router. [id].vue means a dynamic param. Click a file to see its URL and the rendered Vue page.
pages/ directory
URL + rendered page
A .vue file in pages/ becomes a route automatically.
Nuxt is Vue, so the UI reacts to state instantly. This counter mimics a ref() bound to the template — change the value, the view updates.
<script setup> const count = ref(0) </script> <template> <button @click="count++">{{ count }}</button> </template>
Nuxt's useFetch handles loading, caching and SSR data hydration in a single composable. Press the button to simulate fetching server data.