Roots Discourse

Using sage10 + tailwind 2.0 + turbo hotwire and alpineJS

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.

  1. 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

  2. Add AlpineJS and alpine-turbo-drive-adapter - optional
    yarn add alpinejs
    yarn add alpine-turbo-drive-adapter

  3. Add turbo
    yarn add @hotwired/turbo

  4. Next import the packages from the app.js file located in resources/js/app.js or resources/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.

  1. Then run yarn && yarn build from 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 (https://turbo.hotwire.dev/handbook/building#loading-your-applications-javascript-bundle)

  1. 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.

1 Like