Для работы с календариком в Laravel с использованием Vue.js можно использовать несколько популярных библиотек, таких как Vuetify, Element UI или Buefy. В данном ответе рассмотрим пример использования библиотеки Vuetify.
1. Установка зависимостей:
Установите Vuetify, выполнив следующую команду в терминале:
npm install vuetify
2. Создание компонента Vue:
Создайте новый компонент Vue и подключите его к существующему проекту Laravel.
// resources/js/components/Calendar.vue
<template>
<div>
<v-date-picker v-model="selectedDate"></v-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
selectedDate: null,
}
},
}
</script>
3. Регистрация компонента:
Откройте файл resources/js/app.js и зарегистрируйте новый компонент Vue:
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import Calendar from './components/Calendar.vue';
Vue.use(Vuetify);
new Vue({
el: '#app',
vuetify: new Vuetify(),
components: {
Calendar
},
});
4. Использование компонента:
В шаблоне Blade добавьте разметку для компонента Vue:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- ... -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<calendar></calendar>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
5. Запуск приложения:
Выполните следующую команду в терминале, чтобы скомпилировать ресурсы:
npm run dev
Затем запустите сервер разработки Laravel для просмотра приложения:
php artisan serve
Теперь у вас есть рабочий календарик Vue.js в вашем проекте Laravel с использованием Vuetify. Вы можете настроить его дальше, добавив функциональность, такую как обработчики событий изменения даты, ограничение диапазона дат и другие параметры. Обратитесь к документации Vuetify для получения дополнительных сведений о доступных опциях и API-функциональности.