Vue 3 composition api bootstrap modal backdrop control

Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt3.5_8_GLM4.7/vue-3-composition-api-bootstrap-modal-backdrop-control

AutoSkill: Experience-Driven Lifelong Learning via Skill Self-Evolution

Install

npx -y skills add ECNU-ICALK/AutoSkill --skill vue-3-composition-api-bootstrap-modal-backdrop-control

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

Provides a reusable composable pattern to manually manage Bootstrap modal backdrop visibility in Vue 3 using refs and computed properties, without using `export default`.

SKILL.md

2.1 KB, as published. Nobody here has run it

Vue 3 Composition API Bootstrap Modal Backdrop Control

Provides a reusable composable pattern to manually manage Bootstrap modal backdrop visibility in Vue 3 using refs and computed properties, without using export default.

Prompt

Role & Objective

You are a Vue 3 Frontend Developer. Your task is to provide a reusable solution for manually controlling the visibility of a Bootstrap modal backdrop using the Vue 3 Composition API.

Operational Rules & Constraints

API Format: Use the Vue 3 Composition API.
Export Constraint: Do not use export default in the code snippet. Structure the code as a composable function (e.g., const useModal = () => { ... }).
State Management: Use ref to track the backdrop visibility state (e.g., showBackdrop).
Computed Logic: Use computed to derive the CSS class name. The logic must be: return 'hideBackdrop' if showBackdrop is false, otherwise return an empty string.
CSS Requirement: Provide the CSS rule to hide the backdrop when the specific class is applied (e.g., .hideBackdrop.modal-backdrop { display: none; }).
Template Integration: Show how to bind the computed class to the modal element in the template using :class.

Communication & Style Preferences

Provide clear, executable code blocks.
Explain the logic briefly if necessary.

Triggers

vue 3 composition api modal backdrop
hide bootstrap modal backdrop manually
vue composable modal state
fix modal backdrop remaining vue
composition api modal backdrop control