vue-at is a JavaScript library that provides robust '@'-mentioning functionality, similar to At.js, but specifically engineered for Vue applications without relying on jQuery or injecting additional DOM nodes. It offers a lightweight and stable alternative for implementing user mentions in input fields. The library supports various Vue versions, including dedicated branches for Vue 1 (`vue-at@1.x` or `vue1-at`), Vue 2 (`vue-at@2.x`), and the current development focus, Vue 3 (`vue-at@next`, which is currently `3.0.0-alpha.3`). It is actively maintained with ongoing development for the latest Vue ecosystem. Key differentiating features include its plain-text based core, native support for both `contenteditable` divs and `textarea` elements, and extensive customization options for member lists and display templates. It also boasts compatibility with popular UI frameworks such as Vuetify and Element UI.
npm install vue-atVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates both the `At` (for contenteditable) and `AtTa` (for textarea) components, showcasing basic `@`-mentioning with a list of members and `v-model` binding for two-way data synchronization. It includes essential styling for the mention dropdown.
Ensure you explicitly install `vue-at@next` for Vue 3 projects: `npm install vue-at@next`. Check your `package.json` to confirm the correct version is listed.
Install the `textarea-caret` package: `npm install -S textarea-caret` or `yarn add textarea-caret`.
Be aware of potential instability and breaking changes. It's recommended to pin to a specific alpha version if using in production and regularly check the GitHub repository for updates and release notes. Consider using the Vue 2.x version (`vue-at@2.x`) for more stable production environments if Vue 3 is not a hard requirement.
For Vue 2.x and 3.x, use `v-slot` syntax with scoped slots to customize item rendering, as demonstrated in the component's documentation for custom templates. For example: `<template v-slot:item="{ item }">`.For `contenteditable`: `<at v-model="html"><div contenteditable></div></at>`. For `textarea`: `<at-ta><textarea v-model="text"></textarea></at-ta>`. Ensure the `v-model` is placed as per the component's guidance for each specific wrapper.
Install the missing dependency: `npm install -S textarea-caret` or `yarn add textarea-caret`.
For Vue 3 projects, ensure you install `vue-at@next`. If the issue persists, verify that Vue 3's component registration is correctly configured, and check if any build tools (like Vite) require specific configurations for external components.
Ensure the `members` prop is explicitly passed to the `<at>` or `<at-ta>` component and that the `members` data property is defined in your component's script. Example: `<at :members="myMembersArray">` and `data() { return { myMembersArray: [...] } }`.Ensure the `<textarea>` element is correctly nested within `<at-ta>` and fully rendered before `vue-at` attempts to initialize the caret positioning logic. Also, verify `v-model` is correctly bound to the `<textarea>` itself.