Skip to content

Commit 65da641

Browse files
gdarkogdarko
committed
Merge branch 'master' of github.com:gdarko/laravel-vue-starter
2 parents 8770126 + 5a1905b commit 65da641

File tree

21 files changed

+436
-347
lines changed

21 files changed

+436
-347
lines changed

‎README.md‎

Lines changed: 91 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -33,43 +33,114 @@ Installation is simple. Just like your ordinary Laravel app.
3333

3434
## ⚡️ How it works
3535

36+
### ➡️ Theming
37+
38+
The project supports theming, you can set a global color for the application theme, it can be done in `tailwind.config.js`.
39+
40+
```js
41+
module.exports = {
42+
// ...
43+
theme: {
44+
extend: {
45+
colors: {
46+
theme: colors.teal,
47+
danger: colors.red
48+
}
49+
}
50+
},
51+
//...
52+
};
53+
```
54+
3655
### ➡️ Authentication
3756

38-
The project ships with complete authentication boilerplate and includes the following pages:
57+
The project ships with complete authentication boilerplate including:
3958
- Login
4059
- Register
4160
- Forget Password
4261
- Reset Password
4362

44-
Also, the project comes with complete `users` crud that can be taken as an example for building other modals.
63+
### ➡️ Authorization
64+
65+
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.
66+
67+
### ➡️ Localization / i18n
68+
69+
The project supports localization / i18n, to translate the front-end use `lang/{code}/frontend.php` file.
70+
71+
### ➡️ Users CRUD
72+
73+
For your convenience the project comes with complete `users` crud that includes examples of:
74+
75+
- List page with filters and pagination
76+
- Edit/create pages with form for editing user that includes ajax based role search field
4577

4678
### ➡️ Structure
4779

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

50-
| Directory | Description |
51-
|-----------|---------------------------------------|
52-
| views | The home of the views |
53-
| + pages | The home of the pages |
54-
| + icons | The home of the icons |
55-
| + layouts | The home of the global layouts |
56-
| + utils | The home of the other utilities |
57-
| plugins | The home of the plugins configuration |
58-
| router | The home of the router configuration |
59-
| services | The home of the API services |
60-
| stores | The home of the Pinia stores |
61-
| utils | The home of the utility functions |
82+
| Directory | Description |
83+
|--------------|---------------------------------------|
84+
| views | The home of views |
85+
| + pages | The home of the pages |
86+
| + icons | The home of the icons |
87+
| + layouts | The home of the global layouts |
88+
| + components | The home of the reusable components |
89+
| helpers | The home of the helper utilites |
90+
| plugins | The home of the plugins configuration |
91+
| router | The home of the router configuration |
92+
| services | The home of the HTTP services |
93+
| stores | The home of the Pinia stores |
94+
| stub | The home of the static constants |
95+
96+
### ➡️ Components
97+
98+
The project ships with the most useful components that are required for one application (no bullshit), including:
99+
100+
| Name | Description | Parameters | Events | Location |
101+
|-----------|------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------|------------------------|
102+
| Page | The main page wrapper | title, breadcrumbs (array), actions (array of actions on top), is-loading | n/a | views/layouts |
103+
| Panel | Panel wrapper for displaying panels into the pages | title, is-loading, body-padding | n/a | views/components |
104+
| Modal | Modal wrapper for creating modals | is-showing, is-loading, show-close | @close | views/components |
105+
| Form | Form wrapper | title, is-loading | n/a | views/components |
106+
| 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 |
107+
| Alert | Alert component that pulls alrts from AlertStore | n/a | n/a | views/components |
108+
| Badge | Component that displays highlighted text with background | theme (success, info, warning, danger, error) | n/a | views/components |
109+
| 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 |
110+
| 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 |
111+
| 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 |
112+
| 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 |
113+
| Spinner | Spinner icon used mostly for loading | text, text-new-line (whether to break the text under the spinner) | n/a | views/components/icons |
114+
| Icon | Icon wrapper, currently uses fork awesome | name (the icon name without the fa- part) | n/a | views/components/icons |
115+
| Avatar | Default Avatar icon | n/a | n/a | views/components/icons |
116+
117+
Note: Please always look in the components, this table does not show everything.
118+
119+
From here, you are on your own. Develop new pages, models, components, use professional IDE for development to improve your efficiency.
120+
121+
<p><img width="100%" src="https://user-images.githubusercontent.com/5760249/210167222-e04312ac-46ef-4dcd-a4d5-00c3a207bf32.gif"/></p>
122+
123+
### ➡️ CORS
124+
125+
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:
126+
127+
#### Normal domain
62128

63-
### ➡️ Examples
129+
```
130+
APP_URL=http://mywebsite.com
64131
65-
The project ships with two examples as follows:
132+
SANCTUM_STATEFUL_DOMAINS=mywebsite.com
133+
SESSION_DOMAIN=mywebsite.com
134+
```
66135

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

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

74145
## ⚡️ Contributions
75146

0 commit comments

Comments
 (0)