This project costs me $22/month to be hosted on Vultr.
Please consider supporting my work if you use & find it useful. ❤️
A Laravel + Socialite + Vite + Vue 3 + TailwindCSS SPA Boilerplate. Laravel with user authentication, registration with email verification, social media authentication, password recovery, user management, and roles/permissions management. Uses official TailwindCSS. While the front end is part of this repository it is a completely separated Vue 3 front end compiled using ViteJS.
- Laravel
- Sanctum
- Socialite
- Vite
- Vue 3
- TailwindCSS (w/
@tailwindcss/formsand@tailwindcss/aspect-ratio) - Vue Router
- Vuex
- Axios
- Headless UI
- Heroicons
- Font Awesome 6
- ESLint with Prettier
- Users Area
- Admin Area
- About Page
- Terms Page
- Users Managemenet
- User Impersonation
- User Data Download
- User Account Self Deletion.
- Manage Social Media Logins through GUI
- Roles Management
- Permissions Management
- Google Analytics (optional)
- Social Authentication with Facebook, Twitter, Instagram, GitHub, TikTok, Google, YouTube, Microsoft, Twitch, and Apple
- Optional Sentry.io Laravel Monitoring
- Optional Sentry.io VueJs Monitoring
- Run
git clone https://github.com/jeremykenedy/laravel-spa.git laravel-spa - Create a MySQL database for the project
mysql -u root -p, if using Vagrant:mysql -u homestead -psecretcreate database laravelSpa;\q
- From the projects root run
cp .env.example .env - Configure your
.envfile (VERY IMPORTANT) - Run
composer installfrom the projects root folder - From the projects root folder run
sudo chmod -R 755 ../laravel-spa - From the projects root folder run
php artisan key:generate - From the projects root folder run
php artisan migrate - From the projects root folder run
composer dump-autoload - From the projects root folder run
php artisan db:seed - Compile the front end assets with npm steps or yarn steps.
- From the projects root folder run
npm install - From the projects root folder run
npm run devornpm run build
- You can lint assets with
npm run lint - You can clean the syntax with
npm run clean
- From the projects root folder run
yarn install - From the projects root folder run
yarn run devoryarn run build
- You can lint assets with
yarn run lint - You can clean the syntax with
yarn run clean
- From the projects root folder run
php artisan config:cache
| Password | |
|---|---|
| [email protected] | password |
| [email protected] | password |
| [email protected] | password |
- Facebook API (Will work with local dev callback)
- Twitter API
- Instagram API
- GitHub API (Will work with local dev callback)
- YouTube API
- Google API
- LinkedIn API (Will work with local dev callback)
- Twitch API (Will work with local dev callback)
- Microsoft API
- TikTok API
- Apple API
- ZoHo API (Will work with local dev callback)
- StackExchange API (Will work with local dev callback)
- GitLab API (Will work with local dev callback)
- Reddit API Register (Will work with local dev callback)
- Snapchat API
- Meetup API
- Atlassian
- See full list of providers: https://socialiteproviders.github.io
LaravelSpa
├── .browserslistrc
├── .editorconfig
├── .env.example
├── .env.travis
├── .eslintrc.js
├── .gitattributes
├── .github
│ ├── FUNDING.yml
│ ├── dependabot.yml
│ ├── labeler.yml
│ └── workflows
│ ├── changelog.yml
│ ├── codeql.yml
│ ├── create-release.yml
│ ├── dependency-review.yml
│ ├── deploy.yml
│ ├── gitguardian.yml
│ ├── greetings.yml
│ ├── labeler.yml
│ ├── laravel.yml
│ ├── manual.yml
│ ├── node.js.yml
│ ├── php.yml
│ ├── release.yml
│ ├── sentry.yml
│ └── stale.yml
├── .gitignore
├── .npmrc
├── .prettierignore
├── .scripts
│ └── deploy.sh
├── .styleci.yml
├── .travis.yml
├── LICENSE
├── README.md
├── SECURITY.md
├── app
│ ├── Console
│ │ └── Kernel.php
│ ├── Exceptions
│ │ ├── Handler.php
│ │ └── SocialProviderDeniedException.php
│ ├── Http
│ │ ├── Controllers
│ │ │ ├── AppSettingsController.php
│ │ │ ├── AppleSocialController.php
│ │ │ ├── Auth
│ │ │ │ ├── AuthController.php
│ │ │ │ ├── ForgotPasswordController.php
│ │ │ │ ├── PasswordController.php
│ │ │ │ ├── RegisterController.php
│ │ │ │ ├── ResetPasswordController.php
│ │ │ │ ├── SocialiteController.php
│ │ │ │ └── VerificationController.php
│ │ │ ├── Controller.php
│ │ │ ├── DashboardController.php
│ │ │ ├── ImpersonateController.php
│ │ │ ├── PermissionsController.php
│ │ │ ├── ProfileController.php
│ │ │ ├── RolesController.php
│ │ │ ├── ServerInfoController.php
│ │ │ ├── UserController.php
│ │ │ └── UsersController.php
│ │ ├── Kernel.php
│ │ ├── Middleware
│ │ │ ├── AddContentSecurityPolicyHeaders.php
│ │ │ ├── Authenticate.php
│ │ │ ├── EncryptCookies.php
│ │ │ ├── PreventRequestsDuringMaintenance.php
│ │ │ ├── RedirectIfAuthenticated.php
│ │ │ ├── TrimStrings.php
│ │ │ ├── TrustHosts.php
│ │ │ ├── TrustProxies.php
│ │ │ └── VerifyCsrfToken.php
│ │ ├── Requests
│ │ │ ├── AppSettings
│ │ │ ├── Permissions
│ │ │ │ ├── CreatePermissionRequest.php
│ │ │ │ ├── GetPermissionsRequest.php
│ │ │ │ └── UpdatePermissionRequest.php
│ │ │ ├── Roles
│ │ │ │ ├── CreateRoleRequest.php
│ │ │ │ └── UpdateRoleRequest.php
│ │ │ └── Users
│ │ │ ├── CreateUserRequest.php
│ │ │ ├── GetUserRolesRequest.php
│ │ │ ├── ImpersonateUserRequest.php
│ │ │ └── UpdateUserRequest.php
│ │ └── Resources
│ │ ├── Permissions
│ │ │ ├── PermissionResource.php
│ │ │ └── PermissionsCollection.php
│ │ └── Users
│ │ ├── RoleResource.php
│ │ └── RolesCollection.php
│ ├── Jobs
│ │ └── PersonalDataExportJob.php
│ ├── Mail
│ │ └── ExceptionOccured.php
│ ├── Models
│ │ ├── Impersonation.php
│ │ ├── Permission.php
│ │ ├── Role.php
│ │ ├── Setting.php
│ │ ├── SocialiteProvider.php
│ │ └── User.php
│ ├── Notifications
│ │ ├── PersonalDataExportedNotification.php
│ │ ├── ResetPasswordNotification.php
│ │ └── VerifyEmailNotification.php
│ ├── Providers
│ │ ├── AppServiceProvider.php
│ │ ├── AuthServiceProvider.php
│ │ ├── BroadcastServiceProvider.php
│ │ ├── EventServiceProvider.php
│ │ ├── RouteServiceProvider.php
│ │ └── ViewComposerServiceProvider.php
│ ├── Services
│ │ └── AppleToken.php
│ ├── Traits
│ │ ├── AppSettingsTrait.php
│ │ └── SocialiteProvidersTrait.php
│ └── View
│ └── Composers
│ ├── GaComposer.php
│ └── GaEnabledComposer.php
├── artisan
├── bootstrap
│ ├── android-chrome-192x192.png
│ ├── android-chrome-512x512.png
│ ├── app.php
│ ├── apple-touch-icon.png
│ ├── cache
│ │ ├── .gitignore
│ │ ├── packages.php
│ │ ├── routes-v7.php
│ │ └── services.php
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ ├── favicon.ico
│ └── ssr
│ ├── android-chrome-192x192.png
│ ├── android-chrome-512x512.png
│ ├── app2.mjs
│ ├── apple-touch-icon.png
│ ├── assets
│ │ ├── About-8055ba51.mjs
│ │ ├── Account-db07883a.mjs
│ │ ├── Admin-1aef526f.mjs
│ │ ├── AdminLayout-b06d3e9f.mjs
│ │ ├── AppSettings-493dc486.mjs
│ │ ├── Dashboard-00d0a96f.mjs
│ │ ├── Errors-cfd7b346.mjs
│ │ ├── ForgotPassword-ca93934f.mjs
│ │ ├── Home-092f52e0.mjs
│ │ ├── Login-3d895534.mjs
│ │ ├── NotFound-52f67599.mjs
│ │ ├── Password-0f549b05.mjs
│ │ ├── Permissions-d779932d.mjs
│ │ ├── PhpInfo-c54b8303.mjs
│ │ ├── Profile-8dc4ce3e.mjs
│ │ ├── Register-c8d7fa41.mjs
│ │ ├── ResetPassword-4e7ca3b7.mjs
│ │ ├── Roles-53fcb449.mjs
│ │ ├── RolesBadges-5ee6b7bc.mjs
│ │ ├── Settings-a3568c63.mjs
│ │ ├── SocialiteLogins-6af0e372.mjs
│ │ ├── Success-4b3d058c.mjs
│ │ ├── Terms-3b1605fc.mjs
│ │ ├── Users-fcead5b0.mjs
│ │ ├── VerifyEmail-3b245fb1.mjs
│ │ ├── default.css_vue_type_style_index_0_src_true_lang-6d22712f.mjs
│ │ ├── workbox-window.prod.es5-77e1b1e1.mjs
│ │ └── zoho-monocrome-black-b48ed5c0.mjs
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ ├── favicon.ico
│ ├── js-bundle-stats.html
│ ├── manifest.webmanifest
│ └── pluginWebUpdateNotice
│ ├── webUpdateNoticeInjectScript.global.js
│ ├── webUpdateNoticeInjectStyle.css
│ └── web_version_by_plugin.json
├── composer.json
├── composer.lock
├── config
│ ├── app.php
│ ├── auth.php
│ ├── broadcasting.php
│ ├── cache.php
│ ├── cors.php
│ ├── database.php
│ ├── debugbar.php
│ ├── exceptions.php
│ ├── filesystems.php
│ ├── hashing.php
│ ├── laravel-https.php
│ ├── laravel-logger.php
│ ├── laravel-page-speed.php
│ ├── laravelpwa.php
│ ├── logging.php
│ ├── mail.php
│ ├── personal-data-export.php
│ ├── queue.php
│ ├── roles.php
│ ├── sanctum.php
│ ├── sentry.php
│ ├── services.php
│ ├── session.php
│ ├── settings.php
│ ├── users.php
│ └── view.php
├── database
│ ├── .gitignore
│ ├── factories
│ │ └── UserFactory.php
│ ├── migrations
│ │ ├── 2014_10_00_000000_create_settings_table.php
│ │ ├── 2014_10_00_000001_add_group_column_on_settings_table.php
│ │ ├── 2014_10_12_000000_create_users_table.php
│ │ ├── 2014_10_12_100000_create_password_resets_table.php
│ │ ├── 2016_01_15_105324_create_roles_table.php
│ │ ├── 2016_01_15_114412_create_role_user_table.php
│ │ ├── 2016_01_26_115212_create_permissions_table.php
│ │ ├── 2016_01_26_115523_create_permission_role_table.php
│ │ ├── 2016_02_09_132439_create_permission_user_table.php
│ │ ├── 2019_08_19_000000_create_failed_jobs_table.php
│ │ ├── 2019_12_14_000001_create_personal_access_tokens_table.php
│ │ ├── 2021_04_26_093603_create_jobs_table.php
│ │ ├── 2022_09_05_192055_update_users_table.php
│ │ ├── 2022_11_02_051027_update_settings_table.php
│ │ ├── 2022_11_28_073632_create_socialite_providers_table.php
│ │ └── 2022_12_06_061947_create_impersonations_table.php
│ └── seeders
│ ├── AppSettingsSeeder.php
│ ├── ConnectRelationshipsSeeder.php
│ ├── DatabaseSeeder.php
│ ├── PermissionsTableSeeder.php
│ ├── RolesTableSeeder.php
│ └── UsersTableSeeder.php
├── env.d.ts
├── package-lock.json
├── package.json
├── phpunit.xml
├── postcss.config.js
├── prettier.config.js
├── prettierrc.json
├── public
│ ├── .htaccess
│ ├── android-chrome-192x192.png
│ ├── android-chrome-512x512.png
│ ├── apple-touch-icon.png
│ ├── css
│ │ └── app.css
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ ├── favicon.ico
│ ├── images
│ │ └── icons
│ │ ├── icon-128x128.png
│ │ ├── icon-144x144.png
│ │ ├── icon-152x152.png
│ │ ├── icon-192x192.png
│ │ ├── icon-384x384.png
│ │ ├── icon-512x512.png
│ │ ├── icon-72x72.png
│ │ ├── icon-96x96.png
│ │ ├── splash-1125x2436.png
│ │ ├── splash-1242x2208.png
│ │ ├── splash-1242x2688.png
│ │ ├── splash-1536x2048.png
│ │ ├── splash-1668x2224.png
│ │ ├── splash-1668x2388.png
│ │ ├── splash-2048x2732.png
│ │ ├── splash-640x1136.png
│ │ ├── splash-750x1334.png
│ │ └── splash-828x1792.png
│ ├── index.php
│ ├── js
│ │ ├── app.js
│ │ ├── resources_js_Views_ForgotPassword_vue.js
│ │ ├── resources_js_Views_Home_vue.js
│ │ ├── resources_js_Views_Login_vue.js
│ │ ├── resources_js_Views_Password_vue.js
│ │ ├── resources_js_Views_Profile_vue.js
│ │ ├── resources_js_Views_Register_vue.js
│ │ ├── resources_js_Views_ResetPassword_vue.js
│ │ ├── resources_js_Views_Settings_vue.js
│ │ ├── resources_js_Views_VerifyEmail_vue.js
│ │ ├── resources_js_Views_Welcome_vue.js
│ │ └── s-code.min.js
│ ├── mix-manifest.json
│ ├── robots.txt
│ ├── serviceworker.js
│ ├── sw.ts
│ └── web.config
├── resources
│ ├── css
│ │ ├── app.css
│ │ └── normalize.css
│ ├── img
│ │ ├── 404.png
│ │ ├── favicon
│ │ │ ├── android-chrome-192x192.png
│ │ │ ├── android-chrome-512x512.png
│ │ │ ├── apple-touch-icon.png
│ │ │ ├── favicon-16x16.png
│ │ │ ├── favicon-32x32.png
│ │ │ └── favicon.ico
│ │ ├── plugs.png
│ │ └── vendor-logos
│ │ ├── vultr-1.webp
│ │ ├── vultr-2.png
│ │ ├── zoho-monocrome-black.png
│ │ └── zoho-monocrome-white.png
│ ├── js
│ │ ├── app.js
│ │ ├── bootstrap.js
│ │ ├── components
│ │ │ ├── AppFooter.vue
│ │ │ ├── AppNav.vue
│ │ │ ├── BmcButtons.vue
│ │ │ ├── CircleSvg.vue
│ │ │ ├── Errors.vue
│ │ │ ├── GHButton.vue
│ │ │ ├── GHButtons.vue
│ │ │ ├── OctoCat.vue
│ │ │ ├── Pagination.vue
│ │ │ ├── PatreonButton.vue
│ │ │ ├── PerPage.vue
│ │ │ ├── ReloadPrompt.vue
│ │ │ ├── Success.vue
│ │ │ ├── VerifyNotice.vue
│ │ │ ├── VultrReferral.vue
│ │ │ ├── account
│ │ │ │ ├── AccountAdministration.vue
│ │ │ │ ├── AccountAuthentication.vue
│ │ │ │ ├── AccountData.vue
│ │ │ │ └── AccountPrivacy.vue
│ │ │ ├── admin
│ │ │ │ ├── AdminNavBar.vue
│ │ │ │ ├── AdminSidebar.vue
│ │ │ │ ├── RolesTable.vue
│ │ │ │ ├── RolesTableRow.vue
│ │ │ │ ├── UsersTable.vue
│ │ │ │ └── UsersTableRow.vue
│ │ │ ├── auth
│ │ │ │ └── SocialiteLogins.vue
│ │ │ ├── common
│ │ │ │ ├── AppButton.vue
│ │ │ │ ├── AppDeleteModal.vue
│ │ │ │ ├── AppModal.vue
│ │ │ │ ├── AppSwitch.vue
│ │ │ │ ├── AppTable.vue
│ │ │ │ └── AppToast.vue
│ │ │ ├── form
│ │ │ │ ├── AppSettingTextInput.vue
│ │ │ │ ├── AppSettingTextarea.vue
│ │ │ │ └── AppSettingToggle.vue
│ │ │ ├── loaders
│ │ │ │ └── AnimatedTableLoader.vue
│ │ │ ├── roles
│ │ │ │ ├── PermissionFormModal.vue
│ │ │ │ ├── RoleFormModal.vue
│ │ │ │ └── RolesBadges.vue
│ │ │ └── users
│ │ │ ├── UserDownloadData.vue
│ │ │ ├── UserForm.vue
│ │ │ └── UserFormModal.vue
│ │ ├── layouts
│ │ │ └── AdminLayout.vue
│ │ ├── middleware
│ │ │ ├── auth.js
│ │ │ ├── guest.js
│ │ │ ├── middlewarePipeline.js
│ │ │ ├── roleAdmin.js
│ │ │ ├── roleSuperAdmin.js
│ │ │ └── roleUser.js
│ │ ├── router
│ │ │ ├── index.js
│ │ │ └── routes.js
│ │ ├── services
│ │ │ ├── analytics.js
│ │ │ ├── asteroids.js
│ │ │ ├── common.js
│ │ │ ├── excanvas.js
│ │ │ ├── s-code.js
│ │ │ ├── s-code.min.js
│ │ │ └── users.js
│ │ ├── store
│ │ │ ├── index.js
│ │ │ ├── modules
│ │ │ │ ├── auth.js
│ │ │ │ ├── sidebar.js
│ │ │ │ └── toast.js
│ │ │ └── mutation-types.js
│ │ └── views
│ │ ├── App.vue
│ │ ├── Blank.vue
│ │ ├── admin
│ │ │ ├── Admin.vue
│ │ │ ├── AppSettings.vue
│ │ │ ├── Permissions.vue
│ │ │ ├── PhpInfo.vue
│ │ │ ├── Roles.vue
│ │ │ └── Users.vue
│ │ └── pages
│ │ ├── About.vue
│ │ ├── Dashboard.vue
│ │ ├── ForgotPassword.vue
│ │ ├── Home.vue
│ │ ├── Login.vue
│ │ ├── NotFound.vue
│ │ ├── Register.vue
│ │ ├── ResetPassword.vue
│ │ ├── Terms.vue
│ │ ├── VerifyEmail.vue
│ │ ├── auth
│ │ └── settings
│ │ ├── Account.vue
│ │ ├── Password.vue
│ │ ├── Profile.vue
│ │ └── Settings.vue
│ ├── lang
│ │ └── en
│ │ ├── auth.php
│ │ ├── pagination.php
│ │ ├── passwords.php
│ │ ├── personal-data-exports.php
│ │ └── validation.php
│ └── views
│ ├── app.blade.php
│ ├── emails
│ │ └── exception.blade.php
│ ├── errors
│ │ ├── 401.blade.php
│ │ ├── 403.blade.php
│ │ ├── 500.blade.php
│ │ ├── 503.blade.php
│ │ └── layout.blade.php
│ ├── socialite
│ │ ├── callback.blade.php
│ │ └── denied.blade.php
│ └── welcome.blade.php
├── routes
│ ├── api.php
│ ├── channels.php
│ ├── console.php
│ └── web.php
├── server.php
├── tailwind.config.js
├── tailwindcss-perspective.js
├── tsconfig.json
├── tsconfig.vite-config.json
└── vite.config.ts
76 directories, 380 files
- Tree command can be installed using brew:
brew install tree - File tree generated using command
tree -a -I '.git|node_modules|vendor|build|storage|tests|.DS_Store|.env'
Laravel-Spa is licensed under the MIT license. Enjoy!