# Где находится vue-router

`vue-router` **не лежит в твоём проекте напрямую** — это **npm-пакет**, который устанавливается как зависимость.

Разберём по шагам 👇

---

## Где физически находится `vue-router`

После установки он лежит здесь:

```
node_modules/vue-router/

```

То есть импорт:

```ts
import { createRouter } from 'vue-router'

```

читается как:

> «Возьми пакет `vue-router` из `node_modules`»

---

## Откуда он берётся

### 1️⃣ Он указан в `package.json`

```json
{
  "dependencies": {
    "vue": "^3.x.x",
    "vue-router": "^4.x.x"
  }
}

```

### 2️⃣ Устанавливается через npm / yarn / pnpm

```bash
npm install vue-router
# или
pnpm add vue-router

```

---

## Как JS понимает `vue-router`

Алгоритм такой:

1. Видит импорт `'vue-router'`
2. Ищет папку:
    
    ```
    node_modules/vue-router
    
    ```
3. Смотрит `package.json` внутри пакета
4. Берёт entry point (обычно `dist/vue-router.mjs`)

---

## Что внутри `vue-router`

Примерно так:

```
node_modules/
  vue-router/
    dist/
      vue-router.mjs
      vue-router.cjs
    package.json

```

Именно из `dist` экспортируются:

- `createRouter`
- `createWebHashHistory`
- `createWebHistory`
- `RouterView`
- `useRoute`
- `useRouter`

---

## Важный момент 🔥

```ts
import './router'

```

⬆️ это **локальный файл**

```ts
import 'vue-router'

```

⬆️ это **npm-пакет**

---

## В Nuxt

Ты **не импортируешь `vue-router` вручную**:

- Nuxt подключает его сам
- `RouterView`, `useRoute` — доступны автоматически

---

## Коротко

> `vue-router` — это **пакет из `node_modules`**, подключённый через `package.json`