Современные сайты требуют одновременно высокой скорости, удобной разработки и гибкой архитектуры. Если раньше приходилось выбирать между статическим сайтом (SEO и скорость) и SPA (удобная логика, но тяжёлый бандл), то сегодня этот компромисс решают новые инструменты. Один из них — Astro.
Astro — это мета-фреймворк, который позволяет собирать сайты из компонентов разных UI-библиотек (Vue, React, Svelte, Solid и др.), сохраняя при этом минимальный JavaScript на клиенте.
В этой статье разберём, зачем использовать Astro с Vue и как выстроить архитектуру проекта.
Почему Astro + Vue?
Astro отлично подходит для проектов, где много статического контента (блог, документация, лендинги), но при этом есть интерактивные элементы.
- Astro отвечает за сборку страниц, рендерит их на сервере или в статический HTML.
- Vue подключается там, где нужна динамика: кнопки, фильтры, корзина в интернет-магазине и т.п.
Преимущества подхода:
- 🚀 Производительность — Astro рендерит HTML без лишнего JS.
- 🧩 Гибкость — можно использовать Vue только для отдельных компонентов.
- 🔧 Простота — архитектура проекта разделяет «контент» и «интерактив».
Установка и настройка
Создадим новый проект:
npm create astro@latest my-app
cd my-app
npm install
Добавим поддержку Vue:
npm install @astrojs/vue
В astro.config.mjs:
import { defineConfig } from 'astro/config'
import vue from '@astrojs/vue'
export default defineConfig({
integrations: [vue()],
})
Архитектура проекта
Предположим, у нас сайт-блог с интерактивными элементами. Структура может выглядеть так:
src/
├─ components/
│ ├─ Header.astro
│ ├─ Footer.astro
│ └─ ui/
│ ├─ Counter.vue
│ └─ CommentForm.vue
├─ layouts/
│ └─ BaseLayout.astro
├─ pages/
│ ├─ index.astro
│ ├─ blog/
│ │ └─ [slug].astro
│ └─ about.astro
└─ styles/
└─ global.css
Пример страниц и компонентов
Базовый лейаут BaseLayout.astro:
---
const { title } = Astro.props
---
<html lang="en">
<head>
<title>{title}</title>
<link rel="stylesheet" href="/styles/global.css" />
</head>
<body>
<slot />
</body>
</html>
Главная страница index.astro:
---
import BaseLayout from "../layouts/BaseLayout.astro"
import Counter from "../components/ui/Counter.vue"
---
<BaseLayout title="Главная">
<h1>Добро пожаловать в мой блог!</h1>
<p>Astro + Vue = 🔥</p>
<!-- Vue компонент подключается только на клиенте -->
<Counter client:load />
</BaseLayout>
Vue-компонент Counter.vue:
<template>
<div>
<p>Счётчик: {{ count }}</p>
<button @click="count++">Увеличить</button>
</div>
</template>
<script setup>
import { ref } from "vue"
const count = ref(0)
</script>
Когда использовать Astro с Vue?
- Если нужен быстрый сайт с SEO (блог, документация, маркетинг).
- Если есть немного интерактивных элементов.
- Если хочется комбинировать Vue с другими фреймворками.
Итоги
Astro + Vue — это удобный способ строить сайты нового поколения: быстрые, SEO-дружественные, но при этом интерактивные.
Astro отвечает за структуру и скорость, а Vue даёт возможность добавлять динамику там, где она нужна.
Если вы устали от тяжёлых SPA и хотите лёгкий и гибкий проект — попробуйте Astro с Vue.
Добавить комментарий