Skip to content

AlpineJS

sh
pnpm add @types/alpinejs -D
sh
cat > global.d.ts << EOF
/// <reference types="vite/client" />

import type { Axios } from 'axios'
import type { Alpine } from 'alpinejs'

declare global {
  interface Window {
    axios: Axios
    Alpine: Alpine
  }
}

window.axios = window.axios || {}
window.Alpine = window.Alpine || {}

export {}
EOF

In resources/js/app.ts:

ts
import "./bootstrap";
import type { Alpine as AlpineTS } from "alpinejs";
import {
  Alpine,
  Livewire,
} from "../../vendor/livewire/livewire/dist/livewire.esm";

import dataModule from "./modules/data-module";
import storeModule from "./modules/store-module";

const alpineTs: AlpineTS = Alpine;
alpineTs.data("dataModule", dataModule);
alpineTs.store("storeModule", storeModule);

Livewire.start();

AlpineJS data and store

ts
import type { AlpineComponent } from "alpinejs";

function dataModule(): AlpineComponent<{
  anyVariable: boolean;
  anyMethod(url: string | undefined): Promise<boolean>;
}> {
  return {
    anyVariable: false,
    async anyMethod(src?: string): Promise<boolean> {
      // ...
    },
  };
}

export default dataModule;
ts
const sidebar = {
  anyVariable: false,
  anyMethod() {
    // ...
  },
};

export default storeModule;

MIT License