Skip to content

Instantly share code, notes, and snippets.

View pdevito3's full-sized avatar

Paul DeVito pdevito3

View GitHub Profile
@pdevito3
pdevito3 / Pages.tsx
Created August 14, 2023 22:58
Tanstack Router Base WIP
import { buttonVariants } from "@/components/ui/button";
import NavigationLayout from "@/layouts/NavigationLayout";
import { useAuthUser } from "@/services/auth";
export function IndexPage() {
const { isLoggedIn, user, logoutUrl, isLoading } = useAuthUser();
if (isLoading) return <Loading />;
return (
<>
{!isLoggedIn ? (
@pdevito3
pdevito3 / AltRealmBuild.cs
Last active July 8, 2022 04:08
Pulumi Keycloak
namespace KeyAuth;
using Pulumi;
using Pulumi.Keycloak;
using Pulumi.Keycloak.OpenId;
class RealmBuild : Stack
{
public RealmBuild()
{

Converting Tailwind UI Alpine transitions to Vue transitions

After you copy a component from the Tailwind UI library and begin to adapt it from Vue JS to Alpine JS .. you may wonder what to do about the transitions. As I'm exploring this myself, I am documenting it for others in the same boat.

Things to be aware of:

  • Alpine calls the beginning and ending states "start" & "end"
  • Vue calls the beginning and ending states "from" and "to"
  • Alpine has inline "directives" ie x-transition:enter="classes"
  • Vue has a wrapper component that applies classes to the child
  • Alpine applies the classes you pass it for each state, :enter-start="class"