Registry / web-framework / vue-mixins

vue-mixins

JSON →
library0.3.6jsnpmunverified

vue-mixins is a collection of reusable mixins designed for Vue.js applications, primarily targeting Vue 1.x and Vue 2.x versions. The package, currently at version 0.3.6 and last updated around 2020, includes utilities for DOM interaction (like `getViewportSize`, `onWindowResize`), event handling (`onClick`, `onDocument`), and state management (`isOpened`). Its policy states that mixins are never removed for deprecation; instead, if an API changes, the mixin's name is updated (e.g., `onResize` became `onResize2`). This reflects an older approach to code reuse in Vue, preceding the Composition API introduced in Vue 3. The package is effectively abandoned, lacking ongoing maintenance or compatibility updates for newer Vue versions.

web-framework
npm install vue-mixins
github ↗package ↗
INSTALL
IMPORT
SIG · VUE-MIXINS
V
vue-mixins
web-frameworkjavascriptv0.3.6
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
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
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

onClick
✓ const onClickMixin = require('vue-mixins/onClick')
✗ import { onClick } from 'vue-mixins'
This package is CommonJS-only and exposes individual mixins via direct paths, not named exports from the root. It does not support ES modules.
getViewportSize
✓ const getViewportSizeMixin = require('vue-mixins/getViewportSize')
✗ import getViewportSize from 'vue-mixins/getViewportSize'
Mixins are individual modules; direct `require` of the specific path is necessary. There are no default exports for the entire package.
isOpened2
✓ const isOpened2Mixin = require('vue-mixins/isOpened2')
✗ const isOpenedMixin = require('vue-mixins/isOpened')
For Vue 2.0 compatibility, use `isOpened2`. The `isOpened` mixin is for older Vue 1.x. The package also supports global access via `window.vueMixins.isOpened2` if `bundle.js` is included.

This quickstart demonstrates how to integrate `onClick` and `getViewportSize` mixins into a Vue 2.x component using CommonJS `require` statements. It shows how the mixin's methods become available on the component instance.

const Vue = require('vue'); const onClickMixin = require('vue-mixins/onClick'); const getViewportSizeMixin = require('vue-mixins/getViewportSize'); new Vue({ el: '#app', mixins: [ onClickMixin, getViewportSizeMixin ], data: { message: 'Hello from Vue Mixins!', viewport: { width: 0, height: 0 } }, methods: { onClick() { alert('Clicked! Viewport size: ' + JSON.stringify(this.getViewportSize())); console.log('Viewport size:', this.getViewportSize()); } }, created() { // getViewportSize is provided by getViewportSizeMixin this.viewport = this.getViewportSize(); console.log('Component created. Current viewport:', this.viewport); window.addEventListener('resize', () => { this.viewport = this.getViewportSize(); }); }, template: ` <div> <h1>{{ message }}</h1> <p>Current Viewport: {{ viewport.width }}px x {{ viewport.height }}px</p> <button @click="click">Click me (via onClick mixin)</button> <p>Open console to see mixin methods in action.</p> </div> ` });
Debug
Known issues
breakingThis package is designed for Vue 1.x and Vue 2.x applications and is not compatible with Vue 3. Vue 3 introduced the Composition API as the preferred alternative to mixins for code reuse, and the underlying Vue APIs used by `vue-mixins` have changed significantly.
fix
For Vue 3, refactor reusable logic into Composition API composables. If targeting Vue 2, ensure you are using Vue 2.x.
affects: >=3.0.0 (Vue)
breakingSeveral mixins have version-specific variants, such as `isOpened` (for Vue 1.x) and `isOpened2` (for Vue 2.0), or `parentListener` and `parentListener2`. Using the incorrect version for your Vue environment will lead to runtime errors or unexpected behavior.
fix
Always consult the mixin list and documentation to select the correct version-specific mixin for your target Vue.js major version (e.g., `require('vue-mixins/isOpened2')` for Vue 2.x).
affects: >=0.1.0
deprecatedSome mixins are explicitly marked as deprecated in the README, such as `onResize` and `getVue`. While the package policy states that deprecated mixins are not removed, their functionality might be superseded by newer, renamed versions or other core Vue features.
fix
Avoid using deprecated mixins. Look for a newer, renamed alternative (e.g., `onResize2` if available) or implement similar functionality using Vue's built-in capabilities or the Composition API (for Vue 3).
affects: >=0.1.0
gotchaThe package exclusively uses CommonJS `require` statements for modularity and offers a global `window.vueMixins` object when bundled. It does not provide ES module exports, making direct `import` statements in modern ESM-based projects problematic without specific build tool configurations (e.g., Webpack or Rollup handling CJS).
fix
For ESM projects, configure your build tool to handle CommonJS modules. Otherwise, stick to `require()` in Node.js environments or include the `bundle.js` for browser global access.
affects: <=0.3.6
gotchaThis package is no longer actively maintained. The last release was several years ago, and the GitHub repository shows no recent activity. This means there will be no new features, bug fixes, or security patches.
fix
Consider migrating to actively maintained alternatives, especially Vue 3's Composition API for new development. For existing Vue 2 projects, be aware of the lack of support and potential vulnerabilities.
affects: <=0.3.6
Errors
Common errors & fixes
ReferenceError: require is not defined
Attempting to use CommonJS `require()` syntax in an ES module (ESM) context without proper transpilation or configuration.
fix
Ensure your project or file uses CommonJS (`.js` files with `"type": "commonjs"` in `package.json` or older Node.js versions) or configure your build tool (e.g., Webpack) to resolve CJS modules in an ESM environment. Alternatively, include `bundle.js` in a browser for global access (`window.vueMixins`).
[Vue warn]: The "mixins" option expects an array of mixin objects, but got undefined (for mixin at index X)
The `require()` path for a specific mixin is incorrect, or the module could not be found, resulting in `undefined` being passed to Vue's `mixins` option.
fix
Double-check the exact path for the mixin (e.g., `vue-mixins/onClick`). Ensure the package is correctly installed and accessible at the specified path. This error can also occur if attempting to use with Vue 3, where mixins behavior is different and often discouraged in favor of Composition API.
TypeError: Cannot read properties of undefined (reading 'call')
A mixin method (e.g., `this.onClick()`) is being called, but the mixin itself was not properly applied to the component, or the method was never defined by the mixin.
fix
Verify that the mixin is correctly listed in the component's `mixins` array and that the method you are calling is indeed provided by that mixin. Ensure you're using the correct mixin variant (e.g., `isOpened2` for Vue 2.x).
Upgrade
Version history
0.3.6latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
7 hits · last 30 days
node
6
OpenAI (training)
1
Resources
githubhttps://github.com/paulpflug/vue-mixins ↗
packagehttps://www.npmjs.com/package/vue-mixins ↗
vue-mixins — npm install vue-mixins · libregistry