Hey guys,
so I’m just gonna lay out the steps it took me to get a setup working with sage10 + tailwindcss 2.0 (incl. alpineJS) and turbo hotwire for navigation without full page reloads. This is by no means fully feature complete, but I couldn’t really find anything googling for this specific issue, so I’m hoping it’s helpful to someone else.
-
I cloned the pull request from https://github.com/roots/sage/tree/log1x/next . This will give you a working example of sage10 + tailwindcss 2.0
git clone -b log1x/next git@github.com:roots/sage.git
cd sage && rm -rf .git -
Add AlpineJS and alpine-turbo-drive-adapter - optional
yarn add alpinejs
yarn add alpine-turbo-drive-adapter -
Add turbo
yarn add @hotwired/turbo -
Next import the packages from the app.js file located in
resources/js/app.jsorresources/assets/scripts/app.js
import 'alpine-turbo-drive-adapter'
import 'alpinejs';
import * as Turbo from "@hotwired/turbo";
In the alpine-turbo-drive-adapter docs it’s noted, that it has to be loaded before alpinejs, so the order is important here.
- Then run
yarn && yarn buildfrom within the theme directory
If you check the page now Alpine and Turbo should both be working, but on every DOM change turbo is reloaded entirely and the following error message pops up in the JS console of the browser. "the name "turbo-frame" has already been used with this registry". This is caused because in sage themes the soil plugin moves all JS to the footer. Turbo however has to be loaded in the <head> of the HTML and it will automatically reload all JS that’s in the footer (Turbo Handbook)
- Move JS from the footer to the header
- change the in_footer parameter for wp_enqueue_script from “true” to “false” for app.js. It’s the last parameter.
sage/app/setup.php
...
wp_enqueue_script('sage/app.js', asset('js/app.js')->uri(), ['sage/vendor.js'], null, false);
....
This currently causes jquery and vendor.js to also load in the <head> section, as it’s a fallback from the soil plugin from what I understand. So I can’t really speak for further complications from this but things should be running after these steps.