How can we pass parameters to Alpine.data in Alpine.js v3?

[patrickquijano]

I am now using the newest version of Alpine which is v3.

Making reusable components needs to be registered using the Alpine.data.

This is the alpinejs.js

import Alpine from 'alpinejs'
import form from './components/form'

window.Alpine = Alpine

Alpine.data('form', form)

Alpine.start()

This is what I have in the components/form.js

export default (config) => {
  return {
    open: false,
    init() {
      console.log(config)
    },
    get isOpen() { return this.open },
    close() { this.open = false },
    open() { this.open = true },
  }
}

This is the html part:
<div x-data="form({test:'test'})"></div>

This is the error I get in the console:

Any idea how to pass parameters to Alpine.data?

[danddanddand]

At the moment you can't but there is PR to support this #1580.

I'd recommend for now refactoring to something like

export default () => {
  return {
    open: false,
    config(config) {
       this.open = config.open;
    },
    get isOpen() { return this.open },
    close() { this.open = false },
    open() { this.open = true },
  }
}

<div x-data="form" x-init="config({open:true})"></div>

Or just don't use Alpine.data. If you're building a bundle you're likely exporting library somewhere so I honestly just prefer something like <div x-data="yourLib.components.form" x-init="initData({blah:''}>. I've pretty much outlawed using init() constructor in V3 because most of our meaningful components need to initialize with data and it's too easy to double initialize since init() will be called even if x-init="init()" is present. We had component running on a setInterval() which was initialized twice when we migrated to v3 and only way of knowing was because it looked like it was going twice as fast as it was supposed to.

[danddanddand]

If you follow that pattern you could also create simple data structure to store your components and just do something like components.forEach( currentComponent => Alpine.data( currentComponent.name, currentComponent() ) and choose if you wanted to use <x-data="myLib.comps.form" or <x-data="form". I'm so spoiled by autocompletion I sort of prefer the x-data="myLib.comps.form" version because I can see everything there from IDE and the structure is defined if your project is large enough to need that type of component structure.

Example of autocompletion from project that I'd miss if I used Alpine.data