Javascript и Vuejs для Laravel 5. Создаем проект laravel. Подключаем vue js к laravel и делаем микс
Вставка
- Опубліковано 19 сер 2024
- Стань спонсором(бусти аккаунт), доступ к собеседованиям:
boosty.to/lara...
Мои платные курсы:
laravelcreativ...
План развития с нуля до middle+:
laravelcreativ...
Группа вк:
laravel...
- Ссылка для донатов, спонсорства, пожертвований
yoomoney.ru/to...
www.donational...
- -
. ---
Урок слишком затянут, но в данном случае это нужно было сделать:)
В этом уроке в начале добиваем тему с javascript'ом, а именно как получить доступ к свойствам и методам объектов.
Далее создаем новый проект laravel
Подключаем бд к проекту laravel
Подключаем auth
Подключаем bootstrap
И в конечно подключаем vue
Далее устраняем баги связанные с неактуальной версией Nodejs(это может быть не у всех, у кого-то хорошо проходит).
Объясняется что такое mix в webpack у laravel, что в итоге происходит, куда идёт сборка файлов.
Далее объясняется, что такое #app для vuejs
Затем подключаем example component с расширением vue
В целом раскрывается тема, как подключить vue js к laravel
и собственно всё
блин, сначала подумал, что тут используется Laravel 5)) оказывается это номер урока))
только что тоже самое подумал, хорошо твой коммент увидел :D
Для тех кто, как и я, учится на свежей версии laravеl 9 - инструкция по подключению Vue через Vite: techvblogs.com/blog/how-to-install-vue-3-in-laravel-9-with-vite
спасибо за подгон
спасибо большущее. оч помогло
Для Laravel 11 в файле app.js указывал "import {createApp} from 'vue/dist/vue.esm-bundler'" вместо "import {createApp} from 'vue'. Только после этого отобразился контент.
На 10-ке, следую точь в точь инструкциям в видео, всё устанавливается по дефолту Vite
"devDependencies": {
"@popperjs/core": "^2.11.6",
"@vitejs/plugin-vue": "^4.5.0",
"axios": "^1.6.4",
"bootstrap": "^5.2.3",
"laravel-vite-plugin": "^1.0.0",
"sass": "^1.56.1",
"vite": "^5.0.0",
"vue": "^3.2.37"
@@NaizerCoder еще туда же не мешало бы для начало сделать установку laravel mix,а именно натсройку и создание webpack.mix.js, у этого чудика все через магию но через одно место делается))) но опять таки же зачем использовать устаревший вариант laravelmix если у нас есть vite...
Я лучше это посмотрю в 3 часа ночи, чем всё остальное, что мне рекомендует ютуб. Прям увидев название у меня сразу аппетит проснулся, но пока пиццу доел я уже понял, что нода у меня уже установлена (я на win7). Проблема была в том, что composer надо была сэтапнуть.
Я конечно отрывками просматривал видео, но всё же всё как надо! Респект и уважуха!))
Ахах) Благодарю, спасибо большое!)
Поняла как Vue подключать. Не сложно, оказывается..
Спасибо, мастер Джедай
Наконец-то вышел на видео где объяснили как работать с ошибками в npm. Спасибо!
Помог!
Благодарю!)
Наконец я могу с удовольствием приступить к освоению этого курса.
Благодарю!)
Спасибо, за урок! Подача - просто огонь!
Благодарю!)!
Этот контент заслуживает лайка и продвижения! Спасибо за Ваш труд!!
Спасибо наконец-то я дождался, всё сделал всё получилось, жду следующего выпуска!
Благодарю!)
@@laravelcreative😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😮😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😮😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😮😮 3:13 😢😢😢😮😮😮😢😢😮😢😢😢😢😢😢😢😮😢😢😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢 3:48 😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😮😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😮😢😢😮😮😮😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😮 4:33 😢😢😢😢😢😮😢😢😢😢😢😢😢😮😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😮😢😮😮😢😢😢😢😢😢😢😢😢😮😮😢😢😮😢😢😢😮😢😢😮😢😢😢😢😢😢😮😮😮😮😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😮😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😮😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😮😮😢😢😢😢😢😢😢😮😢😢😢😢😮😢😢😢😢😢😮😢😢😢😢😢😢😢😮😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😮😮😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😮😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😮😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😮😮😮😮😮😮😮😮😮😮😮😮😢😢😢😢😢😮😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😮😢😢😢😢😮😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😮😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😮😢😢😢😢😢😢😮😢😢😮😢😮😢😢😢😮😢😮😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😮😢😢😢😢😮😢😮😢😮😢😢😢😢😢😢😢😢😢😢😢😮😢😢😮😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😮😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😮😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😮😢😢😢😢😮😮😢😮😮😮😮😮😮😮😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😮😢😢😮😮😮😮😮😮😮😮😮😮😮😮😮😮😢😮😢😢😢😢😢😮😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😢😮😢😢😢😮😮😮
если у кого не работает php artisan ui:auth то сделайте composer require laravel/ui
Огромное спасибо. Не сбрасывай темп!!!
Благодарю!)
Данные немного устарели. Быстро очень технологии сейчас меняются. "В Laravel начиная с версии 9.19 не используется webpack.mix.js. Вместо этого теперь файл vite.config.js."
Как я понимаю это связано с тем, что у vue вышла версия 3, более того сейчас vue3 подстраивают под typescript, а раньше все на чистом js лучше работало
Поэтому в Laravel с v9 уже всё по другому
СПАСИБО!! не понимаю у кого рука поднялась, дизлайк поставить, возможно какие-то конкуренты, не иначе, так как материал ОГОНЬ - ТОП!!! лучший в рунете!!
Ахаха, согласен) Благодарю!)
Lara 10 нет такого скрипта npm run watch
npm run build надо запускать всякий раз, когда меняем что-то во Vue.
Либо
Update your package.json file.
...
"scripts": {
"dev": "vite",
"build": "vite build",
"watch": "vite build --watch"
},
...
Благодарю за туториал! =)
Большое спасибо за уроки
Благодарю!)
Круто все спасибо!
блин, лучший
Спасибо / все получилось
win 7 / nodejs должна быть 13.14 / стояла версия 13.6 ни в какую MIX не срабатывал
Отлично!)
камент для продвижения
я пока что ещё на других частях видео, но хотел уточнить, знаете ли вы реакт? И планируются ли у вас в будущем видео по нему? По сколько у вас отличный талант к обьяснению
Реакт концептуально, не практикую, но возможно в будущем можно будет что-то придумать)
Класс. Темп вполне...
Благодарю)!
Это актуально на сегодняшний день, когда новый дефолтный сборщик фронтенд ресурсов - Vite?
На Vite, еще переходить нужно, не все компании сразу бегут обновляться по последним технологиям..
ua-cam.com/video/fnrDYq6tsRY/v-deo.html Установка на девятой ларке с vite /
А как быть с бутстрапом?
Вопрос к автору. А мы не о*уеем вот так постоянно ребилдить изменения? Неудобно же..
Сейчас уже используется vite, поэтому об этом в принципе можно забыть. Хотя и watch тоже не плох.
Я не понимаю Vue встроен что ли в Laravel? Если я захочу реакт использовать вместо vue, то мне что надо поменять?
Привет спустя год интересуюсь смог узнать ответ на этот вопрос?
а какая версия ларавел и vue тут используется?
Подскажите плиз
Сам себе отвечу.
Судя по всему Ларавель тут используют 8 версии.
@@dmitriivanov7010 laravel 8 и vue 2
lar 8.5.12
"vue": "^2.6.12",
Почему может не работать автокомплит кода vue?
Если просто писать вручную то компонент встраивается, а вот автоматически не подбирает мне компоненты.
Если стоит ран вотч, то снизу справа может в это время идти индексация, в этот момент автокомплит не работает) Или во время импорта? У меня тоже такое бывает, иде шутки шутит)
Привет! Только не могу понять зачем при установке vue, устанавливается jquery и popper.js, на vue нельзя реализовать то что на jquery и popper.js?
Привет!) Можно) Просто они там изначально стояли, честно сказать, даже внимание на это не обратил)
курс nuxt + vue будет ?
А почему используются устаревшие версии vue и bootstrap?
А зачем нам новейшие сейчас версии? Или речь про vue 3? У многих эта версия вызывает двоякое на данный момент чувство:)
Здравствуйте, в чем может быть проблема
строка:1 знак:13
+ npm install && npm run dev
+ ~~
Лексема "&&" не является допустимым разделителем операторов в этой версии.
+ CategoryInfo : ParserError: (:) [], ParentContainsErrorRecordException
+ FullyQualifiedErrorId : InvalidEndOfLine
можно запустить поочереди сначала npm install, потом npm run dev
npm run build
из за чего может не рендериться компонетнт? компилируется без ошибок.
Опечатка где-то) Может тег написал с большими буквами в блейде?) Попробуй сначала сделать и каждый этап проверять)
@@laravelcreative да и от версий Vue может зависеть?
Да тоже может)
Скажите у меня нету в webpack mix js
.vue()
.sass('resources/sass/app.scss', 'public/css');
есть .postCss('resources/css/app.css', 'public/css', [
//
]);
сделал все команды как на видео и перепроверил несколько раз (до момента когда вы объясняете этот самый файл).
И как у вас сразу в проекте был установлен ui?) мне пришлось ещё compose require laravel/ui делать)
у него на видео laravel 8 и vue 2
Сейчас уже laravel 10 и vue 3
Поэтому на этих версиях чуть по другому нужно это делать
@@ramazanstudy570 чуть это слабо сказано) там вообще все абсолютно по-другому и там такие выкрутасы пришлось делать и при этом нигде как ни странно нет нормальной инфы. Даже вроде бы видео по ларавель 9 и livewire с другого канала при том что тоже ларавель 9 как и у меня, но там не самая последняя версия на теперешний момент была, и те же самые команды с нуля давали неработающее приложение)
в итоге пришлось самому искать в интернете и слеплять из кучи говна цельную конфетку методом не стаковерфлоу а собственных проб и ошибок, создавание резервных копий на определенной стадии без которых команд никуда, и потом проверять по команде что точно нужно сделать чтобы все заработало.
Иногда просто ебу даешь как вообще в 2023 году может быть такой пиздец с программированием даже на одной и той же версии что и в видео)
@@ridddlewrong "нету нормальной инфы" это про что?
Даже в документации vue и laravel куча инфы
Если ты про установку на laravel 9 или 10 vue 2, то эта инфа тоже есть
Но оно того не стоит, легче на vue 3 делать то что нужно
@@ridddlewrong не знаю, я пока особо с какими то проблемами не столкнулся начиная с базового курса, заканчивая этим курсом
Конечно бывали моменты, что моментами что то не работала, даже если желаешь так как в видео, но причину я находил в комментариях в большинстве случаев
А если не там, то уже в гугле
@@ridddlewrong я конечно понимаю твоё возмущение, с какой то стороны ты прав, насчёт последней фразы. Но все же, это программирование
Его суть как раз в том что ты постоянно сталкиваешься с ошибками и решаешь их
Раз за разом
Если ты надеешься, что ты сядешь и будешь программировать чисто для души, без таких проблем, то так врядли будет.
Сейчас более менее материал есть и сами инструменты программистов годные
А раньше толком даже документации не бывало
Не то что каких курсов или видео
А какой проект будет в этом разделе ? Тоже блог или лендинг или многостраничный сайт ?
Здесь только изучение vuejs со спецификой ларавел. А после уже будет полноценный проект:) Чтобы не тормозить на нюансах vuejs
!
камент для продвижения