Alpine: Building Admin Dashboard

[anonimusprogramus]

I'm not using Livewire or else, let's say I just want to make an Admin Dashboard, with some pages:

(1) login page
(2) input page, with form for sending data
(3) search page, with table for showing data
(4) static home page

How to achieve this with Alpine?

Because I imagine having 3 big html files, duplicating same header, navbar, footer.

Thank you

[muzafferdede]

How about something like this?

<div x-data="{page: 'page1'}">
  <header>
    Header
  </header>
  <nav>
    <a href="#" @click.prevent="page = 'page1'">Login Page</a>
    <a href="#" @click.prevent="page = 'page2'">Input Page</a>
    <a href="#" @click.prevent="page = 'page3'">Search Page</a>
    <a href="#" @click.prevent="page = 'page4'">Home Page</a>
  </nav>
  <section>
    <div x-show.transition="page == 'page1'">
      Login Page
    </div>
    <div x-show.transition="page == 'page2'">
      Input Page
    </div>
    <div x-show.transition="page == 'page3'">
      Search Page
    </div>
    <div x-show.transition="page == 'page4'">
      Home Page
    </div>
  </section>
  <footer>
    Footer
  </footer>
</div>

[anonimusprogramus]

Thanks. That would be perfect, if those four pages keep separated. Can I import, like searchpage.html? Otherwise, there would be one big file.

[anonimusprogramus]

I really hope there's solution for a case like this; a layout importing other partials/files. I wonder if webpack can help.

[muzafferdede]

You still can do it as:

    function start() {
      return {
        page: '',
        fetch(file) {
          fetch(file).then((result) => result.text())
          .then((page) => {
              this.page = page;
          })
        }
      }
    }

search.html

<div x-data="{title: 'Search Page'}">
    <h1 x-text="title"></h1>
</div>

index.html

  <div x-data="start()" x-init="fetch('search.html')">
    <header>
      Header
    </header>
    <nav>
      <a href="#" @click.prevent="fetch('login.html')">Login Page</a>
      <a href="#" @click.prevent="fetch('input.html')">Input Page</a>
      <a href="#" @click.prevent="fetch('search.html')">Search Page</a>
      <a href="#" @click.prevent="fetch('home.html')">Home Page</a>
    </nav>
    <section>
      <div x-html="page"></div>
    </section>
    <footer>
      Footer
    </footer>
  </div>

[anonimusprogramus]

Oh wow. That's cool, gonna try it. Thanks a lot.

[HugoDF]

I really hope there's solution for a case like this; a layout importing other partials/files. I wonder if webpack can help.

So there isn't an Alpine way of doing this (apart from using fetch to load HTML files and injecting those into your page) since Alpine is concerned with client-side code, not generation of static pages/server rendering.

I've had good success with Eleventy (11ty.dev), it's a very simple static site generator which you can use to template eg. your navbar.

Alpine.js Playground uses it, you can see the code at https://github.com/HugoDF/alpinejs-playground

If you're going straight HTML, you can share the JS by creating a .js file and including it with a script tag, but you will have to copy paste the markup (HTML)

[anonimusprogramus]

Thank you guys, my questions clearly answered. I'm closing this.