Приложение для заметок и Todo с локальным хранением данных, восстановлением черновиков, undo/redo и синхронизацией между вкладками.
- Nuxt 4 и Vue 3 Composition API;
- TypeScript strict;
- Pinia;
- SCSS;
- Vue I18n;
- Nuxt Icon с иконками Lucide;
- Vitest;
localStorage;- Docker.
Pinia хранит сохранённое состояние приложения. Редактор работает с отдельной локальной копией Note, поэтому несохранённые изменения не изменяют store до сохранения. Persistence и проверка версии схемы реализованы вручную поверх localStorage, без persisted-state плагинов.
Production-сборка запускается в SSR-режиме. Состояние из localStorage инициализируется на клиенте после hydration.
История использует команды/diff вместо полных snapshots заметки и хранит до 50 записей. Изменения текста фиксируются по blur, а новое действие после undo очищает redo-ветку.
Поддерживаются Ctrl/Cmd+Z и Ctrl/Cmd+Shift+Z. В текстовых input, textarea и contenteditable остаётся нативный undo браузера.
Несохранённый draft записывается отдельно от основных данных с debounce. После перезагрузки редактор предлагает восстановить или удалить его. Вкладки синхронизируют сохранённые заметки через нативный storage event, включая безопасную обработку удаления открытой заметки в другой вкладке.
Название заметки и текст каждого Todo обязательны. Значения только из пробелов считаются невалидными благодаря проверке через trim(). Ошибки отображаются рядом с конкретным полем после попытки сохранения.
npm ci
npm run devProduction build и preview:
npm run build
npm run previewUnit-тесты покрывают историю изменений, Pinia store, storage schema, drafts и общие функции работы с заметками.
npm test
npm run typecheckdocker compose upПриложение будет доступно по адресу http://localhost:8081.
Для standalone-версии Docker Compose можно использовать эквивалентную команду docker-compose up.
Демо опубликовано как SSG-версия: открыть приложение.