Vue можно использовать как отдельный файл сценария — никакого этапа сборки не требуется! Если у вас есть серверная часть, уже отображающая большую часть HTML, или ваша логика внешнего интерфейса недостаточно сложна, чтобы оправдать этап сборки, это самый простой способ интегрировать Vue в ваш стек. В таких случаях вы можете думать о Vue как о более декларативной замене jQuery.

Vue также предоставляет альтернативный дистрибутив под названием petite-vue, который специально оптимизирован для постепенного улучшения существующего HTML. Он имеет меньший набор функций, но чрезвычайно легок и использует реализацию, которая более эффективна в сценариях без этапа сборки.

Вы можете использовать Vue для создания стандартных веб-компонентов , которые можно встроить в любую HTML-страницу, независимо от того, как они отображаются. Этот вариант позволяет вам использовать Vue совершенно независимо от потребителя: полученные веб-компоненты можно встраивать в устаревшие приложения, статический HTML или даже приложения, созданные с помощью других платформ.

Некоторым приложениям требуется богатая интерактивность, глубокая глубина сеанса и нетривиальная логика с отслеживанием состояния во внешнем интерфейсе. Лучший способ создания таких приложений — использовать архитектуру, в которой Vue не только контролирует всю страницу, но также обрабатывает обновления данных и навигацию без необходимости перезагрузки страницы. Этот тип приложения обычно называется одностраничным приложением (SPA).

SPA обычно требуют, чтобы серверная часть предоставляла конечные точки API, но вы также можете объединить Vue с такими решениями, как Inertia.js, чтобы получить преимущества SPA, сохраняя при этом серверно-ориентированную модель разработки.

Чисто клиентские SPA создают проблемы, когда приложение чувствительно к SEO и времени создания контента. Это связано с тем, что браузер получит практически пустую HTML-страницу и должен дождаться загрузки JavaScript, прежде чем что-либо отображать.

Vue предоставляет первоклассные API для «рендеринга» приложения Vue в строки HTML на сервере. Это позволяет серверу отправлять обратно уже обработанный HTML, позволяя конечным пользователям видеть контент сразу же во время загрузки JavaScript. Затем Vue «гидратирует» приложение на стороне клиента, чтобы сделать его интерактивным. Это называется рендерингом на стороне сервера (SSR), и он значительно улучшает основные метрики Web Vital, такие как Largest Contentful Paint (LCP)

На основе этой парадигмы созданы фреймворки более высокого уровня на основе Vue, такие как Nuxt , которые позволяют разрабатывать полнофункциональные приложения с использованием Vue и JavaScript.

Рендеринг на стороне сервера можно выполнить заранее, если требуемые данные статичны. Это означает, что мы можем предварительно преобразовать все приложение в HTML и использовать его как статические файлы. Это повышает производительность сайта и значительно упрощает развертывание, поскольку нам больше не нужно динамически отображать страницы при каждом запросе. Vue по-прежнему может гидратировать такие приложения, чтобы обеспечить богатую интерактивность на клиенте. Этот метод обычно называют генерацией статического сайта (SSG), также известным как JAMStack

Одностраничные SSG лучше подходят, если вы ожидаете нетривиальной интерактивности, большой длины сеанса или сохранения элементов/состояния при навигации. В противном случае лучшим выбором будет многостраничный SSG.

Команда Vue также поддерживает генератор статических сайтов под названием VitePress, VitePress поддерживает оба варианта SSG. Nuxt также поддерживает SSG. Вы даже можете смешивать SSR и SSG для разных маршрутов в одном приложении Nuxt.