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 ├── .editorconfig ├── .env.example ├── .eslintrc.js ├── .eslintrc.json ├── .gitattributes ├── .github │ ├── FUNDING.yml │ ├── dependabot.yml │ ├── labeler.yml │ └── workflows ├── .gitignore ├── .prettierignore ├── .scripts │ └── deploy.sh ├── LICENSE ├── README.md ├── SECURITY.md ├── app │ ├── Console │ │ └── Kernel.php │ ├── Exceptions │ │ ├── Handler.php │ │ └── SocialProviderDeniedException.php │ ├── Http │ │ ├── Controllers │ │ │ ├── Admin │ │ │ │ ├── AppSettingsController.php │ │ │ │ ├── DashboardController.php │ │ │ │ └── ServerInfoController.php │ │ │ ├── Api │ │ │ │ ├── ActivityLogController.php │ │ │ │ ├── BrowserSessionController.php │ │ │ │ ├── CategoryController.php │ │ │ │ ├── PermissionsController.php │ │ │ │ ├── PostController.php │ │ │ │ ├── ProfileController.php │ │ │ │ ├── RolesController.php │ │ │ │ ├── UserController.php │ │ │ │ └── UsersController.php │ │ │ ├── Auth │ │ │ │ ├── AuthenticatedSessionController.php │ │ │ │ ├── ConfirmPasswordController.php │ │ │ │ ├── ForgotPasswordController.php │ │ │ │ ├── ImpersonateController.php │ │ │ │ ├── LoginController.php │ │ │ │ ├── PasswordController.php │ │ │ │ ├── RegisterController.php │ │ │ │ ├── ResetPasswordController.php │ │ │ │ ├── SocialiteController.php │ │ │ │ └── VerificationController.php │ │ │ ├── Controller.php │ │ │ └── HomeController.php │ │ ├── Kernel.php │ │ ├── Middleware │ │ │ ├── Authenticate.php │ │ │ ├── EncryptCookies.php │ │ │ ├── PreventRequestsDuringMaintenance.php │ │ │ ├── RedirectIfAuthenticated.php │ │ │ ├── TrimStrings.php │ │ │ ├── TrustHosts.php │ │ │ ├── TrustProxies.php │ │ │ ├── ValidateSignature.php │ │ │ └── VerifyCsrfToken.php │ │ ├── Requests │ │ │ ├── Admin │ │ │ │ ├── AdminDashboardRequest.php │ │ │ │ ├── ShowAppSettingsRequest.php │ │ │ │ ├── ShowServerInfoRequest.php │ │ │ │ └── UpdateAppSettingsRequest.php │ │ │ ├── Auth │ │ │ │ ├── LoginRequest.php │ │ │ │ └── RegisterRequest.php │ │ │ ├── Categories │ │ │ │ ├── DeleteCategoryRequest.php │ │ │ │ ├── RestoreCategoryRequest.php │ │ │ │ ├── ShowCategoryRequest.php │ │ │ │ ├── StoreCategoryRequest.php │ │ │ │ └── UpdateCategoryRequest.php │ │ │ ├── Permissions │ │ │ │ ├── CreatePermissionRequest.php │ │ │ │ ├── GetPermissionsRequest.php │ │ │ │ └── UpdatePermissionRequest.php │ │ │ ├── Posts │ │ │ │ ├── DeletePostRequest.php │ │ │ │ ├── RestorePostRequest.php │ │ │ │ ├── ShowPostRequest.php │ │ │ │ ├── StorePostRequest.php │ │ │ │ └── UpdatePostRequest.php │ │ │ ├── Roles │ │ │ │ ├── CreateRoleRequest.php │ │ │ │ ├── GetUserRolesRequest.php │ │ │ │ └── UpdateRoleRequest.php │ │ │ ├── StoreRoleRequest.php │ │ │ ├── StoreUserRequest.php │ │ │ ├── UpdateProfileRequest.php │ │ │ ├── User │ │ │ └── Users │ │ │ ├── CreateUserRequest.php │ │ │ ├── DeleteUserRequest.php │ │ │ ├── ImpersonateUserRequest.php │ │ │ ├── LeaveImpersonateUserRequest.php │ │ │ ├── RestoreUserRequest.php │ │ │ ├── UpdateUserRequest.php │ │ │ ├── VerifyUserRequest.php │ │ │ └── ViewUserRequest.php │ │ └── Resources │ │ ├── ActivityLogs │ │ │ ├── ActivityLogResource.php │ │ │ └── ActivityLogsCollection.php │ │ ├── Categories │ │ │ ├── CategoryResource.php │ │ │ └── GategoriesCollection.php │ │ ├── Permissions │ │ │ ├── PermissionResource.php │ │ │ └── PermissionsCollection.php │ │ ├── Posts │ │ │ ├── PostResource.php │ │ │ └── PostsCollection.php │ │ ├── Roles │ │ │ ├── RoleResource.php │ │ │ └── RolesCollection.php │ │ └── Users │ │ ├── UserResource.php │ │ └── UsersCollection.php │ ├── Jobs │ │ └── PersonalDataExportJob.php │ ├── Mail │ │ └── ExceptionOccured.php │ ├── Models │ │ ├── Category.php │ │ ├── CategoryPost.php │ │ ├── Impersonation.php │ │ ├── Permission.php │ │ ├── Post.php │ │ ├── Role.php │ │ ├── Setting.php │ │ ├── SocialiteProvider.php │ │ └── User.php │ ├── Notifications │ │ ├── PersonalDataExportedNotification.php │ │ ├── ResetPasswordNotification.php │ │ ├── SendActivationEmail.php │ │ ├── SendGoodbyeEmail.php │ │ ├── SendPasswordResetEmail.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 │ ├── app.php │ └── cache │ ├── .gitignore │ ├── packages.php │ └── services.php ├── composer.json ├── composer.lock ├── config │ ├── activitylog.php │ ├── app.php │ ├── auth.php │ ├── broadcasting.php │ ├── browser-sessions.php │ ├── cache.php │ ├── cors.php │ ├── database.php │ ├── debugbar.php │ ├── exceptions.php │ ├── filesystems.php │ ├── hashing.php │ ├── laravel-https.php │ ├── laravel-page-speed.php │ ├── laravelpwa.php │ ├── logging.php │ ├── mail.php │ ├── media-library.php │ ├── personal-data-export.php │ ├── queue.php │ ├── request-docs.php │ ├── roles.php │ ├── sanctum.php │ ├── sentry.php │ ├── services.php │ ├── session.php │ ├── settings.php │ ├── sitemap.php │ ├── users.php │ └── view.php ├── database │ ├── .gitignore │ ├── factories │ │ └── UserFactory.php │ ├── migrations │ │ ├── 0001_01_01_000000_create_users_table.php │ │ ├── 0001_01_01_000001_create_cache_table.php │ │ ├── 0001_01_01_000002_create_jobs_table.php │ │ ├── 2014_10_00_000000_create_settings_table.php │ │ ├── 2014_10_00_000001_add_group_column_on_settings_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_12_14_000001_create_personal_access_tokens_table.php │ │ ├── 2022_09_30_181156_create_posts_table.php │ │ ├── 2022_09_30_181227_create_categories_table.php │ │ ├── 2022_11_28_073632_create_socialite_providers_table.php │ │ ├── 2022_12_06_061947_create_impersonations_table.php │ │ ├── 2023_10_02_010617_create_category_post_table.php │ │ ├── 2023_10_02_175025_create_media_table.php │ │ ├── 2024_11_25_022836_create_permission_tables.php │ │ ├── 2025_01_23_093055_create_activity_log_table.php │ │ ├── 2025_01_23_093056_add_event_column_to_activity_log_table.php │ │ └── 2025_01_23_093057_add_batch_uuid_column_to_activity_log_table.php │ └── seeders │ ├── AppSettingsSeeder.php │ ├── ConnectRelationshipsSeeder.php │ ├── DatabaseSeeder.php │ ├── PermissionTableSeeder.php │ ├── PermissionsTableSeeder.php │ ├── RolesTableSeeder.php │ └── UsersTableSeeder.php ├── lang │ └── en │ ├── auth.php │ ├── emails.php │ ├── pagination.php │ ├── passwords.php │ └── validation.php ├── 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 │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── favicon.png │ ├── images │ │ └── placeholder.jpg │ ├── index.php │ ├── robots.txt │ ├── serviceworker.js │ ├── site.webmanifest │ └── sw.js ├── 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 │ │ │ ├── favicon.png │ │ │ └── site.webmanifest │ │ ├── fonts │ │ │ ├── Leckerli_One │ │ │ │ ├── LeckerliOne-Regular.ttf │ │ │ │ └── OFL.txt │ │ │ ├── Nunito │ │ │ │ ├── Nunito-Italic-VariableFont_wght.ttf │ │ │ │ ├── Nunito-VariableFont_wght.ttf │ │ │ │ ├── OFL.txt │ │ │ │ ├── README.txt │ │ │ │ └── static │ │ │ │ ├── Nunito-Black.ttf │ │ │ │ ├── Nunito-BlackItalic.ttf │ │ │ │ ├── Nunito-Bold.ttf │ │ │ │ ├── Nunito-BoldItalic.ttf │ │ │ │ ├── Nunito-ExtraBold.ttf │ │ │ │ ├── Nunito-ExtraBoldItalic.ttf │ │ │ │ ├── Nunito-ExtraLight.ttf │ │ │ │ ├── Nunito-ExtraLightItalic.ttf │ │ │ │ ├── Nunito-Italic.ttf │ │ │ │ ├── Nunito-Light.ttf │ │ │ │ ├── Nunito-LightItalic.ttf │ │ │ │ ├── Nunito-Medium.ttf │ │ │ │ ├── Nunito-MediumItalic.ttf │ │ │ │ ├── Nunito-Regular.ttf │ │ │ │ ├── Nunito-SemiBold.ttf │ │ │ │ └── Nunito-SemiBoldItalic.ttf │ │ │ └── Quicksand │ │ │ ├── OFL.txt │ │ │ ├── Quicksand-VariableFont_wght.ttf │ │ │ ├── README.txt │ │ │ └── static │ │ │ ├── Quicksand-Bold.ttf │ │ │ ├── Quicksand-Light.ttf │ │ │ ├── Quicksand-Medium.ttf │ │ │ ├── Quicksand-Regular.ttf │ │ │ └── Quicksand-SemiBold.ttf │ │ ├── login.png │ │ ├── login.webp │ │ ├── plugs.png │ │ └── vendor-logos │ │ ├── vultr-1.webp │ │ ├── vultr-2.png │ │ ├── zoho-monocrome-black.png │ │ └── zoho-monocrome-white.png │ ├── js │ │ ├── app.js │ │ ├── bootstrap.js │ │ ├── components │ │ │ ├── LocaleSwitcher.vue │ │ │ ├── ToggleDarkMode.vue │ │ │ ├── account │ │ │ ├── admin │ │ │ │ ├── Create.vue │ │ │ │ ├── Edit.vue │ │ │ │ └── Index.vue │ │ │ ├── auth │ │ │ │ └── SocialiteLogins.vue │ │ │ ├── common │ │ │ │ ├── AdminMiniCard.vue │ │ │ │ ├── AppButton.vue │ │ │ │ ├── AppDeleteModal.vue │ │ │ │ ├── AppModal.vue │ │ │ │ ├── AppSwitch.vue │ │ │ │ ├── AppTable.vue │ │ │ │ ├── CKEditorComponent.vue │ │ │ │ ├── CircleSvg.vue │ │ │ │ ├── DropZone.vue │ │ │ │ ├── Errors.vue │ │ │ │ ├── ImpersonateUser.vue │ │ │ │ ├── LeaveImpersonation.vue │ │ │ │ ├── LoadingCircle.vue │ │ │ │ ├── NoRecordsCTA.vue │ │ │ │ ├── Pagination.vue │ │ │ │ ├── PerPage.vue │ │ │ │ ├── SocialMediaLoginStatus.vue │ │ │ │ ├── SocialMediaLoginStatusItem.vue │ │ │ │ ├── Success.vue │ │ │ │ ├── TextEditorComponent.vue │ │ │ │ ├── TinyMCEditor.vue │ │ │ │ └── UmoEditor.vue │ │ │ ├── form │ │ │ │ ├── AppPasswordInput.vue │ │ │ │ ├── AppSettingTextInput.vue │ │ │ │ ├── AppSettingTextarea.vue │ │ │ │ ├── AppSettingToggle.vue │ │ │ │ └── AppTextInput.vue │ │ │ ├── includes │ │ │ │ ├── AdminBreadcrumb.vue │ │ │ │ ├── AdminBreadcrumbContainer.vue │ │ │ │ ├── AdminBreadcrumbSep.vue │ │ │ │ ├── AdminNavBarLink.vue │ │ │ │ ├── AdminNavbar.vue │ │ │ │ ├── AdminSidebar.vue │ │ │ │ ├── AdminSidebarLink.vue │ │ │ │ ├── AppFooter.vue │ │ │ │ ├── Breadcrumb.vue │ │ │ │ ├── Nav.vue │ │ │ │ └── NavLink.vue │ │ │ ├── loaders │ │ │ │ └── AnimatedTableLoader.vue │ │ │ ├── plugs │ │ │ │ ├── BmcButtons.vue │ │ │ │ ├── GHButton.vue │ │ │ │ ├── GHButtons.vue │ │ │ │ ├── OctoCat.vue │ │ │ │ ├── PatreonButton.vue │ │ │ │ └── VultrReferral.vue │ │ │ ├── roles │ │ │ │ ├── PermissionFormModal.vue │ │ │ │ ├── RoleFormModal.vue │ │ │ │ └── RolesBadges.vue │ │ │ └── users │ │ │ ├── UserForm.vue │ │ │ └── UserFormModal.vue │ │ ├── composables │ │ │ ├── activityLogs.js │ │ │ ├── auth.js │ │ │ ├── categories.js │ │ │ ├── darkmode.js │ │ │ ├── posts.js │ │ │ ├── profile.js │ │ │ ├── roles.js │ │ │ └── users.js │ │ ├── lang │ │ │ ├── bn.json │ │ │ ├── en.json │ │ │ ├── es.json │ │ │ ├── fr.json │ │ │ ├── pt-BR.json │ │ │ └── zh-CN.json │ │ ├── layouts │ │ │ ├── Admin.vue │ │ │ ├── Authenticated.vue │ │ │ ├── Error.vue │ │ │ └── Guest.vue │ │ ├── plugins │ │ │ └── i18n.js │ │ ├── routes │ │ │ ├── index.js │ │ │ ├── middleware.js │ │ │ └── routes.js │ │ ├── services │ │ │ ├── ability.js │ │ │ ├── analytics.js │ │ │ ├── asteroids.js │ │ │ ├── common.js │ │ │ ├── excanvas.js │ │ │ ├── s-code.js │ │ │ ├── s-code.min.js │ │ │ └── utilities.js │ │ ├── store │ │ │ ├── auth.js │ │ │ ├── index.js │ │ │ ├── lang.js │ │ │ ├── sidebar.js │ │ │ └── toast.js │ │ ├── validation │ │ │ └── rules.js │ │ └── views │ │ ├── admin │ │ │ ├── ActivityLog.vue │ │ │ ├── Admin.vue │ │ │ ├── AppSettings.vue │ │ │ ├── BrowserSessions.vue │ │ │ ├── Dashboard.vue │ │ │ ├── Permissions.vue │ │ │ ├── PhpInfo.vue │ │ │ ├── Roles.vue │ │ │ ├── Users.vue │ │ │ ├── categories │ │ │ │ ├── Create.vue │ │ │ │ ├── Edit.vue │ │ │ │ └── Index.vue │ │ │ └── posts │ │ │ ├── Create.vue │ │ │ ├── Edit.vue │ │ │ └── Index.vue │ │ ├── auth │ │ │ ├── Verify.vue │ │ │ └── passwords │ │ │ ├── Confirm.vue │ │ │ ├── RequestReset.vue │ │ │ └── Reset.vue │ │ ├── category │ │ │ └── posts.vue │ │ ├── errors │ │ │ └── 404.vue │ │ ├── home │ │ │ └── index.vue │ │ ├── kiosk │ │ ├── login │ │ │ └── Login.vue │ │ ├── misc │ │ │ ├── about.vue │ │ │ ├── pricing.vue │ │ │ ├── support.vue │ │ │ └── terms.vue │ │ ├── pages │ │ │ └── user-settings │ │ │ ├── Account.vue │ │ │ ├── AccountAuthentication.vue │ │ │ ├── AccountData.vue │ │ │ ├── Password.vue │ │ │ ├── Profile.vue │ │ │ ├── Settings.vue │ │ │ ├── SettingsNav.vue │ │ │ ├── SettingsNavLink.vue │ │ │ └── UserDownloadData.vue │ │ ├── posts │ │ │ ├── details.vue │ │ │ └── index.vue │ │ ├── register │ │ │ └── index.vue │ │ └── templates │ │ ├── Bare.vue │ │ └── Blank.vue │ ├── pwa │ │ ├── serviceworker.js │ │ └── sw.js │ └── views │ ├── app.blade.php │ ├── auth │ │ ├── login.blade.php │ │ ├── passwords │ │ │ ├── confirm.blade.php │ │ │ ├── email.blade.php │ │ │ └── reset.blade.php │ │ ├── register.blade.php │ │ └── verify.blade.php │ ├── home.blade.php │ ├── layouts │ │ ├── app.blade.php │ │ └── master.blade.php │ └── socialite │ ├── callback.blade.php │ └── denied.blade.php ├── routes │ ├── api.php │ ├── channels.php │ ├── console.php │ └── web.php ├── tailwind.config.js ├── tailwindcss-perspective.js ├── vite.config.js └── vue.config.js 104 directories, 422 files 103 directories, 419 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!
