Гайд по Vue в 2026

Актуализируем свои проекты с последними тенденциями и мощностями.

Обговорим весь стек.
1 шаблоны показали свою неэффективность используйте нечто иное
- язык <template lang="pug">: позволит эффективнее использовать переменные в шаблонах, делать преиспользуемые части без костылей и сильно лаконичнее
- использовать jsx: аналогично тому что выше, но вы можете улучшить экспириенс с помощью jsx-directive + setup sfc.

import { ref } from 'vue'

defineProps<{
  title: string
}>()

const count = ref(0)

export default () => (
  <section>
    <h3>{title}</h3>

    <button onClick={() => count.value++}>+1</button>

    <p v-if={count.value === 0}>Пока пусто</p>
    <p v-else>Счёт: {count.value}</p>

    <ul>
      <li v-for={(item, index) in count.value} key={index}>
        Элемент #{item}
      </li>
    </ul>
  </section>
)

Итого получаете все плюсы всех подходов разом

2. SASS не отвечает современным требованиям. Лучше совместить самые мощные и лучшие подходы + всегда выносите файл отдельно и переиспользуйте его между компонентами. Это кратно облегчит ваш бандл. Создаст единую точку ответственности и позволит вам легко и просто писать стили любой сложности

@reference "../../app.css"

radius = 16px
gap = 12px

.card
  @apply rounded-xl border border-slate-200 bg-white p-4 shadow-sm
  border-radius radius

  &--active
    @apply ring-2 ring-blue-500

  &__title
    @apply text-lg font-semibold text-slate-900
    margin-bottom gap

  &__text
    @apply text-sm text-slate-600

  &__button
    @apply mt-3 inline-flex items-center rounded-md bg-slate-900 px-3 py-2 text-sm font-medium text-white transition
    &:hover
      @apply bg-slate-700

  @media (min-width: 768px)
    @apply p-6

Теперь по инструментам:
Реактивность вью слишком громоздкая лучше предпочесть легковесную и мощную систему наносторов а для логики использовать ее написание на rxjs

// stores/counter.ts
import { atom } from 'nanostores'
import { Subject } from 'rxjs'

export const $count = atom(0)

const increment$ = new Subject<void>()

increment$.subscribe(() => {
  $count.set($count.get() + 1)
})

export function increment() {
  increment$.next()
}

Ну и основной набор инструментов:
- роутер: nanostores router
- SSR/SPA: vike гибкая альтернатива наксту, который позволит вам с меньшей магией управлять вашим приложением в любом из режимов

Все это позволит сделать ваши приложения
- легковесными
- быстрыми
- вам будет нужно писать сильно меньше кода для поддержки
- все эти инструменты хорошо известны ИИ и идеальны в сочетании с агентным кодингом