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
- Dropdown
- Modal
- Tabs
- Carousel
- Accordion
- Notification
- 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
- Mask
- Intersect
- Persist
- Focus
- Collapse
- Morph