Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
VueWriter
✓ import VueWriter from 'vue-writer';
✗ const VueWriter = require('vue-writer');
For global registration via `app.use(VueWriter)` in `main.js`. Vue Writer is an ESM-first package designed for modern build setups.
VueWriter
✓ import { VueWriter } from 'vue-writer';
✗ import VueWriter from 'vue-writer';
For local component registration within a Vue component's `components` option. Note the named import for local use versus default for global.
VueWriter
✓ import { VueWriter } from 'vue-writer';
✗ import { vueWriter } from 'vue-writer';
The component name is `VueWriter` (PascalCase), matching common Vue component naming conventions.
Demonstrates global registration of the VueWriter component in a Vue 3 application, making it available throughout the app.
import { createApp } from 'vue';
import App from './App.vue';
import VueWriter from 'vue-writer';
const app = createApp(App);
app.use(VueWriter);
app.mount('#app');
// App.vue (example)
// <template>
// <VueWriter :array="arr" />
// </template>
// <script>
// export default {
// data() {
// return { arr: ['Hello', 'From', 'Vue Writer'] };
// },
// };
// </script>
Debug
Known issues
gotchaThe `array` prop is required and must always be passed as an array, even if it contains only a single string. Passing a string directly will lead to unexpected behavior or errors.fixEnsure `array` prop is wrapped in `[]`, e.g., `:array="['Hello World']"`.
affects: >=1.0.0
breakingStyling has been explicitly removed from the Vue Writer component to give users full control. Previous versions might have included default styling, which is no longer present.fixApply custom CSS to the component's internal elements using class selectors provided by the component (e.g., `.is-typed`, `.is-erased`, `.typed-caret`).
affects: >=1.1.0
gotchaThe `iterations` prop, while typed as `Number`, is shown with a string value in the README example (`:iterations="'1'"`). Passing a string might lead to type coercion issues or unexpected behavior depending on Vue's strictness.fixPass `iterations` as a number, e.g., `:iterations="1"`.
affects: >=1.1.0
gotchaThe `typeSpeed` and `eraseSpeed` props' behavior is counter-intuitive: a *higher* number results in *slower* typing/erasing. This is typical for delay-based timing.fixAdjust `typeSpeed` and `eraseSpeed` values downwards to increase animation speed, and upwards to decrease it.
affects: >=1.0.0
gotchaVue Writer is primarily developed and tested for Vue v3.x. While it *might* work with Vue v2.x, it has not been fully tested or supported, and unexpected behavior may occur.fixUse Vue Writer exclusively with Vue 3 projects for guaranteed compatibility and support. Consider alternative libraries for Vue 2 applications.
affects: <=2.0.2 (targeting Vue 3)
Errors
Common errors & fixes
[Vue warn]: Failed to resolve component: VueWriter
The VueWriter component was not properly registered or imported.
fixFor global use, ensure `app.use(VueWriter)` is called in `main.js` with a default import. For local use, ensure `import { VueWriter } from 'vue-writer'` and add `components: { VueWriter }` to your component options. [Vue warn]: Invalid prop: type check failed for prop "array". Expected Array, got String.
The `array` prop was provided as a string instead of an array.
fixWrap the string in an array, e.g., change `<VueWriter array="Hello World" />` to `<VueWriter :array="['Hello World']" />`.
TypeError: Cannot read properties of undefined (reading 'length')
Potentially related to the `array` prop being undefined, null, or not an array, causing the internal iteration logic to fail.
fixEnsure the `array` prop is always defined and passed as a valid array, even if empty, e.g., `:array="[]"`.
The component renders without typing animation or styling.
Styling has been removed from the component, and it might not have started if `start` prop is used incorrectly.
fixAdd custom CSS to style the component as needed. Check the `start` prop value; if it's set, the animation will delay until that time.
Audit
Dependencies
vuerequiredPeer dependency for Vue 3 application integration.