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-railsimport "@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: falsegem "rollbar"gem "tailwindcss-rails"gem "devise"gem 'dotenv-rails', groups: [:development, :test]group :development, :test do gem "debug", platforms: %i[ mri windows ]endgroup :development do gem "web-console"endgroup :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?