From alpinejs.dev
Install alpinejs
pnpm add @types/alpinejs alpinejs -D
import type { Alpine as AlpineType } from 'alpinejs'
/**
* From https://bobbyhadz.com/blog/typescript-make-types-global
*/
declare global {
const Alpine: AlpineType
interface Window {
Alpine: AlpineType
}
}
export {}
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
In app vite.config.ts.
export default defineConfig({
// ...
optimizeDeps: {
include: ['alpinejs'],
},
})
Modules
mkdir resources/front/ts/modules
AlpineJS store example
touch resources/front/ts/store-example.ts
Add to app.ts
// ...
window.Alpine = Alpine
Alpine.store('shop', {
name: 'Alpine-Shop',
products: ['Swiss Alp Chocolate', 'Car Alpine A110'],
})
Alpine.start()
In any Blade file.
<div x-data>
<div x-text="$store.shop.name">shop-name</div>
<div>
Here you can buy:
<ul>
<template x-for="product in $store.shop.products">
<li x-text="product"></li>
</template>
</ul>
</div>
</div>
AlpineJS data example
touch resources/front/ts/data-example.ts
let refsAlpine: {
text: HTMLElement
}
const copy = () => ({
copied: false,
init() {
// @ts-expect-error
refsAlpine = this.$refs
},
async copyText() {
this.copied = true
let success = false
if (refsAlpine.text.textContent)
await navigator.clipboard.writeText(refsAlpine.text.textContent).then(() => (success = true))
if (!success)
console.error('Error on copy!')
setTimeout(() => {
this.copied = false
}, 3500)
},
})
export default copy
In app.ts
// ...
window.Alpine = Alpine
Alpine.data('copy', copy)
Alpine.start()
Custom module
touch resources/front/ts/custom-module.ts
export const customModule = () => {
const customModule = 'customModule'
console.log(customModule)
}
In app.ts
import Alpine from 'alpinejs'
import { customModule } from '~/app/ts/custom-module'
customModule()
window.Alpine = Alpine
Boiler plate modules
Color mode
touch public/color-mode.js
const colorScheme = localStorage.getItem('color-scheme')
if (colorScheme)
document.documentElement.classList.toggle(colorScheme, true)
else {
const system =
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light'
document.documentElement.classList.toggle(system, true)
}
touch resources/front/ts/modules/color-mode.ts
type Mode = 'light' | 'dark'
interface ModeElement {
label: string
key: string
}
const colorMode = () => ({
mode: 'light' as Mode,
list: [
{
label: 'Light',
key: 'light'
}, {
label: 'Dark',
key: 'dark'
}
] as ModeElement[],
key: 'color-scheme',
init() {
this.setMode()
},
switchMode(mode: Mode) {
const body = document.documentElement
this.list.forEach((element) => {
body.classList.remove(element.key)
})
body.classList.add(mode)
localStorage.setItem(this.key, mode)
this.setMode(mode)
},
setMode(mode?: Mode) {
const currentMode = localStorage.getItem(this.key)
if (currentMode) {
this.mode = currentMode as Mode
}
if (mode === 'light') {
this.mode = 'light'
}
}
})
export default colorMode
import colorMode from './modules/color-mode'
window.Alpine = Alpine
Alpine.data('colorMode', colorMode)
Alpine.start()
touch resources/views/components/color-mode.blade.php
<div x-data="colorMode">
<ul class="w-full space-y-1">
<template x-for="element in list">
<button type="button"
x-text="element.label"
:class="[mode === element.key ? 'bg-gray-100 dark:bg-gray-800' : '',
'block w-full rounded-md px-2 py-1 text-left hover:bg-gray-100 dark:hover:bg-gray-800'
]"
@click="switchMode(element.key)"></button>
</template>
</ul>
</div>