notyf OK

app/javascript/application.js

@@ -1,6 +1,16 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
+import { Notyf } from 'notyf'
+
+window.buildNotyf = ()=>{
+    const notyf=new Notyf({
+        duration: 5000,
+        position: { x: 'center', y: 'top' },
+    })
+    return notyf
+}
 
 // Customize Turbo default behaviour
-Turbo.setProgressBarDelay(300)
+Turbo.setProgressBarDelay(300)
+// Turbo.session.drive = false

app/views/layouts/_notification.html.erb

@@ -1,27 +1,13 @@
 <h2>NOTIFICATION BAR</h2>
+<script data-turbo-temporary>
+  document.addEventListener('turbo:load',(e)=>{
 
-<% if flash.count.positive? %>
-  <script type="module">
-    import { Notyf } from 'notyf';
-    import Toastify from 'toastify-js'
+    const notyf=window.buildNotyf()
+    notyf.success('rails notice')
+    notyf.error('rails alert')
 
-    const notyf=new Notyf({
-      duration: 3000,
-      position: {
-        x: 'center',
-        y: 'top',
-      }
-    })
-    <% if flash.alert %>
-      notyf.error('<%=alert%>')
-      Toastify({  text: "<%=alert%>",  gravity: "top", oldestFirst: false, close: true, position: "center", style: {  background: "red" }}).showToast();
-    <%end%>
+    // useful to prevent flickering from turbo preview
+    Turbo.cache.exemptPageFromPreview()
 
-    <% if flash.notice %>
-      notyf.success('<%=notice%>')
-      Toastify({  text: "<%=notice%>",  gravity: "top", oldestFirst: false, close: true, position: "center", style: {  background: "green" }}).showToast();
-    <%end%>
-
-    console.log('notification loaded')
-  </script>
-<%end%>
+  }, {once: true})
+</script>