Estrutura de um projeto Vue.js: entenda como tudo funciona

Se tem uma coisa que confunde muita gente quando começa com front-end moderno é entender a estrutura de um projeto Vue.js.
Afinal, o Vue não é só “um script que manipula o DOM”, é um framework progressivo que te dá liberdade pra começar simples e crescer o projeto conforme a necessidade.

Então neste artigo, eu vou te mostrar como funciona um projeto Vue.js por dentro, explicando cada parte da estrutura, o papel dos arquivos principais, e ainda te dar umas boas práticas pra tu deixar teu projeto profissional desde o início.

Bora lá.

Tabela de Conteúdo

O que é o Vue.js e por que ele é tão popular

O Vue.js é um framework JavaScript progressivo criado pelo Evan You, ex-Google, que teve uma ideia genial: pegar o que tinha de bom no AngularJS e no React e juntar num pacote leve e simples de entender.

O resultado foi um framework fácil de começar, mas poderoso pra escalar.
Tu pode usar o Vue só pra manipular partes de uma página ou pra construir um SPA (Single Page Application) completo, com roteamento, estados globais e componentes reutilizáveis.

Além disso, ele tem:

Curva de aprendizado suave (tu entende rápido o core do framework)
Ótimo ecossistema (CLI, DevTools, Router, Pinia, Vite)
Comunidade gigante e bem ativa

Como o Vue.js funciona por dentro

Antes de entender a estrutura do projeto, é importante saber o que acontece por baixo dos panos.

O Vue é baseado em três pilares principais:

Reatividade: o Vue “ouve” mudanças nos dados e atualiza automaticamente a interface.
Componentização: tudo é um componente, e cada componente tem seu HTML, CSS e JS encapsulados.
Virtual DOM: o Vue não manipula o DOM real diretamente, ele usa uma cópia virtual, o que deixa tudo mais rápido e eficiente.

Ou seja, quando tu altera uma variável reativa, o Vue compara o Virtual DOM com o real e renderiza só o que mudou. Isso é o que faz ele ser tão leve e rápido.

Estrutura de um projeto Vue.js

Agora sim, vamos pro que interessa: a estrutura de pastas e arquivos de um projeto criado com o create-vue ou Vite.

Um projeto padrão fica assim:

my-vue-app/
│
├── node_modules/
├── public/
│   └── favicon.ico
│
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── router/
│   ├── store/
│   ├── App.vue
│   └── main.js
│
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md

Vamos entender cada parte:

node_modules/

Onde ficam todas as dependências do projeto.
Tu não mexe diretamente aqui. Quando tu instala pacotes com npm install ou yarn, eles vão pra essa pasta.

public/

Arquivos públicos, que não passam pelo bundler (Vite/Webpack).
Imagens, ícones, manifestos, etc.
O conteúdo daqui vai direto pra raiz do build final.

src/

É o coração do projeto.
Tudo o que o Vue compila e monta tá aqui dentro.
Vamos detalhar:

assets/ → arquivos estáticos que passam pelo build (imagens, estilos globais, etc).
components/ → componentes reutilizáveis (botões, cabeçalhos, cards, etc).
views/ → telas completas (HomeView, AboutView, etc).
router/ → configuração das rotas (com Vue Router).
store/ → gerenciamento de estado global (Pinia ou Vuex).
App.vue → o componente raiz.
main.js → o ponto de entrada da aplicação (onde tudo é montado).

O papel do `main.js` e da instância Vue

O arquivo main.js é onde tudo começa.
É nele que o Vue cria a aplicação e monta o App.vue na DOM.

Um exemplo simples:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'

const app = createApp(App)
app.use(router)
app.use(createPinia())
app.mount('#app')

Explicando:

createApp(App) cria a instância da aplicação.
app.use(router) e app.use(createPinia()) registram plugins globais.
app.mount('#app') injeta tudo dentro do elemento <div id="app"> do index.html.

É aqui que o Vue começa a vida da tua aplicação.

Componentes: o coração do Vue

Cada componente no Vue é basicamente um arquivo .vue que contém três blocos:

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  data() {
    return {
      message: 'Olá Vue!'
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

O template é o HTML, o script é a lógica e o style é o CSS.
Com scoped, o estilo afeta só aquele componente.

Essa separação deixa o código limpo e organizado, sem aquela bagunça de HTML misturado com JS puro.

Roteamento com Vue Router

Quando teu app cresce, tu precisa de múltiplas páginas.
O Vue Router resolve isso, permitindo definir rotas com base em componentes.

Um exemplo básico de router/index.js:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView }
]

export default createRouter({
  history: createWebHistory(),
  routes
})

Depois é só usar:

<router-link to="/">Home</router-link>
<router-link to="/about">Sobre</router-link>

<router-view />

Pronto. O Vue troca o conteúdo dinamicamente sem recarregar a página.

Gerenciamento de estado com Pinia

Quando a aplicação cresce, tu precisa compartilhar dados entre componentes.
Aí entra o Pinia, o sucessor do Vuex.

Um exemplo simples:

// store/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

E no componente:

<script setup>
import { useCounterStore } from '../store/counter'
const counter = useCounterStore()
</script>

<template>
  <button @click="counter.increment">Contar: {{ counter.count }}</button>
</template>

Simples, reativo e direto.
E o melhor: funciona perfeitamente com TypeScript.

Boas práticas de organização e escalabilidade

Algumas dicas pra tu manter teu projeto Vue saudável:

Usa nomes claros e padronizados pros componentes (UserCard.vue, Navbar.vue, etc).
Divide bem o código entre components, views e composables.
Evita lógica pesada nos templates.
Centraliza o estado no Pinia.
Usa Composition API em projetos novos, é mais moderna e mais organizada que a Options API.
Adota um padrão de pastas desde o início. Por exemplo:

src/
├── api/
├── assets/
├── components/
├── composables/
├── layouts/
├── router/
├── store/
├── views/
└── utils/

Com isso, o código escala com facilidade.

Como estruturar um projeto Vue.js profissional

Se tu quer montar um projeto com cara de produção, pensa assim:

Configura o lint (ESLint + Prettier)
Pra manter o código padronizado.
Adiciona um sistema de rotas e layouts dinâmicos
(tipo um layout base e um layout de login).
Centraliza as requisições HTTP
Cria um api/axios.js e importa em tudo que for request.
Usa envs (.env) pra variáveis de ambiente.
Adota testes básicos com Vitest ou Cypress.

Com isso, tu tem uma base sólida pra crescer o app sem bagunçar tudo.

Conclusão

Entender a estrutura de um projeto Vue.js é o primeiro passo pra dominar o framework.
Depois que tu entende o papel de cada arquivo e como o Vue monta tudo, fica fácil evoluir o projeto, adicionar rotas, stores, layouts e até integrações com APIs.

O Vue tem essa vantagem: é simples de entender, mas poderoso pra escalar.

Então agora que tu já entendeu tudo o que acontece por trás, cria teu projeto com npm create vue@latest e começa a brincar.
A melhor forma de aprender Vue.js é justamente essa, colocando a mão no código.