Vtec Admin
SPA Admin Library for Vue.js running on top of REST APIs, built on Vuetify and comes with dedicated Vue CLI plugin for 🚀. Ready to use on Laravel API backend by using official Vtec Laravel Crud composer package, but can be used on every backend of your choice with your own data and authentication providers.
See full documentation
Check online demo -> go to admin and use pre-filled login (read only)
This project was heavily inspired by React Admin made by awesome Marmelab Team
Disclaimer
As this project was entirely made on my personal free time while I'm employed, and is totally free of charge, don't expect any support of anything. This project was mainly a personal challenge and only aims to satisfy my own needs on personal projects.
This is a pre-alpha version, without any unit tests or CI, so probably plenty of bugs. Expect regular breaking changes 💥. Don't waste your time of using this library for real projects, only for adventurers ! Maintenance is not guaranteed.
If you look for a free SPA admin library with good support and large community, I strongly encourage you to go with React Admin which is far more mature, optimized and fully tested. On commercial side you should take a look to Laravel Nova for highest productivity with nice UI.
Features
- Powered by Vuetify.
- 🔌 Full standalone responsive SPA Admin UI that can be adapted to any backend (REST, GraphQL, SOAP, etc.) by writing your own data and auth providers by following specific contracts which ensure compatibility.
- ⚡ Bare minimal Vue.js boilerplate code needed to get your CRUD pages working via DSL approach.
- 🚀 Vue CLI plugin provided for immediate quick start while including nice material theme by Creative Tim. Can be used on any Vue.js based application as well.
- 💝 100% Vue CLI friendly. The Vtec Admin library is simply a plugin which integrates within all of your existing plugins, notably Vue Router, Vuex, Vue I18n and Vuetify. Keep total control of your Vue app by adding your own routes with custom pages, custom store modules, and Vuetify theme as you are used to on Vue CLI base project.
- Ready to use data providers for Laravel within Spatie Laravel query builder, hydra for API Platform and JSON Server.
- 🔒 3 auth providers included : the recommended cookie based authentication for Laravel Sanctum, stateless authentication with JWT (tested with Laravel JWT), and simple basic HTTP auth.
- 🔒 Simple guest authentication support if no auth provider transmitted.
- ⛔ Advanced user permissions helpers for hide/show some UI components or menu links.
- 🚀 Official separate Vtec Laravel Crud package provided for insane quick start from top to bottom. Provides many backend features as spa authentication, profile editing, users management, impersonation, translatable fields, media support, file manager with Wysiwyg bridges, etc. Allow immediate start development from backend to UI with already basic functional admin.
- Stay as little magic as possible by fully respecting each backend and frontend development environnement. If you know well Laravel and Vue CLI basics, so you're ready to go !
- 🚀 Automatic guesser CRUD pages which print full Vue.js template generated code as starter kit for your own templates.
- 🚀 CRUD code generator commands on both Laravel and Vue CLI for even quicker ready-to-go API and UI base code.
- ⚡ With usage of Vtec Admin, code generators as well as Vue.js power, feel the better mix between productivity, nice development experience and limitless customization.
- 👓 Bookstore demo application which made use of all Vtec Admin features.
- 🗄 Complete documentation.
- 📝 Full intellisense support for all VA Components on Vetur and Jetbrains products !
- 🌍 Internationalization support via Vue I18n, include english and french translations. Can be easily configured by taking user browser language.
- 🌍 Translatable resource fields by contextual language selection on each crud page.
- 3 providers component for minimal boilerplate code : list, show and form.
- Server-side form validation support.
- Many fields and inputs components for various data types: select, boolean, number, rich text, etc.
- Autocomplete input with entity reference support.
- TinyMCE 5 as default Wysiwyg with elFinder bridge, can be replaced by your own.
- Create your own fields and inputs simply by extending mixins.
- Full-featured DataTable, including multi-sort, pagination, global search, advanced filters, basic CSV export, live query string context. And of course with possibility of cell templating.
- Data iterator decoupled from data table which allows total customization of list layout.
- 🔍 Advanced as-you-type filters with many supported inputs: select, boolean, autocomplete for search by relations, with multiple, etc.
- Customizable by-row, bulk and global actions.
- Direct aside create/edit from list instead of separate crud page.
- 🍻 Support of resources association and dissociation for relationships.
- 🤑 To finish, for what it's worth, it's completely free of charge.
Why ⏩Vtec⏪
vue-admin was obviously already taken on NPM registry and vuetify-admin seemed to me to much UI related. I wanted to keep VA acronym. I'm a big fan of 90' Japanese cars and I remembered VTEC acronym from Honda, a system designed for power optimization at low and high speed. So I found it very suited for this project, which tries to deliver high efficiency from top to bottom.
Architecture
See how it works here.
Installation
Select your most suitable guide :
- For basic presentation and quick install via the Vue CLI Plugin, go to getting started.
- For best initial starting showcase of Vtec Admin features, follow this tutorial guide.
- If you choose Laravel as backend, follow this optimized guide.
Note on this main repo
It's contains all necessary projects to develop Vtec Admin and run demo and tutorial :
- Vtec Admin Library, the main admin library.
- Vtec Admin Vue CLI Plugin, the associated Vue CLI plugin which contains all base code boilerplate for quick install and UI commands code generator.
- Vtec Laravel Crud, git submodule of composer package to use on fresh Laravel project which facilitates Vtec Admin integration and includes server-side API commands generator.
- Bookstore Admin Demo, full-featured admin sample build on top of main Vtec Admin Library.
- Bookstore Laravel Demo, suitable API backend for bookstore admin demo based on Laravel.
- Admin Tutorial, finished tutorial after following dedicated docs.
- Admin Generators, finished tutorial after following dedicated docs which aims to made a good showcase of YAML driven development.
- Vtec Docs, VuePress docs.
All of this projects are automatically linked together by symlinks thanks to yarn workspaces and composer for best library development experience. HMR from demo to admin library side-by-side is fully supported !
