24. Installing-alpinejs

- install the alpinejs - callout the alpinejs in the resources/js/app.js file - The vite helper was add in the views\components\app-layout.blade.php - Restart the server - Check the alpinejs. bookings\checkout.blade.php
lessandsass · Oct 1, 2024 · ccddd89 · ccddd89
1 parent 922c2ed
commit ccddd89
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,5 +12,8 @@
         "postcss": "^8.4.47",
         "tailwindcss": "^3.4.13",
         "vite": "^5.0"
+    },
+    "dependencies": {
+        "alpinejs": "^3.14.1"
     }
 }
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1 +1,8 @@
 import './bootstrap';
+
+import Alpine from 'alpinejs'
+window.Alpine = Alpine
+Alpine.start()
+
+
+
diff --git a/resources/views/bookings/checkout.blade.php b/resources/views/bookings/checkout.blade.php
@@ -1,5 +1,6 @@
 <x-app-layout>
     <div class="space-y-12">
+
         <div>
             <h2 class="text-xl font-medium mt-3">Here's what you're booking</h2>
             <div class="flex mt-6 space-x-3 bg-slate-100 rounded-lg p-4">
@@ -22,10 +23,19 @@
 
         <div>
             <h2 class="text-xl font-medium mt-3">1. When for?</h2>
-            <div>
+            <div
+                x-data="{
+                    picker: null
+                }"
+                x-init="
+                    picker='abcdf'
+                    console.log(picker)
+                "
+            >
                 Calender
             </div>
         </div>
+
     </div>
 </x-app-layout>
 

diff --git a/resources/views/components/app-layout.blade.php b/resources/views/components/app-layout.blade.php
@@ -7,6 +7,7 @@
     <title>Bookings</title>
 
     @vite('resources/css/app.css')
+    @vite(['resources/js/app.js'])
 
 </head>
 <body>
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ @@
         <title>Bookings</title>
         @vite('resources/css/app.css')
+        @vite(['resources/js/app.js'])
     </head>
     <body>
@@ Expand Down @@