External Store File

Question

I've created an Alpine store like the example:

import Alpine from 'alpinejs'
 
Alpine.store('darkMode', {
    on: false,
 
    toggle() {
        this.on = ! this.on
    }
})
 
Alpine.start()

Is there a way I can export the store to an external file and import it, as you can do with plugins etc.?

Answer 1

Yes, you can simply create a separate store.js file with the store definition:

import Alpine from 'alpinejs'
 
Alpine.store('darkMode', {
    on: false,
 
    toggle() {
        this.on = ! this.on
    }
})

And from the main.js (or equivalent) import the store.js file:

import Alpine from 'alpinejs'

import './store.js'
 
Alpine.start()

(I used Vite for testing.)