This is a powerful starter kit, fine-tuned for clean code and uncompromising feature-set.
This kit aims to solve the problem of conflicting interests between Laravel and Vue, by separating the two.
The Vue side of the app is its own app, which communicates with the Laravel side, also its own app.
This structure allows the app, as a whole, to be more resilient to change. Laravel updates will not break Vue, nor will Vue updates mess with the Laravel side.
The Laravel framework is fast, clean, and filled with best practices. In this stack, it will handle the backend as an API.
Vite gets our development server running - our finger on the pulse - in a split second, and hot-reloads faster than you can alt+tab.
Vue 3 is powerful, fast, and lends itself to clean organization through its Composition API.
VueUse is an awesome library of use functions for Vue 3 Composition API that allow us to access many browser APIs reactively.
TypeScript allows us to remember what goes where - it gives us code intellisense.
Workbox handles the complexity of our Service Worker for us, allowing us to run code in the background while our app is closed.
Tailwind accelerates CSS development by allowing us to compose most of our CSS rules from our HTML.
Material Design Components provides beautiful UI components that follow Google's best practices for UI design.
LogRocket gives us a live replay of every session on our app, with console and network logging as well.
Pusher allows us to utilize websocket connections, for things like live updates, as well as push notifications, to let users know when something happens and they're not in the app.
cp .env.example .env
composer install
npm install
npm startUpdate your nginx config: provide two different location blocks: one for the frontend, one for the backend. Use explicitly-registered routes for your backend, for both legibility and safety (and because no other way works). These will replace the existing location / block.
location / {
# {{ ROOT_PATH }}/dist in a Forge Template
root /home/user/domain.com/dist;
try_files $uri $uri/ /index.html;
}
location ~ ^\/(api|sanctum|login|logout|register|user|_ignition|password-reset|clockwork|__clockwork).* {
# {{ PATH }} in a Forge Template
root /home/user/domain.com/public;
try_files $uri $uri/ /index.php?$query_string;
}