Estrutura de projetos Nuxt 3 e roteamento baseado em arquivos
Importação automática de pages/, layouts/ e components/, nomenclatura de arquivos para rotas aninhadas e rotas abrangentes.
Estrutura de projetos Nuxt 3 e roteamento baseado em arquivos é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
O que é o Nuxt 3
O Nuxt 3 é um metaframework criado sobre o Vue 3. Ele adiciona renderização no lado do servidor, roteamento baseado em arquivos, importações automáticas e um mecanismo de servidor, para que você possa criar aplicativos Vue completos com quase nenhuma configuração.
O diretório pages
O diretório pages/ controla o roteamento. Cada arquivo .vue se torna automaticamente uma rota — não é necessária uma configuração manual do roteador. pages/about.vue corresponde a /about.
pages/
index.vue -> /
about.vue -> /about
contact.vue -> /contactHabilitando o roteador
O roteador é ativado assim que existe um diretório pages/. Adicione <NuxtPage /> em app.vue para renderizar a página correspondente.
<!-- app.vue -->
<template>
<NuxtPage />
</template>Rotas aninhadas
As pastas criam caminhos aninhados. pages/blog/index.vue disponibiliza /blog, e pages/blog/archive.vue disponibiliza /blog/archive.
pages/
blog/
index.vue -> /blog
archive.vue -> /blog/archiveSegmentos dinâmicos com [id]
Coloque um nome de arquivo entre colchetes para criar um segmento dinâmico. pages/users/[id].vue corresponde a /users/42, expondo o id como um parâmetro de rota.
// pages/users/[id].vue
const route = useRoute()
const id = route.params.id // "42"Captura ampla com [...slug]
A forma com expansão [...slug].vue é uma captura ampla. Ela corresponde a qualquer profundidade de caminho e é ideal para conteúdo de CMS ou para criar um tratamento personalizado de erro 404.
pages/
[...slug].vue -> /a, /a/b, /a/b/c ...Diretório de layouts
A pasta layouts/ contém componentes envoltórios compartilhados entre as páginas — cabeçalhos, barras laterais e rodapés. layouts/default.vue envolve todas as páginas, salvo quando substituído.
<!-- layouts/default.vue -->
<template>
<header>My Site</header>
<slot />
</template>Escolhendo um layout
Uma página escolhe um layout com definePageMeta. O slot no layout renderiza o conteúdo da página.
<script setup>
definePageMeta({ layout: 'admin' })
</script>Componentes importados automaticamente
Tudo em components/ é importado automaticamente — não é necessária uma instrução de importação. As pastas aninhadas acrescentam um prefixo ao nome: components/base/Button.vue se torna <BaseButton />.
components/
TheHeader.vue -> <TheHeader />
base/Button.vue -> <BaseButton />Funções composáveis importadas automaticamente
O diretório composables/ também é importado automaticamente. As funções exportadas nele — e os recursos integrados do Nuxt, como useFetch — podem ser usadas em qualquer lugar sem importações.
// composables/useCounter.ts
export const useCounter = () => useState("c", () => 0)
// usable in any component without importingOutros diretórios importantes
O Nuxt também define plugins/ (executado na inicialização), middleware/ (proteções de rotas), server/ (API e lógica do servidor) e public/ (recursos estáticos servidos como estão).
Verificação rápida
Teste seus conhecimentos sobre a estrutura e o roteamento do Nuxt.
Recapitulação
Você aprendeu a estrutura do Nuxt:
- pages/ fornece roteamento baseado em arquivos; as pastas aninham as rotas.
- [id] é um segmento dinâmico, e [...slug] é uma captura ampla.
- layouts/ envolve as páginas; a escolha é feita por meio de definePageMeta.
- components/ e composables/ são importados automaticamente.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Estrutura de projetos Nuxt 3 e roteamento baseado em arquivos” é grátis?
Sim — o texto completo de “Estrutura de projetos Nuxt 3 e roteamento baseado em arquivos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Estrutura de projetos Nuxt 3 e roteamento baseado em arquivos”?
Importação automática de pages/, layouts/ e components/, nomenclatura de arquivos para rotas aninhadas e rotas abrangentes. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Estrutura de projetos Nuxt 3 e roteamento baseado em arquivos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Estrutura de projetos Nuxt 3 e roteamento baseado em arquivos
- Busca de dados: useFetch e useAsyncData
- Rotas de servidor e endpoints de API do Nuxt
- Modo SSR vs SSG vs SPA