Alpine.js, exploring in real world applications

Alpine is a minimal javascript library for composing behavior directly in HTML markup.

Alpine was known as “project-x”, a nod to it’s past.
Creator Caleb Porzio (Creator of Alpine.js, Laravel Livewire) has kept much of the syntax is like Vue.js.

Okay, Lets start..

To use:

From a script tag into head tag:

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

As a module:

`npm install alpinejs` or `yarn alpinejs`

import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

Alpine has collection of 15 attributes, 6 properties, and 2 methods.

x-data, x-bind, x-on, x-text, x-if, x-for, x-ref, x-html...

Please check the docs here, https://alpinejs.dev

Creating simple component (x-data);

All we need to do is add the x-data attribute to any element like below, Thats all.

<div x-data="{ title: 'Hello Alpine..' }">
<p x-text="title"></p>
<button @click="title='Alpine rocks'">Change Title</button>

On Modular approach:

On main.js

import Alpine from 'alpinejs';
window.Alpine = Alpine

import pageSidebar from './components/PageSidebar.js';
window.sidebarApp = pageSidebar;

Alpine.start()

On components/PageSidebar.js

export default () => {
  return { 
      data: null,
      init() {
          console.log('sidebar component');
      },
      // methods
      // ......
  }
}

on Html Markup:

<div x-data="sidebarApp()">
......
</div>

explore more details here : https://alpinejs.dev/start-here

Thats All. Hope you get idea. Thanks for reading.