shah-newaz / redprint-ng
Laravel CRUD Generator
Requires
- php: ^8.1
- friendsofphp/php-cs-fixer: ^3.6
- illuminate/support: ^11.0 | ^12.0
- mck89/peast: ^1.16
- navindex/html-formatter: ^0.1.1
- symfony/process: ^7.0
Requires (Dev)
- orchestra/testbench: ^9.0
- phpunit/phpunit: ^11.0
- dev-master
- v3.0.6
- v3.0.5
- v3.0.4
- v3.0.3
- v3.0.2
- v3.0.1
- v3.0.0
- v2.4.7
- v2.4.6
- v2.4.5
- v2.4.4
- v2.4.3
- v2.4.2
- v2.4.1
- v2.4.0
- v2.3.9
- v2.3.8
- v2.3.7
- v2.3.6
- v2.3.5
- v2.3.4
- v2.3.3
- v2.3.2
- v2.3.1
- v2.3.0
- v2.2.9
- v2.2.8
- v2.2.7
- v2.2.6
- v2.2.5
- v2.2.4
- v2.2.3
- v2.2.2
- v2.2.1
- 2.2.0
- v2.1.9
- v2.1.8
- v2.1.7
- v2.1.6
- v2.1.5
- v2.1.4
- v2.1.3
- v2.1.2
- v2.1.1
- v2.1.0
- v2.0.9
- v2.0.8
- v2.0.7
- v2.0.6
- v2.0.5
- v2.0.4
- v2.0.3
- v2.0.2
- v2.0.1
- v2.0.0
- v1.0.1
- v1.0.0
This package is auto-updated.
Last update: 2025-03-09 16:27:22 UTC
README
A Laravel package for generating CRUD operations with Vue.js frontend integration.
NOTE: Redprint is extremely opinionated about how you should structure your Laravel + Vue 3 project. It is designed to be used with Laravel 11+ and Vue 3+ using Element Plus and Tailwind CSS.
This package is still in development and may not be fully stable.
Installation
composer require shah-newaz/redprint-ng
Publish the configuration:
php artisan vendor:publish --tag=redprint-config
Requirements
- PHP 8.2+
- Laravel 11+
- Vue.js 3
- The following npm packages must be installed in your project:
- tailwindcss
- element-plus
- axios
- vue
- vue-router
- vue-i18n
- lodash-es
Configuration
The package will look for your Vue router configuration file at the specified location relative to the resources directory. Make sure this path is correctly set before running the CRUD generator command.
config/redprint.php
return [ /* |-------------------------------------------------------------------------- | Axios Instance |-------------------------------------------------------------------------- | | Specify the axios instance to be used in Vue components. | Example: 'this.$api' will generate this.$api.get() instead of axios.get() | Set to null to use a local axios instance with proper baseURL. | */ 'axios_instance' => null, /* |-------------------------------------------------------------------------- | Vue Router Location |-------------------------------------------------------------------------- | | Specify the location of your Vue router configuration file. | This should be relative to the resources directory. | Example: 'js/router/routes.ts' or 'js/router.js' | */ 'vue_router_location' => 'js/router/routes.ts', ];
Commands
Generate CRUD
php artisan redprint:crud
It will prompt you for the model name, namespace, route prefix, soft deletes, and layout.
Example:
php artisan redprint:crud``` This will generate: - Model (`app/Models/Product.php`) - Controller (`app/Http/Controllers/Api/ProductController.php`) - Resource (`app/Http/Resources/ProductResource.php`) - Migration (`database/migrations/xxxx_xx_xx_create_products_table.php`) - Vue Components: - `resources/js/pages/Product.vue` - `resources/js/components/Product/Index.vue` - `resources/js/components/Product/Form.vue` - API Routes in `routes/api.php` - Common Components (if not exist): - `resources/js/components/Common/Empty.vue` - `resources/js/components/Common/FormError.vue` - `resources/js/components/Common/InputGroup.vue` ### Generate Vue Component ```bash php artisan redprint:vue
This command allows you to generate three types of Vue components:
- Blank Component: A basic Vue component with minimal setup
- List Component: A data table component with search, sort, and pagination
- Form Component: A form component with validation and API integration
Usage Examples:
Blank Component:
php artisan redprint:vue # Select 'blank' when prompted # Enter component path (e.g., @/components/views/MyComponent.vue)
List Component:
php artisan redprint:vue # Select 'list' when prompted # Enter API endpoint (e.g., api/v1/products) # Define columns when prompted # Enter component path (e.g., @/components/views/ProductList.vue)
Form Component:
php artisan redprint:vue # Select 'form' when prompted # Enter API endpoint (e.g., api/v1/products) # Define columns and relationships when prompted # Enter component path (e.g., @/components/views/ProductForm.vue)
Column Definitions
When creating list or form components, you'll be prompted to define columns. Each column can have:
- Name: The field name (e.g., 'title')
- Type: Data type (string, text, boolean, integer, etc.)
- Nullable: Whether the field is required
- Relationship Data (optional): For form components with related models
[ 'endpoint' => 'api/v1/categories/list', 'labelColumn' => 'name', 'relatedModelLower' => 'categories' ]
Generated Components
Blank Component:
- Basic Vue 3 component structure
- Script setup syntax
- TypeScript support
List Component:
- Element Plus data table integration
- Search functionality
- Pagination
- Column sorting
- Delete/restore actions (if soft deletes enabled)
- API integration with configured axios instance
Form Component:
- Form validation
- Dynamic input types based on column definitions
- Related model select inputs (with API integration)
- Save/update functionality
- Error handling
- Loading states
All components are generated with TypeScript support and follow Vue 3's composition API patterns.
Generated API Routes
The following API routes will be generated for each CRUD:
Route::prefix('v1')->middleware(['auth:api'])->group(function () { Route::get('products', [ProductController::class, 'getIndex']); Route::get('products/{id}', [ProductController::class, 'show']); Route::post('products/save', [ProductController::class, 'save']); Route::delete('products/{id}', [ProductController::class, 'delete']); // If soft deletes enabled: Route::delete('products/{id}/force', [ProductController::class, 'deleteFromTrash']); });
Vue Router Integration
The generated components will automatically integrate with Vue Router, providing the following routes:
{ path: '/products', name: 'pages.products', component: ProductPage, children: [ { path: '', name: 'pages.products.index', component: ProductIndex, meta: {title: 'routes.titles.products', description: 'routes.descriptions.products', requiresAuth: true}, }, { path: 'edit', name: 'pages.products.edit', component: ProductForm, meta: {title: 'routes.titles.edit_product', description: 'routes.descriptions.edit_product', requiresAuth: true}, }, { path: 'new', name: 'pages.products.new', component: ProductForm, meta: {title: 'routes.titles.new_product', description: 'routes.descriptions.new_product', requiresAuth: true}, }, ], }
License
The MIT License (MIT). Please see License File for more information.