Alpine Usage Issue #4202

Arifursdev · 2024-05-09T14:30:58Z

Arifursdev
May 9, 2024

this works:

<head>
...
<script src="local.js" defer></script>
<script src="//unpkg.com/alpinejs" defer></script>
...
</head>
<body>

<span x-data x-text="$store.tasks.text"></span>
</body>

// local.js
document.addEventListener('alpine:init', function(){
   Alpine.store('tasks', {
	'text': 'Hello World'
   });
});

this work doesn't work:

<head>
...
<script src="//unpkg.com/alpinejs" defer></script>
<script src="local.js" defer></script>
...
</head>
<body>

<span x-data x-text="$store.tasks.text"></span>
</body>

due to last line in alpinejs

var It=I;window.Alpine=It;queueMicrotask(()=>{It.start()});})();

my question would be: After someone start() alpine once, and runs start() later again to get some new elements to work, the prev. once gets their double set of event listeners.

How can i reinit without having double event listeners on existing components?

for example I would like to include alpine js inside the head. then have scripts after it + inside body. eg:

<head>
...
<script src="//unpkg.com/alpinejs" defer></script>
...
</head>
<body>

<script src="section-1.js" defer></script>
<span x-data x-text="$store.section_1.text"></span>


<script src="section-2.js" defer></script>
<span x-data x-text="$store.section_2.text"></span>
</body>

// section-1.js
Alpine.store('section_1', {
	'text': 'Hello World'
});

ekwoka · 2024-05-09T17:43:49Z

ekwoka
May 9, 2024

You should probably use a bundler.

Or use the listeners and put them first.

All with defer.

This is just JavaScript though.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Alpine Usage Issue #4202

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

Alpine Usage Issue #4202

Uh oh!

Arifursdev May 9, 2024

Replies: 1 comment

Uh oh!

Uh oh!

ekwoka May 9, 2024

Arifursdev
May 9, 2024

ekwoka
May 9, 2024