Skip to content

Commit

Permalink
Merge branch 'master' of github.com:gdarko/laravel-vue-starter
Browse files Browse the repository at this point in the history
  • Loading branch information
@gdarko
gdarko committed Feb 19, 2023
2 parents 8770126 + 5a1905b commit 65da641
Show file tree
Hide file tree
Showing 21 changed files with 436 additions and 347 deletions.
111 changes: 91 additions & 20 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,43 +33,114 @@ Installation is simple. Just like your ordinary Laravel app.

## ⚡️ 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 and includes the following pages:
The project ships with complete authentication boilerplate including:
- Login
- Register
- Forget Password
- Reset Password

Also, the project comes with complete `users` crud that can be taken as an example for building other modals.
### ➡️ 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/js`. The code is organized in different directories to make things more readable.

| Directory | Description |
|-----------|---------------------------------------|
| views | The home of the views |
| + pages | The home of the pages |
| + icons | The home of the icons |
| + layouts | The home of the global layouts |
| + utils | The home of the other utilities |
| plugins | The home of the plugins configuration |
| router | The home of the router configuration |
| services | The home of the API services |
| stores | The home of the Pinia stores |
| utils | The home of the utility functions |
| 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.

<p><img width="100%" src="https://user-images.githubusercontent.com/5760249/210167222-e04312ac-46ef-4dcd-a4d5-00c3a207bf32.gif"/></p>

### ➡️ 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

### ➡️ Examples
```
APP_URL=http://mywebsite.com
The project ships with two examples as follows:
SANCTUM_STATEFUL_DOMAINS=mywebsite.com
SESSION_DOMAIN=mywebsite.com
```

- views/pages/private/dashboard - Shows paginated list of messages with a form for sending a message.
- views/pages/private/users - Shows paginated list of system users along with crud screens.
#### Localhost with port

You will probably remove the examples once you start developing your app on top of this project.
```
APP_URL=http://localhost:8000
<p><img width="100%" src="https://user-images.githubusercontent.com/5760249/132946970-2e74e2d5-bb13-4190-953d-14e8a7d9b7d7.gif"/></p>
SANCTUM_STATEFUL_DOMAINS=localhost:8000
SESSION_DOMAIN=localhost
```

## ⚡️ Contributions

Expand Down
Loading

0 comments on commit 65da641

Please sign in to comment.