🚀 CRM система с нуля на VUE 3 / NUXT [Vue Query / VeeValidate / Pinia / Shadcn / AppWrite / TS]

Поддержи видео лайком, 2000 лайков 👍 и я снимаю большой проект на Nextjs 14 RED PLANNER!

Открываем новую главу в разработке на нашем канале! Сегодня мы научимся создавать CRM систему с нуля, используя современные инструменты и технологии. В этом проекте мы будем использовать Vue и Nuxt для создания динамичного пользовательского интерфейса. Благодаря Vue Query, мы обеспечим эффективное взаимодействие с сервером, а с помощью VeeValidate обеспечим валидацию форм. Чтобы управлять состоянием приложения, мы используем Pinia. Shadcn поможет нам в работе с дизайном, а AppWrite предоставит необходимые бэкенд-возможности. Проект будет типизирован с использованием TypeScript (TS), что обеспечит дополнительную надежность и стабильность кода. Присоединяйтесь к нам в этом увлекательном путешествии по созданию CRM системы с нуля! [CRM система с нуля на VUE / NUXT]

🍥 Тема в редактор/IDE - Serendipity Sunset / Operator mono lig / Catppuccin Frappe
🎹 Клавиатура - NuPhy Halo65 / switch Night Breeze

Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях!

00:00:00 - Начало
00:01:42 - Стэк технологий
00:03:15 - ДЕМО проекта
00:17:37 - Тема, шрифт, иконки
00:20:40 - Инициализация проекта
00:23:00 - Структура проекта
00:29:00 - Layout в nuxt
00:41:00 - Sidebar
00:49:00 - Shadcn
01:03:30 - Подключение шрифта
01:06:00 - Настройка tailwind
01:12:00 - Делаем сайт крупнее
01:15:00 - Nuxt Icons
01:19:00 - Меню
01:33:28 - Loader
01:35:00 - Создаем back-end
01:53:40 - Главная
02:05:40 - Pinia
02:16:40 - Логин и регистрация
02:35:40 - Делаем канбан
02:52:40 - Vue Query
03:11:40 - Трансформация данных
03:29:40 - Форма добавления сделки
03:51:40 - Перетаскивание карточки
03:56:40 - Генерация градиента
04:00:19 - Исправил Баг
04:01:28 - Выезжающая карточка Slideover
04:26:40 - Комментарии к сделке
04:39:15 - Список клиентов
04:51:10 - Редактирование клиента
04:59:40 - Загрузка изображения
05:07:40 - Празднуем окончание проекта
05:09:40 - Мнение про VUE/NUXT
05:13:20 - Мнение про AppWrite
05:14:00 - Мнение про Shadcn
05:14:20 - Спасибо за просмотр!

#CRMСистема #Vue #Nuxtjs #vuequery #typescript #vue3 #RedGroup

[REDGroup]

Поддержи видео лайком, 2000 лайков 👍 и я снимаю большой проект на Nextjs 14 RED PLANNER!

[wenpnbo]

только подумал изучать дополнительно Vue, и сразу же выходит топовый видос 🔥🔥🔥🔥🔥

[bearvorkuta]

Вот бывает же такое, только вчера собрался с nuxt познакомиться. Подарок прям. Спасибо, обязательно посмотрю!

[andreyplatov]

Спасибо за труды и терпение, с наступающим Новым годом.

[jhoquwe]

Спасибо Огромное за проект!!! Ты Молодец !!!

[encjdnp]

Спасибо за видео по Vue и коммент в поддержку)

[kennyg]

🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
Ура! Ждал Vue🎉

[BakiSultanov]

Вы очень тяжело работающий человек мне кажется
Ваще класс, спасибо за идаельный курс по Nuxt !

[VusalTeam]

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉 за 3 дня досмотрел и хочу сказать ещё раз это пушка, все очень доступно и понятно, без лишней воды, спасибо большое за проделанную работу, столько было затронуто за одно видео ❤

[neo]

Все круто, продолжай обязательно. Лучший Vue 3. Спасибо за труд✅👍

[overshotkuka]

Один из лучших подарков на новый год🎉❤

[trgwsrz]

Хороший видос, сам учу реакт, но было интересно. Спасибо

[vzmxhpz]

формат супер, один из лучших примеров по накст 3

[reshetnikAlex]

Vue 3 был полностью написан на TS. Пишу на vue 3 c ts в vscode. Никаких проблем нет, ничего не вылетает. Может в nuxt проблемы, хотя думаю что все же твой конфиг

[lovelyboy]

🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥 - аванс, так а теперь посмотримс что тут)

[serb]

3:36:15 Есть возможность использовать TS с defineProps, можно расcписать так:
const props = withDefaults(
defineProps<{
status: string;
refetch: () => void;
}>(),
{
status: '',
}
);

И тогда будет работать, ошибки тоже кстати будут подсвечиватся если props не передали в компонент. Если нету значений по умолчанию, то можно так расcписать:
defineProps<{
status: string;
refetch: () => void;
}>();

Не обязательное значение задется через "?", например "status?: string".

[RikosoftHomeipNet_LIBRO]

Ты молодец, но дико бесит куча сопутсвующей болтовнеи не по делу, это просто забивает голову не нужной информацией. Поработай над тем чтобы доносить коротку суть.

[hgoiqwd]

Все круто, продолжай обязательно. Спасибо за труд

[tigrpoehal]

уже имею подработку на vue3 nuxt, буду смотреть для повышения квалификации)

[maksoneskirb]

Столкнулся с проблемой, что через CRM не получается создать сделку.

Решение: либо меняем в базе тип данных у атрибута 'price' с Integer на Text, либо в форме у инпута для указания цены меняем type='text' на type='number'. Пересматривал этапы создания базы и формы несколько раз - в базе тип Integer, а в форме тип Text, и при этом всё работает. Прям магия какая-то.