generators-frontend

Generate LaraJS Vue.js frontend code with CMS structure, API utilities, and reusable components.

2|Updated Sep 30, 2024
One-click install
npx skills add https://github.com/maingocthanhtan96/larajs-docs --skill generators-frontend
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: generators-frontend
Source: https://github.com/maingocthanhtan96/larajs-docs/tree/main/.claude/skills/generators-frontend
Command: npx skills add https://github.com/maingocthanhtan96/larajs-docs --skill generators-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the generation of frontend code for LaraJS applications, including Vue.js CMS structure, API integration, routing, and reusable components, significantly speeding up development.

Core Features & Use Cases

  • Vue.js CMS Structure: Generates a monorepo structure with api, cms, and frontend apps.
  • API Integration: Provides utility functions for interacting with backend APIs using Resource classes.
  • Router Setup: Manages constantRoutes and asyncRoutes for navigation.
  • Reusable Components: Includes LaraForm and LaraTable for efficient UI development.
  • Hooks: Offers useCategoryForms and useCategoryTables for form and table management.
  • Views: Generates Form.vue and index.vue for CRUD operations.
  • Model Interfaces: Defines TypeScript interfaces for data models.

Quick Start

Use the generators-frontend skill to generate Vue.js CMS structure and components for a new resource.

Frequently Asked Questions about generators-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a Vue.js CMS structure for a LaraJS application?

You can generate Vue.js CMS views by using this Skill to output Form.vue and index.vue files. These views handle CRUD operations and integrate with useCategoryForms and useCategoryTables hooks for state management.

What is the best way to set up API integration in a Vue.js monorepo?

The best way to set up API integration is by generating Resource classes and utility functions. This Skill provides these utilities to interact with backend APIs seamlessly within your Vue.js monorepo architecture.

Does this frontend generation tool support TypeScript models?

Yes, this Skill generates constantRoutes and asyncRoutes to manage navigation. This dynamic router setup allows you to handle both static and on-demand route loading within your Vue.js CMS.

Can I generate reusable form and table components for Vue.js?

Yes, this Skill generates LaraForm and LaraTable components to streamline UI development. These reusable components handle data presentation and form inputs efficiently across your Vue.js application.

Do I need a monorepo architecture to use LaraJS frontend generation?

You need a monorepo architecture because LaraJS frontend generation outputs a structure with api, cms, and frontend apps. This setup organizes your Vue.js codebase efficiently for scalable development.