Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gdarko/laravel-vue-starter

Latest Laravel 11 and Vue 3 boilerplate using Tailwind 3, Sanctum, Fortify, Pinia, the new Vue3 Composition API
https://github.com/gdarko/laravel-vue-starter

composer laravel laravel-fortify laravel-framework laravel-sanctum pinia piniajs single-page-app tailwind tailwindcss vite vitejs vue vue3 vuejs vuex

Last synced: 1 day ago
JSON representation

Latest Laravel 11 and Vue 3 boilerplate using Tailwind 3, Sanctum, Fortify, Pinia, the new Vue3 Composition API

Host: GitHub
URL: https://github.com/gdarko/laravel-vue-starter
Owner: gdarko
Created: 2021-08-28T22:40:38.000Z (about 3 years ago)
Default Branch: master
Last Pushed: 2024-06-02T12:34:48.000Z (5 months ago)
Last Synced: 2024-08-01T13:18:20.692Z (3 months ago)
Topics: composer, laravel, laravel-fortify, laravel-framework, laravel-sanctum, pinia, piniajs, single-page-app, tailwind, tailwindcss, vite, vitejs, vue, vue3, vuejs, vuex
Language: Vue
Homepage:
Size: 9.88 MB
Stars: 68
Watchers: 6
Forks: 38
Open Issues: 2
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Laravel Vue Starter

The project was created to save myself time for redoing the same things all over again when starting a new Laravel/Vue project.

The main goal of this project is to reduce code and make everything simpler for bootstrapping new projects.

The project is built with the following components:

- Vue 3 / Pinia / VueRouter
- Vue 3 Composition API
- Vite 3
- Laravel Framework
- Laravel Sanctum
- Laravel Fortify
- Tailwind
- ForkAwesome
- Media Library (by Spatie)
- Bouncer (by JosephSilber)

## ⚡️ How to install

Installation is simple. Just like your ordinary Laravel app.

1. `git clone`
2. `cd laravel-vue-starter`
3. `composer install`
4. `cp .env.example .env`
5. `php artisan key:generate`
6. `npm install`
7. `npm run watch` (or if production `npm run build`)

## ⚡️ How it works

### ➡️ Theming

The project supports theming, you can set a global color for the application theme, it can be done in `tailwind.config.js`.

```js
module.exports = {
// ...
theme: {
extend: {
colors: {
theme: colors.teal,
danger: colors.red
}
}
},
//...
};
```

### ➡️ Authentication

The project ships with complete authentication boilerplate including:
- Login
- Register
- Forget Password
- Reset Password

### ➡️ Authorization

The project is configured to use [Bouncer](https://github.com/JosephSilber/bouncer) package for managing authorization across your routes. Authorization is important security subject, so please consult bouncer's package documentation.

### ➡️ Localization / i18n

The project supports localization / i18n, to translate the front-end use `lang/{code}/frontend.php` file.

### ➡️ Users CRUD

For your convenience the project comes with complete `users` crud that includes examples of:

- List page with filters and pagination
- Edit/create pages with form for editing user that includes ajax based role search field

### ➡️ Structure

The front-end code is located in `resources/app`. The code is organized in different directories to make things more readable.

| Directory | Description |
|--------------|---------------------------------------|
| views | The home of views |
| + pages | The home of the pages |
| + icons | The home of the icons |
| + layouts | The home of the global layouts |
| + components | The home of the reusable components |
| helpers | The home of the helper utilites |
| plugins | The home of the plugins configuration |
| router | The home of the router configuration |
| services | The home of the HTTP services |
| stores | The home of the Pinia stores |
| stub | The home of the static constants |

### ➡️ Components

The project ships with the most useful components that are required for one application (no bullshit), including:

| Name | Description | Parameters | Events | Location |
|-----------|------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------|------------------------|
| Page | The main page wrapper | title, breadcrumbs (array), actions (array of actions on top), is-loading | n/a | views/layouts |
| Panel | Panel wrapper for displaying panels into the pages | title, is-loading, body-padding | n/a | views/components |
| Modal | Modal wrapper for creating modals | is-showing, is-loading, show-close | @close | views/components |
| Form | Form wrapper | title, is-loading | n/a | views/components |
| Table | A custom table with sorting and pagination support | headers (array), records (array), actions (array of row actions), sorting (object of keys with true/false), pagination: (object of Laravel pagination data) | @page-changed, @action, $sort | views/components |
| Alert | Alert component that pulls alrts from AlertStore | n/a | n/a | views/components |
| Badge | Component that displays highlighted text with background | theme (success, info, warning, danger, error) | n/a | views/components |
| TextInput | Custom text field with type={text,..., textarea} support | name, label, v-model, type (text,...,textarea, etc), show-label, required, disabled, placeholder | default | views/components/input |
| FileInput | File input with custom button and multiple choices support | name, label, v-model, show-label, required, disabled, placeholder, multiple, accept | default + @click, @error, @input, @clear | views/components/input |
| Dropdown | Dropdown field with server side support | name, label, v-model, show-label, required, disabled, placeholder, multiple, server (endpoint), server-per-page (items per page), server-search-min-characters | default | views/components/input |
| Button | Button/Router link component | label, icon, theme (success, info, warning, danger, error), disabled, to (:to is router url, when specified the button is rendered as router-link) | default | views/components/input |
| Spinner | Spinner icon used mostly for loading | text, text-new-line (whether to break the text under the spinner) | n/a | views/components/icons |
| Icon | Icon wrapper, currently uses fork awesome | name (the icon name without the fa- part) | n/a | views/components/icons |
| Avatar | Default Avatar icon | n/a | n/a | views/components/icons |

Note: Please always look in the components, this table does not show everything.

From here, you are on your own. Develop new pages, models, components, use professional IDE for development to improve your efficiency.

### ➡️ CORS

Please make sure you have APP_URL, SANCTUM_STATEFUL_DOMAINS and SESSION_DOMAIN set correctly in [.env](https://github.com/gdarko/laravel-vue-starter/blob/master/.env.example) file as follows:

#### Normal domain

```
APP_URL=http://mywebsite.com

SANCTUM_STATEFUL_DOMAINS=mywebsite.com
SESSION_DOMAIN=mywebsite.com
```

#### Localhost with port

```
APP_URL=http://localhost:8000

SANCTUM_STATEFUL_DOMAINS=localhost:8000
SESSION_DOMAIN=localhost
```

## ⚡️ Contributions

Pull requests are welcome, feel free to contribute to this project.

## ⚡️ License

This file is part of Laravel Vue Starter

Laravel Vue Starter is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.

Laravel Vue Starter is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with Laravel Vue Starter. If not, see .
```