Acaciasoft Internal Ticketing
A reusable Vue 3 widget for submitting internal tickets. It helps teams intake work requests efficiently by collecting the necessary information and sending it to the backend system.
- 📋 Easy work request intake with custom config
- 🔒 Secure integration using access tokens
- 🧹 Pluggable and self-contained widget
- 🎨 Styled with Tailwind CSS
- ⚙️ Powered by Vue 3 and Vite
- Features
- Installation
- Usage
- Configuration Options
- Development
- Build Outputs
- Tech Stack
- Author
- License
You can install the widget via NPM:
npm install acaciasoft-internal-ticketingAlternatively, use the widget directly from a CDN:
<!-- vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<!-- Stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/acaciasoft-internal-ticketing@latest/dist/acaciasoft-internal-ticketing.css" />
<!-- UMD Script -->
<script src="https://unpkg.com/acaciasoft-internal-ticketing@latest/dist/acacia-ticketing.umd.js"></script>import AcaciaTicketing from 'acaciasoft-internal-ticketing';
import 'acaciasoft-internal-ticketing/dist/acaciasoft-internal-ticketing.css';
const ticketing = new AcaciaTicketing();
ticketing.config({
url: 'https://',
name: 'John Doe',
email: 'john@example.com',
projectId: 5,
clientId: 12,
token: 'your-token',
containerId: '#container' // Optional
});
ticketing.init();<!-- vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<!-- Stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/acaciasoft-internal-ticketing@latest/dist/acaciasoft-internal-ticketing.css" />
<!-- UMD Script -->
<script src="https://unpkg.com/acaciasoft-internal-ticketing@latest/dist/acacia-ticketing.umd.js"></script>
<!-- Container -->
<div id="container"></div>
<!-- Init Script -->
<script>
//make sure the DOM is loaded
window.addEventListener('DOMContentLoaded', () => {
const ticketing = new AcaciaTicketing();
ticketing.config({
url: 'https://',
name: 'John Doe',
email: 'john@example.com',
projectId: 5,
clientId: 12,
containerId: '#container',
token: 'your-token'
});
ticketing.init();
});
</script>You can replace
@latestwith a specific version like@1.1.4to lock to a known version.
ticketing
.setUrl('https://')
.setToken('your-token')
.setClientId(12)
.setProjectId(5)
.setUser({ name: 'John Doe', email: 'john@example.com' })
.setContainerId('#container')
.init();
// Or use more granular methods:
ticketing
.setUrl('https://')
.setToken('your-token')
.setClientId(12)
.setProjectId(5)
.setName('John Doe')
.setEmail('john@example.com')
.init();Ensure the container element exists and loaded in DOM:
<div id="container"></div>| Option | Type | Required | Description |
|---|---|---|---|
name |
string |
✅ | The full name of the requester. |
email |
string |
✅ | Email address for the ticket. |
projectId |
number |
✅ | Internal project identifier. |
clientId |
number |
✅ | Identifier for the requesting client. |
token |
string |
✅ | Access token to secure the request. |
url |
string |
✅ | The URL endpoint for the request. |
containerId |
string |
❌ | The element ID to mount the widget into (default: #acacia-ticketing). |
npm run dev # Start local dev server
npm run build # Build for production
npm run preview # Preview the production buildThe dist/ folder contains the final build files:
dist/
├── acacia-ticketing.es.js # ESM version for modern bundlers
├── acacia-ticketing.umd.js # UMD version for use in <script> tags
└── acaciasoft-internal-ticketing.css # Standalone CSS file
- Vue 3
- Tailwind CSS
- Vite
- Vee-Validate + Yup
- Vue3 Toastify
Acaciasoft
ISC