feat: Add alpine.js

daveroverts · daveroverts · commit ac036e2fc64f · 2022-01-01T13:14:55.000+01:00
At this this, alpine is only loaded in when on a admin route
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,7 +46,9 @@
         "tinymce": "^5.10.2"
     },
     "dependencies": {
+        "alpinejs": "^3.7.1",
         "bootswatch": "^4.6.1",
+        "flatpickr": "^4.6.9",
         "sweetalert2": "^11.1.9"
     },
     "version": "2.4.0",
diff --git a/resources/js/alpine.js b/resources/js/alpine.js
@@ -0,0 +1,5 @@
+import Alpine from 'alpinejs';
+
+window.Alpine = Alpine;
+
+Alpine.start();
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -29,19 +29,3 @@ tinymce.init({
     selector: 'textarea.tinymce',
     plugins: ['code', 'paste', 'link']
 });
-
-// window.Vue = require('vue');
-// import VueSweetalert2 from 'vue-sweetalert2';
-// Vue.use(VueSweetalert2);
-
-/**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
-
-// Vue.component('example-component', require('./components/ExampleComponent.vue'));
-//
-// const app = new Vue({
-//     el: '#app'
-// });
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -18,20 +19,25 @@
     <!-- Styles -->
     <link href="{{ mix('css/app.css') }}" rel="stylesheet">
 
+    @livewireStyles
+
     <!-- Robots -->
-    <meta name="robots" content="noindex"/>
+    <meta name="robots" content="noindex" />
 
     <!-- Scripts -->
     <script src="{{ mix('js/manifest.js') }}"></script>
     <script src="{{ mix('js/vendor.js') }}"></script>
     <script src="{{ mix('js/app.js') }}"></script>
-    @livewireStyles
+    @if (request()->routeIs('admin*'))
+        <script src="{{ mix('js/alpine.js') }}" defer></script>
+    @endif
 </head>
+
 <body>
-<div id="app">
-    @include('layouts.navbar')
-    <main class="py-4">
-        <div class="container">
+    <div id="app">
+        @include('layouts.navbar')
+        <main class="py-4">
+            <div class="container">
 
                 <ol class="breadcrumb">
                     @foreach (Breadcrumbs::current() as $crumbs)
@@ -47,13 +53,14 @@
                     @endforeach
                 </ol>
 
-            @yield('content')
-            @include('layouts.footer')
-        </div>
-    </main>
-</div>
-<!-- Scripts -->
-@stack('scripts')
-@livewireScripts
+                @yield('content')
+                @include('layouts.footer')
+            </div>
+        </main>
+    </div>
+    <!-- Scripts -->
+    @stack('scripts')
+    @livewireScripts
 </body>
+
 </html>
diff --git a/webpack.mix.js b/webpack.mix.js
@@ -16,6 +16,7 @@ require('laravel-mix-purgecss');
 require('dotenv').config();
 
 mix.js('resources/js/app.js', 'public/js')
+    .js('resources/js/alpine.js', 'public/js')
     .sass('resources/sass/app.scss', 'public/css', {
         additionalData: '$envColorPrimary: ' + (process.env.BOOTSTRAP_COLOR_PRIMARY || '#2C3E50') + '; $envColorSecondary: ' + (process.env.BOOTSTRAP_COLOR_SECONDARY || '#95a5a6') + '; $envColorTertiary: ' + (process.env.BOOTSTRAP_COLOR_TERTIARY || '#18BC9C') + '; $envColorSuccess: ' + (process.env.BOOTSTRAP_COLOR_SUCCESS || '#18BC9C') + '; $envColorWarning: ' + (process.env.BOOTSTRAP_COLOR_WARNING || '#F39C12') + '; $envColorDanger: ' + (process.env.BOOTSTRAP_COLOR_DANGER || '#E74C3C') + ';'
     })
