based / sugar
Minimal Laravel authentication scaffolding with Vue, Vite, Typescript and Tailwind.
Fund package maintenance!
lepikhinb
Installs: 423
Dependents: 0
Suggesters: 0
Security: 0
Stars: 74
Watchers: 2
Forks: 4
Open Issues: 0
Language:Vue
Requires
- php: ^7.3|^8.0
- illuminate/filesystem: ^8.42|^9.0
- illuminate/support: ^8.42|^9.0
- illuminate/validation: ^8.42|^9.0
This package is auto-updated.
Last update: 2024-11-08 03:51:13 UTC
README
Sugar provides a supercharged starting point for Laravel applications. The package is built on top of the official Laravel Breeze, and includes:
- Vite (instead of Webpack + Mix)
- Vue 3 (modern SFC setup script syntax)
- TypeScript
- Tailwind CSS
- Inertia.js
Installation
You can install the package via composer:
composer require based/sugar --dev
Then, publish the assets provided by Sugar, and compile them:
php artisan sugar:install npm install npm run dev
Be careful installing Sugar on existing projects, as it completely removes
app.js
Inertia.js
The package comes with Inertia.js and includes components from Laravel Breeze, optimized for a better experience with Vue 3 and TypeScript.
<script setup lang="ts"> import { Button, Checkbox, Input, Label, ValidationErrors } from '@/Components/Breeze' import { Head, Link, useForm } from '@inertiajs/inertia-vue3' import useRoute from '@/Hooks/useRoute' const route = useRoute() const props = defineProps({ canResetPassword: Boolean, status: String, }) const form = useForm({ email: '', password: '', remember: false }) const submit = () => { form.post(route('login'), { onFinish: () => form.reset('password'), }) } </script>
Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. Read Why Vite? for more details.
The support is provided by Laravel Vite package.
TypeScript
TypeScript provides optional static typing, which lets you structure and validate your code at the compilation stage. It also brings the IDE autocompletion and validation support along with the code navigation feature.
Reimagined Breeze components utilize TypeScript. However, you're free to use the familiar syntax.
License
The MIT License (MIT). Please see License File for more information.