Web application with Vue, Nuxt, Vuetify, Laravel and Docker

Hey everyone!

TLDR; If you're looking for the table of contents, it's down below!

Today we're kicking off a starter kit that you will be able to use for internal tools, authenticated client areas, client accounts, CRM, and those sorts of things. Hopefully, we'll build it all together, live on Youtube Channel!

So what's so special about another starter kit?? Well, apart from other strong points, is that it will use "renderless" UI components.

And what does that even mean? You might ask!

I'm so glad you asked it! 😀 There's no established definition for now, and different naming may occur for the same concept. Essentially, is that the "renderless" library will have the code for behaviour, and but the one for the looks, is just a starting point, you might change that as per your need! Complex UI components that interact with a server, can be easily customized, no only by changing CSS, but the whole HTML+CSS+JS.

We'll get into that later, the post is not about this topic, but I sure do hope you like the idea!

The application and its recipe

It's a full-stack web application, meaning you'll get a browser and server-side app, database, cache, and queue. And it's not the typical starter kit. I will take this from the ground up, right from the scratch, have a development environment, then a production environment, and of course, we have to monitor and track bugs in both front and backend!

It's the only the way I see for a "From Zero to Hero" 🚀

We will count on the help of tools such as Vue, Vuetify, Nuxt and more on the frontend!

On the backend, we'll rely on Laravel, which itself is an ecosystem of application components, more than a framework. We will develop and deploy the whole thing to production using Docker.

I won't go into many details about all the tooling, for now, I'm pretty sure if you're reading, you might know all of them, and I trust the gazillions of resources about them. A unique side is the combination of all tools, taking you on a journey from zero to production and maintenance!

If you lack the time or motivation to learn how to combine all of these techs, then this is the place. You can use as-is, or also customize something as you see fit.

The scope

As previously explained, this is more of a starter kit, with a library of components to use, so that you can build what you need and not a final application that you could tweak or distort! Even so, we have to have something built, to grasp concepts, and this will be an Organization's Internal Portal, like an Intranet, which may have various areas. This will allow for great flexibility in use cases, for the widgets or “pieces of application” (components).

Internal Tool, a restricted area with user credentials
- Newsfeed
- Schedules
- Vacations
  - Vacation requirement
- Rooms
Tasks, team organization
Contact Lists
Shared Files

This is just indicative, things may vary. The goal is to have a rich and fully customizable set of components.

During the live, some inspiration came and the name Epicenter came up! So here is the Source code link on Github, which is open source and MIT license.

Let’s dive into creating the project! Video timestamps

Happy coding!

As always happy coding, friends!!

See you soon, much love ❤️

This is not your typical tutorial - Web Portal with Vue, Nuxt, Vuetify, Laravel, and Docker

Comments (1)

More from this blog

Today I learned about JSONL format

How to replace Tailwind v4 for v3 in Laravel Starter Kits, useful for Filament v3

Launched an AI Application, Open-Source, Free, Bring Your AI key

Build custom components inside a Filament V3 Panel with Livewire and TailwindCSS

Filament V3 - How to fill login automatically (local environment)

The application and its recipe

The scope

Let’s dive into creating the project! Video timestamps

Happy coding!

Command Palette

Comments (1)

More from this blog

The application and its recipe

The scope

Let’s dive into creating the project! Video timestamps

Happy coding!