Quantcast
Channel: Active questions tagged ruby - Stack Overflow
Viewing all articles
Browse latest Browse all 4627

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

$
0
0

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


Viewing all articles
Browse latest Browse all 4627

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>