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 11.x
- Laravel Sanctum
- Socialite
- Vite
- Vue 3
- TailwindCSS (w/
@tailwindcss/formsand@tailwindcss/aspect-ratio) - Vue Router
- Pinia
- Axios
- Vue I18n
- 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
The following Sanctum features are implemented in this Vue SPA:
- ✅ Laravel 11
- ✅ Vue 3
- ✅ VueRouter
- ✅ Pinia
- ✅ Vue I18n Multi-Language
- ✅ Login
- ✅ Password Reset
- ✅ Registration
- ✅ Admin Panel
- ✅ Profile Management
- ✅ User Management
- ✅ Roles Management
- ✅ Permissions Management
- ✅ Password Change
- ✅ E-Mail Verification
- ✅ Posts Management
- ✅ Frontend Blog
- ✅ TailwindCSS
- ✅ Browser Sessions - Other Device Logout
- ✅ User Activity Logs
- 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 | |
|---|---|
| superadmin@superadmin.com | password |
| admin@admin.com | password |
| user@user.com | 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!
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
![@github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=64&v=4){kind=small}
![@github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=64&v=4){kind=small}