What is Spire? ​

Spire is a Toolkit that provides a great starting point for a Vue based Frontend Application that's preferably connected to a Laravel Backend.

Every new App is custom, but still needs the same things within the same Techstack, this is where Spire comes in.

Axios or Fetch or SuperAgent? What kind of ESLint config? How does this work again? Vuetify or custom? Need a route redirect on Authentication failure? Need xsrf-token support for Sanctum? Which i18next library? Route based events with automatic querystring clearing?

These are the kind of questions you don't necessarily need to care about when starting with Spire.

Spire provides:

• Already setup dependencies
• Customized ESLint, Prettier & Typescript Config
• Directory structure based on conventions
• A reactive HTTP Stack
• Intuitive Error Handling
• Integrated Server-side Validation
• Typed Icons/Images and useful Helper-Types
• Layouting System
• Easy to use Modals and Toasts
• Premade Components to change to your needs (Input, Select, etc.)
• Integrated i18next support and language handling
• Sync any store to local/session storage
• Route Events
• Page Events (onFocus, onBlur, onStart)
• A unified Developer experience when used across many projects

On top of that it integrates specifically very nicely with a Laravel Backend. Serverside Form Validation? Propagating Serverside exceptions to your Frontend? Done.

Vue is not a Framework like Angular - Angular has a lot of "set-in-stone" / "this is how we do it" ways that you have a hard time getting out of. Vue is incredibly open (some might argue too much) in that regard. It didn't even have an official Router until 1-2 years ago when Vue-Router became a first-party project.

This is why you have to "reinvent the wheel" pretty much each time you start a new Project for the simplest of things. Spire is here to take care of the most basic, fundamental needs each Applications needs.

Personal Note ​

I get the bad feeling when talking about a Framework. This is the sole Reason why I am not using something like Nuxt.

However, I've now integrated Spire across 3 entirely different Projects that behave differently with absolutely minimal overhead.

Züri-Teilt is a hybrid mobile app that needs a lot of caching, animations and transitions, and has basically no CRUD.

Salamander Maintenance is a Desktop-first App that is CRUD heavy and always fetches data fresh.

Parcandi Free-Flow is a mobile-first progressive web app that heavily relies on Store-State and does not have a Laravel Backend and it's structures.

This is why I am so convinced that this is not a bad path to take. Every different thing I had to implement was easy, not just from a lines-of-code or speed perspective, but easy from a "I know exactly how in can do this here" perspective. You have to get used to certain things, sure, but after a little while the whole process becomes clear, and you know exactly what happens where and when.

I truly believe this is approaching the right level of abstraction, while still being explicit and readable. A pretty flexible and good Foundation.

Everyone's definition of Magic is different. To me, magic means "I don't need to understand the implementation details fully but i know how to use it" or "If I do A and B, C just magically works", while for others it might mean something along the lines of "I don't understand how this works, so I am fearful of when I need to change something there".

However, this is true for any Library, Framework, Tool or Package before you've got your hands dirty with it.

This is why I hope that this Documentation aids any developer wanting to try this and clears up certain misunderstandings.

Always open to Feedback!

Have fun,

~Ronny