Creating Layouts & Components with AlpineJS

[thecodeclimber]

I am wondering -- is there a way to create layouts and/or components with AlpineJS (so that I can keep my code DRY)? If not, are there any solutions that integrate with AlpineJS that add this functionality (without having to resort to a full framework like React or Vue)?

[gwleuverink]

There is not. Alpine aims to go hand in hand with any back end templating system. The idea is to separate layouts on the back end instead

[thecodeclimber]

Okay - thanks.

With that said, if you have any recommendation for a good back-end templating system, please let me know.

[ryangjchandler]

@thecodeclimber which server side framework are you using?

[thecodeclimber]

Lately I have been using nuxtjs with strapi -- but I like alpine and am trying to see how I could use it in some projects. For a server, I would use node.js (probalby with express -- but I'm open to other suggestions).

[gwleuverink]

Since you’re planning to go with nuxt you might be better off sticking with Vue. Alpine aims to provide Vue like features but without the hassle and overhead more complex libraries like Vue or react have.

Since nuxt is built in top of Vue there is little to be gained by introducing another library that does the same sort of thing Vue already does.

Furthermore, if you have two libraries competing to take control of the same Dom you might run into some very annoying bugs. And also since both Vue and Alpine use similar naming conventions things may become very confusing very fast. Not saying it can’t be done, but I couldn’t recommend going that route.

But that is my opinion :)

[thecodeclimber]

Thanks for your reply.

I meant a solution instead of nuxt/vue. I.e., a way to get the layout (and, if possible, component) benefits of vue/nuxt, but with an alpine based solution.

[gwleuverink]

Ah yes! Sorry for misunderstanding.
I mainly use alpine in combination with Laravel’s blade components and love it! But that is a whole different stack. I’m not familiar with any JS backend frameworks at all. Maybe @ryangjchandler has some ideas?

[thecodeclimber]

Thanks again for your help.

I am somewhat familiar with Laravel (and do like blade), but I am think I"m looking for something simpler. It seems to me that switching out nuxt/vue for laravel/alpine is just exchanging one type of complexity for another.

Either way, thanks for your help and if @ryangjchandler has any ideas, I'd love to hear them.

[SimoTod]

I like edge.js (https://edge.adonisjs.com): it's part of the adonis framework, a js framework inspired by laravel but you can use only the templating system and integrate it in express.js if you want to