Alpinejs Course

Source code files for Alpine.js 4 hours tutorial

The course is splitted into 3 parts: Alpine.js Basics, Creating Alpine.js Components, Alpine.js Plugins

Alpine.js Basics

In basics section we will learn all the basic things about alpine.js: its directives and magic properties.

Directives

• x-data, x-text, x-html
• x-data with methods
• Re-usable Data
• Data-Less components
• Data coming from Store
• x-init
• Scoping
• Getters & Setters
• x-show & x-transition
• x-if
• x-for
• x-for in range
• x-bind: class
• x-bind: style
• x-bind id
• x-on
• x-effect
• x-ignore
• x-ref
• x-cloak
• x-teleport

Magic Properties

• $el
• $refs
• $store
• $watch
• $dispatch
• $nextTick
• $root
• $data
• $id

Alpine.js Components

In components section we will build 7 unique components with Alpine.js: Demo

Components Created

1. Dropdown
2. Modal
3. Tabs
4. Carousel
5. Accordion
6. Notification
7. Popover

Alpine.js Plugins

In this section we will explore Alpine.js core plugins and understand how we can use them in practice.

Plugins Explored

1. Mask
2. Intersect
3. Persist
4. Focus
5. Collapse
6. Morph