Sage 10 theme now configured with tailwindcss and vuejs

Author: alishahuk

package.json

@@ -40,9 +40,13 @@
     "vue-template-compiler": "^2.6"
   },
   "dependencies": {
-    "bootstrap": "^4.3",
     "jquery": "^3.4",
-    "js-dom-router": "^1.0",
-    "popper.js": "^1.15"
+    "laravel-mix-purgecss": "^4.1.0",
+    "laravel-mix-tailwind": "^0.1.0",
+    "popper.js": "^1.15",
+    "postcss-import": "^12.0.1",
+    "postcss-nesting": "^7.0.1",
+    "tailwindcss": "^1.1.2",
+    "vue": "^2.5.17"
   }
 }

resources/assets/scripts/app.js

@@ -1,30 +1,32 @@
 /**
- * External Dependencies
+ * First we will load all of this project's JavaScript dependencies which
+ * includes Vue and other libraries. It is a great starting point when
+ * building robust, powerful web applications using Vue and Laravel.
  */
-import 'jquery';
-import 'bootstrap';
-import { router } from 'js-dom-router';
 
-/**
- * DOM-based routing
- */
-import about from './routes/about';
+require('./bootstrap');
+
+window.Vue = require('vue');
 
 /**
- * Below is an example of a dynamic import; it will not be loaded until it's needed.
+ * The following block of code may be used to automatically register your
+ * Vue components. It will recursively scan this directory for the Vue
+ * components and automatically register them with their "basename".
  *
- * See: {@link https://webpack.js.org/guides/code-splitting/#dynamic-imports | Dynamic Imports}
+ * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
  */
-const home = async () => import(/* webpackChunkName: "scripts/routes/home" */ './routes/home');
+
+// const files = require.context('./', true, /\.vue$/i);
+// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
+
+// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
 
 /**
- * Set up DOM router
- *
- * .on(<name of body class>, callback)
- *
- * See: {@link http://goo.gl/EUTi53 | Markup-based Unobtrusive Comprehensive DOM-ready Execution} by Paul Irish
+ * 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.
  */
-router
-  .on('about-us', about)
-  .on('home', async (event) => (await home()).default(event))
-  .ready();
+
+const app = new Vue({
+  el: '#app',
+});

resources/assets/scripts/bootstrap.js

@@ -0,0 +1,11 @@
+window._ = require('lodash');
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

resources/assets/scripts/components/ExampleComponent.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-md-8">
+        <div class="card">
+          <div class="card-header">Example Component</div>
+
+          <div class="card-body">
+            I'm an example component.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+        mounted() {
+            console.log('Component mounted.')
+        }
+    }
+</script>

resources/assets/scripts/routes/about.js

@@ -1,20 +1,62 @@
-/** Config */
-@import 'config/functions';
-@import 'config/variables';
-@import 'config/external';
+/**
+ * This injects Tailwind's base styles, which is a combination of
+ * Normalize.css and some additional base styles.
+ *
+ * You can see the styles here:
+ * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
+ *
+ * If using `postcss-import`, use this import instead:
+ *
+ * @import "tailwindcss/preflight";
+ */
+@tailwind base;
 
-/** Common */
-@import 'common/global';
+/**
+ * This injects any component classes registered by plugins.
+ *
+ * If using `postcss-import`, use this import instead:
+ *
+ * @import "tailwindcss/components";
+ */
+@tailwind components;
 
-/** Components */
-@import 'components/buttons';
-@import 'components/comments';
-@import 'components/forms';
-@import 'components/wp-classes';
+/**
+ * Here you would add any of your custom component classes; stuff that you'd
+ * want loaded *before* the utilities so that the utilities could still
+ * override them.
+ *
+ * Example:
+ *
+ * .btn { ... }
+ * .form-input { ... }
+ *
+ * Or if using a preprocessor or `postcss-import`:
+ *
+ * @import "components/buttons";
+ * @import "components/forms";
+ */
 
-/** Layouts */
-@import 'layouts/header';
-@import 'layouts/footer';
-@import 'layouts/pages';
-@import 'layouts/posts';
-@import 'layouts/tinymce';
+/**
+ * This injects all of Tailwind's utility classes, generated based on your
+ * config file.
+ *
+ * If using `postcss-import`, use this import instead:
+ *
+ * @import "tailwindcss/utilities";
+ */
+@tailwind utilities;
+
+/**
+ * Here you would add any custom utilities you need that don't come out of the
+ * box with Tailwind.
+ *
+ * Example :
+ *
+ * .bg-pattern-graph-paper { ... }
+ * .skew-45 { ... }
+ *
+ * Or if using a preprocessor or `postcss-import`:
+ *
+ * @import "utilities/background-patterns";
+ * @import "utilities/skew-transforms";
+ */

resources/assets/scripts/routes/home.js

@@ -7,7 +7,7 @@
     @php(do_action('get_header'))
     @include('partials.header')
 
-    <div class="wrap container">
+    <div id="app">
       <div class="content">
         <main class="main">
           @yield('content')