I have a Rails 7 application with Stimulus in it and I downloaded a TailwindCSS template that uses the AlpineJS framework. Apparently, the way I integrated Alpine.JS into the Rails app is not proper, because not JS-dynamic elements dont' work.
Here are the AlpineJS-related modifications I made in the Rails app to integrate it.
app/javascript/application.js:
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import Alpine from "alpinejs"
import "plugin"
window.Alpine = Alpine
Alpine.start()
config/importmap.rb:
pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"
pin_all_from "app/javascript/plugin", under: "plugin"
pin "alpinejs" # @3.10.2
Gemfile:
source "https://rubygems.org"
ruby "3.2.2"
gem "rails", "~> 7.1.3"
gem "sprockets-rails"
gem "pg", "~> 1.1"
gem "puma", ">= 5.0"
gem "importmap-rails"
gem "turbo-rails"
gem "stimulus-rails"
gem "jbuilder"
gem "redis", ">= 4.0.1"
gem "tzinfo-data", platforms: %i[ windows jruby ]
gem "bootsnap", require: false
gem "rollbar"
gem "tailwindcss-rails"
gem "devise"
gem 'dotenv-rails', groups: [:development, :test]
group :development, :test do
gem "debug", platforms: %i[ mri windows ]
end
group :development do
gem "web-console"
end
group :test do
gem "capybara"
gem "selenium-webdriver"
end
app/assets/config/manifest.js:
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
//= link_tree ../builds
When I load the Rails 7 app, there is window.Alpine output in the Chrome Console.
What configuration am I missing yet?