Alpine Js

Installing and using Alpine on your website

Alpine.js is a refreshingly minimal JavaScript framework that gives you the reactive nature of Vue and React but with much more simplicity. In this article, we will learn to install alpine.js on our website.

Last updated : Mar 04, 2022

Co-authored by : Nilmani

Share (Copy this link):

Alpine.js is a rugged, minimal framework for composing Javascript behavior in your markup. It allows you to write most of your JS inline in your HTML, making it easier to write declarative code (as opposed to procedural code). It gives you the reactive nature of Vue and React.

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

Why to learn Alpine.js?

If you need some of the reactive part of JS or say when you need small amount of JS, then Alpine.js works well. Let's say you need a few drop-downs or tabs, then by using alpinejs you don't need to write lot's of the code. No need of JS, Vue, or React. This means you would get your task done without any heavy framework.

Installation of Alpine.js

There are two ways to include Alpine.js in your website.

First method is from <script> tag using CDN link.
Second method is importing it as module using npm.

1. Installing from a `<script>` tag

Installing Alpine.js is so easy, you have to just copy and paste script tag in head section of your html. You can also use npm if you want.

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

Example:

<!DOCTYPE html>
<html>

	<head>
		<title>Alpinejs Tutorial</title>
		<script src="https://unpkg.com/alpinejs@3.4.1/dist/cdn.min.js" defer></script>
	</head>

	<body>
		<div>Welcome to alpine</div>
	</body>

</html>

2. Installing as a module using npm

To install alpinejs using npm, you need to install node js on your pc.

Then open your terminal and run the following command to install alpine js.

npm install alpinejs

And finally, to initialize it, write the following code.

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

How to initialize alpine component?

Initializing alpine component is super simple as saying hello. Since alpine is written in html attributes, to initialize alpine component we simply write x-data as an attribute in any html tag. Then that tag becomes a tiny alpine component.

Example:

<div x-data ...></div>

In above example we write x-data in div tag, so that div becomes alpine component.

When should I use Alpine?

Alpine’s strength is in the ease of DOM manipulation. Think of those things you used out of the box with Bootstrap, Alpine.js is great for them. Examples would be:

Showing and hiding DOM nodes under certain conditions,
Binding user input,
Listening for events and altering the UI accordingly,
Appending classes.
You can also use Alpine.js for templating if your data is available in JSON

You may also want to read

Alpine Js

What is x-data in alpine and how to use

x-data defines a chunk of HTML as an Alpine component and provides the reactive data for that component to reference.

How to force redirect HTTP to HTTPS in Laravel 9.x, 8.x, 7.x and 6.x

in this article you will learn to force Laravel project to use HTTPS for all links such as routes if you are facing an issue of not secure a URL, then don't worry about this, the best solution of How to force redirect HTTP to HTTPS in Laravel 8.x, 7.x and 6.x is shown in this article.

Download and Install visual studio and preparing our IDE on windows 11

Microsoft Visual Studio is an integrated development environment from Microsoft. It is used to develop computer programs, as well as websites, web apps, web services and mobile apps, Games, etc.

Introduction to c#

C# is pronounced "C-Sharp". It is an object-oriented programming language created by Microsoft that runs on the .NET Framework. C# has roots from the C family, and the language is close to other popular languages like C++ and Java.

Alpine Js

What is x-data in alpine and how to use

x-data defines a chunk of HTML as an Alpine component and provides the reactive data for that component to reference.

Alpine Js