How to integrate Alpine.js into a Rails 7 application?

64 views Asked by At

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. enter image description here What configuration am I missing yet?

0

There are 0 answers