Як створити проєкт Vue з TypeScript і що робить Vite з .vue-файлами?

Question

Accepted Answer

Офіційний спосіб створити проєкт - утиліта create-vue:
npm create vue@latest

Вона запитає, що додати: TypeScript, Vue Router, Pinia, Vitest, Playwright, ESLint, Prettier. Результат - проєкт на Vite з готовими налаштуваннями.
Що робить Vite:

під час розробки (npm run dev) віддає модулі браузеру майже як є, а .vue-файли компілює на льоту плагіном @vitejs/plugin-vue: шаблон - у функцію рендеру, <script setup> - у звичайний компонент, стилі - у CSS. Зміна компонента оновлюється через гарячу заміну модулів (HMR) зі збереженням стану;
для продакшену (npm run build) збирає, мініфікує, розділяє код на частини й додає хеші в імена файлів.

TypeScript у Vite лише прибирає типи (транспіляція), але не перевіряє їх - заради швидкості. Перевірку робить окрема команда:
"scripts": {
  "dev": "vite",
  "build": "vue-tsc --build && vite build",
  "type-check": "vue-tsc --build"
}

vue-tsc - обгортка над tsc, що розуміє .vue-файли. Звичайний tsc їх не бачить.
У Laravel-проєкті Vue підключають до вже наявного Vite:
// vite.config.js
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    laravel({ input: 'resources/js/app.ts', refresh: true }),
    vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false } } }),
  ],
})

Опції transformAssetUrls потрібні, щоб шляхи до зображень у шаблонах (/images/logo.png) вели на файли Laravel у public, а не перетворювалися на імпорти. Стартові набори Laravel (Vue + Inertia) мають усе це налаштованим.
Редактор: розширення Vue - Official (колишній Volar) для VS Code дає підсвітку, автодоповнення й перевірку типів у шаблонах.
Докладніше в документації: Швидкий старт

Як створити проєкт Vue з TypeScript і що робить Vite з .vue-файлами?

Схожі питання