# Что выполняется первым main.ts или app.vue
Коротко:
👉 **первым выполняется `main.ts`**, а уже потом — `App.vue`.
---
## Порядок выполнения во Vue
### 1️⃣ `main.ts` — **точка входа**
Это **самый первый файл**, с которого стартует приложение.
Пример:
```ts
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
```
Что здесь происходит:
- создаётся Vue-приложение
- подключаются плагины (router, store и т.д.)
- приложение **монтируется**
- Vue говорит: «рендерим `App.vue`»
---
### 2️⃣ `App.vue` — **корневой компонент**
`App.vue` начинает выполняться **после `mount()`**.
```vue
```
---
## Если смотреть по жизненному циклу
Пример логов:
```ts
// main.ts
console.log('main.ts')
createApp(App).mount('#app')
```
```vue
```
📌 В консоли будет:
```
main.ts
App.vue setup
```
---
## Важно понимать
- `main.ts` **не имеет жизненного цикла**
- `App.vue` — обычный Vue-компонент:
- `setup`
- `onBeforeMount`
- `onMounted`
- и т.д.
---
## Частые случаи
### 🔹 Где что писать
| Что нужно сделать | Где |
|---|
| Подключить router | `main.ts` |
| Подключить pinia | `main.ts` |
| Глобальные стили | `main.ts` |
| Логика UI | `App.vue` |
| `` | `App.vue` |
---
### 🔹 В Nuxt
Там **нет `main.ts`**:
- Nuxt сам управляет инициализацией
- `app.vue` — корневой компонент
- плагины — в `plugins/`