Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kevinbatdorf/alpine-auto-init

A lightweight auto init function for Alpine.js
https://github.com/kevinbatdorf/alpine-auto-init

alpinejs

Last synced: 19 days ago
JSON representation

A lightweight auto init function for Alpine.js

Host: GitHub
URL: https://github.com/kevinbatdorf/alpine-auto-init
Owner: KevinBatdorf
License: mit
Created: 2020-06-12T12:12:48.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2020-07-09T13:00:08.000Z (over 4 years ago)
Last Synced: 2024-11-16T22:41:41.870Z (about 1 month ago)
Topics: alpinejs
Language: JavaScript
Size: 160 KB
Stars: 3
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md

Awesome Lists containing this project

README

        # alpine-auto-init

A lightweight helper to auto call an init() method for Alpine.js

![GitHub file size in bytes](https://img.shields.io/github/size/kevinbatdorf/alpine-auto-init/dist/index.js?label=minified&style=flat-square)

![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/kevinbatdorf/alpine-auto-init?label=version&style=flat-square)

## About

Use this for when you want to auto initialize your AlpineJS instances using an `init()` function. Perfect when you don't need to use state.

```html



  One

  Two



```

```js

function customBullets() {

  return {

    init() {

      for (let item of this.$el.children) {

        // Change list items

      }

    }

  }

}

```

[Demo](https://codepen.io/KevinBatdorf/pen/wvMGoPz)

## Installation

Include the following `` tag in the `<head>` of your document (before Alpine):

```html

<script src="https://cdn.jsdelivr.net/gh/KevinBatdorf/[email protected]/dist/index.js">

```

### Manual

If you wish to create your own bundle:

```bash

npm install KevinBatdorf/alpine-auto-init --save

```

Then add the following to your script:

```javascript

import 'alpine-auto-init'

import 'alpinejs'

```

## License

Copyright (c) 2020 Kevin Batdorf

Licensed under the MIT license, see [LICENSE.md](LICENSE.md) for details.