@Pyerro but why do you need build set up for this small project.

you can choose CDN way , and it's so easy.

my head part of html template

<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Template • TodoMVC</title>
		<link rel="stylesheet" href="node_modules/todomvc-common/base.css" />
		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css" />
		<!-- CSS overrides - remove if you don't need it -->
		<link rel="stylesheet" href="css/app.css" />
		<!-- Alpine Plugins -->
		<script
			defer
			src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"
		></script>

		<!-- Alpine Core -->
		<script
			defer
			src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
		></script>
	</head>

separate js file located in './js/todos.js'.

document.addEventListener("alpine:init", () => {
	Alpine.data("todos", function () {
		return {
		todos: this.$persist([]), //small change here instead of Alpine.$persist.
		....same code as jeffrey did.	
	};
	});
});

for Any one who's watching this in 2025, you don't need to write localStorage code as @jeffreyway did, cause alpineJs support it's now.

it has cool features like watcher for implementing custom logic after any operation was performed!

And you can also store your component state in browser's localStorage. using $persist.

TodoMVC with Alpine: Part 3