{"id":12398,"library":"vue-at","title":"Vue-At: @-Mentions for Vue.js","description":"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.","status":"active","version":"3.0.0-alpha.3","language":"javascript","source_language":"en","source_url":"https://github.com/fritx/vue-at","tags":["javascript"],"install":[{"cmd":"npm install vue-at","lang":"bash","label":"npm"},{"cmd":"yarn add vue-at","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-at","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the Vue framework itself. Specific versions are required based on the vue-at package version (e.g., 3.x for vue-at@next, 2.x for vue-at@2.x).","package":"vue","optional":false},{"reason":"Required for precise caret positioning when using the <AtTa> component for textarea elements. This is a runtime dependency for accurate mention popup placement.","package":"textarea-caret","optional":true}],"imports":[{"note":"This is the default import for the contenteditable version of the component. For Vue 3, ensure you are installing `vue-at@next`.","wrong":"import { At } from 'vue-at' // No named export for default component\nconst At = require('vue-at') // Not standard for Vue 3 ESM projects","symbol":"At","correct":"import At from 'vue-at'"},{"note":"This component is specifically for textarea elements and is imported from a distinct subpath. It requires the `textarea-caret` package to be installed as well.","wrong":"import AtTa from 'vue-at' // Incorrect path, AtTa is a subpath export","symbol":"AtTa","correct":"import AtTa from 'vue-at/dist/vue-at-textarea'"},{"note":"For Vue 3 projects, you must explicitly use the `@next` tag during installation to get the alpha release compatible with Vue 3. The default install (`vue-at`) will fetch the Vue 2 compatible version.","wrong":"npm install vue-at // Defaults to latest stable Vue 2.x version\nnpm install vue-at@3.x // Specific 3.x tag not used, use @next","symbol":"Vue 3 Installation","correct":"npm install vue-at@next"}],"quickstart":{"code":"<template>\n  <at :members=\"members\" v-model=\"message\">\n    <div contenteditable style=\"border: 1px solid #ccc; padding: 8px; min-height: 50px;\"></div>\n  </at>\n  <p>Current message: {{ message }}</p>\n\n  <at-ta :members=\"members\" v-model=\"textareaMessage\" style=\"margin-top: 20px;\">\n    <textarea style=\"width: 100%; height: 80px; padding: 8px; border: 1px solid #ccc;\"></textarea>\n  </at-ta>\n  <p>Current textarea message: {{ textareaMessage }}</p>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport At from 'vue-at';\nimport AtTa from 'vue-at/dist/vue-at-textarea';\n\n// Ensure 'textarea-caret' is installed: npm i -S textarea-caret\n\nconst message = ref('');\nconst textareaMessage = ref('');\n\nconst members = ref([\n  'Alice',\n  'Bob',\n  'Charlie',\n  'David',\n  { name: 'Eve', display: 'Eve (Admin)' },\n  'Frank',\n  'Grace'\n]);\n</script>\n\n<style>\n.atwho-view {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 99999999;\n  display: none;\n  background: white;\n  border: 1px solid #eee;\n  font-size: 14px;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  border-radius: 3px;\n  box-shadow: 0 5px 10px rgba(0,0,0,.1);\n  min-width: 120px;\n}\n\n.atwho-view ul {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.atwho-view li {\n  display: block;\n  padding: 5px 10px;\n  cursor: pointer;\n}\n\n.atwho-view strong {\n  color: #66CCFF;\n}\n\n.atwho-view li.cur {\n  background: #66CCFF;\n  color: white;\n}\n</style>\n","lang":"typescript","description":"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."},"warnings":[{"fix":"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.","message":"Vue 3 compatibility requires installing `vue-at@next`. The default `npm install vue-at` will fetch the Vue 2.x compatible version, which is not designed for Vue 3 and will lead to runtime errors due to significant API changes in Vue 3 (e.g., global API, reactivity, lifecycle hooks, v-model behavior).","severity":"breaking","affected_versions":">=3.0.0-alpha.0"},{"fix":"Install the `textarea-caret` package: `npm install -S textarea-caret` or `yarn add textarea-caret`.","message":"When using the `<AtTa>` component for textarea elements, the `textarea-caret` package is a mandatory dependency that must be installed separately. Failing to install it will likely result in errors related to missing modules or incorrect caret positioning for mention suggestions.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"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.","message":"The `vue-at@next` version for Vue 3 is currently in an alpha state (`3.0.0-alpha.3`). While functional, alpha releases may contain bugs, lack full feature parity with stable versions, or introduce further breaking changes before a stable major release.","severity":"gotcha","affected_versions":"3.0.0-alpha.x"},{"fix":"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 }\">`.","message":"The custom template slot syntax for Vue 1.x (`slot=\"item\"` with `data-src` and `data-text` attributes) is an outdated pattern. Modern Vue (2.x and 3.x) uses scoped slots or `v-slot` directives for passing data to child components' slots, making the Vue 1.x approach non-idiomatic and potentially incompatible.","severity":"deprecated","affected_versions":"<2.x"},{"fix":"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.","message":"When using `v-model` with `<at>` (for `contenteditable` elements) versus `<at-ta>` (for `<textarea>` elements), the `v-model` should be bound to the `<at>` container itself for `contenteditable`, but directly to the `<textarea>` element inside `<at-ta>`. Incorrect placement can lead to reactivity issues or failed updates.","severity":"gotcha","affected_versions":">=2.x"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install the missing dependency: `npm install -S textarea-caret` or `yarn add textarea-caret`.","cause":"The `textarea-caret` package is a required peer dependency for the `AtTa` component, but it has not been installed.","error":"Cannot find module 'textarea-caret' or its corresponding type declarations."},{"fix":"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.","cause":"This typically occurs in a Vue 3 project when `vue-at@2.x` (the Vue 2 compatible version) has been installed instead of `vue-at@next`, or when `vue-at` components are used in a Vue 3 context without proper component resolution setup.","error":"[Vue warn]: Failed to resolve component: At\nIf this is a native custom element, make sure to add it to 'compilerOptions.isCustomElement' in your setup."},{"fix":"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: [...] } }`.","cause":"The `members` prop, which defines the list of items for `@`-mentions, was not provided or correctly bound to the `At` or `AtTa` component.","error":"[Vue warn]: Property \"members\" was accessed during render but is not defined on instance."},{"fix":"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.","cause":"This error occurs within the `textarea-caret` library, likely indicating that it's trying to access properties of a textarea element that is not yet rendered or properly referenced, or `AtTa` is used incorrectly.","error":"TypeError: Cannot read properties of undefined (reading 'selectionStart') in textarea-caret.js"}],"ecosystem":"npm"}