Alpine.js Playground
Examples Newsletter

Integrating Alpine.js + Pre/Server-rendered content

Copied!

Hiding pre-rendered content with x-show

pre-rendered content that won't be hidden

the content in "pre-rendered to be hidden" will get hidden

the content in "pre-rendered to be hidden" will get hidden

Example with a select that doesn't quite work, we end up with 2 "hello" options, one is selected & hidden and the other is visible and unselected:

Overwriting HTML/text with x-html/x-text

pre-rendered text

Pre-rendered HTML

Removing single nodes using x-ref + x-init

The following text will get removed with x-ref approach "pre-rendered content"

As will the following text: "pre-rendered content"

A more sensible example with the "select" that works... mostly ("world" should be selected)

Removing nodes using x-remove + x-init

The following text will get removed with x-ref approach "pre-rendered content"

As will the following text: "pre-rendered content"

A more sensible example with the "select" that works... mostly ("world" should be selected)


        

💥 Subscribe for Early Access to the Alpine.js Handbook 📖 💥