{"id":16929,"library":"vue-mixins","title":"Vue Mixins Collection","description":"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.","status":"abandoned","version":"0.3.6","language":"javascript","source_language":"en","source_url":"git://github.com/paulpflug/vue-mixins","tags":["javascript"],"install":[{"cmd":"npm install vue-mixins","lang":"bash","label":"npm"},{"cmd":"yarn add vue-mixins","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-mixins","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package is CommonJS-only and exposes individual mixins via direct paths, not named exports from the root. It does not support ES modules.","wrong":"import { onClick } from 'vue-mixins'","symbol":"onClick","correct":"const onClickMixin = require('vue-mixins/onClick')"},{"note":"Mixins are individual modules; direct `require` of the specific path is necessary. There are no default exports for the entire package.","wrong":"import getViewportSize from 'vue-mixins/getViewportSize'","symbol":"getViewportSize","correct":"const getViewportSizeMixin = require('vue-mixins/getViewportSize')"},{"note":"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.","wrong":"const isOpenedMixin = require('vue-mixins/isOpened')","symbol":"isOpened2","correct":"const isOpened2Mixin = require('vue-mixins/isOpened2')"}],"quickstart":{"code":"const Vue = require('vue');\nconst onClickMixin = require('vue-mixins/onClick');\nconst getViewportSizeMixin = require('vue-mixins/getViewportSize');\n\nnew Vue({\n  el: '#app',\n  mixins: [\n    onClickMixin,\n    getViewportSizeMixin\n  ],\n  data: {\n    message: 'Hello from Vue Mixins!',\n    viewport: { width: 0, height: 0 }\n  },\n  methods: {\n    onClick() {\n      alert('Clicked! Viewport size: ' + JSON.stringify(this.getViewportSize()));\n      console.log('Viewport size:', this.getViewportSize());\n    }\n  },\n  created() {\n    // getViewportSize is provided by getViewportSizeMixin\n    this.viewport = this.getViewportSize();\n    console.log('Component created. Current viewport:', this.viewport);\n    window.addEventListener('resize', () => {\n      this.viewport = this.getViewportSize();\n    });\n  },\n  template: `\n    <div>\n      <h1>{{ message }}</h1>\n      <p>Current Viewport: {{ viewport.width }}px x {{ viewport.height }}px</p>\n      <button @click=\"click\">Click me (via onClick mixin)</button>\n      <p>Open console to see mixin methods in action.</p>\n    </div>\n  `\n});","lang":"javascript","description":"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."},"warnings":[{"fix":"For Vue 3, refactor reusable logic into Composition API composables. If targeting Vue 2, ensure you are using Vue 2.x.","message":"This 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.","severity":"breaking","affected_versions":">=3.0.0 (Vue)"},{"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).","message":"Several 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.","severity":"breaking","affected_versions":">=0.1.0"},{"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).","message":"Some 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.","severity":"deprecated","affected_versions":">=0.1.0"},{"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.","message":"The 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).","severity":"gotcha","affected_versions":"<=0.3.6"},{"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.","message":"This 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.","severity":"gotcha","affected_versions":"<=0.3.6"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"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`).","cause":"Attempting to use CommonJS `require()` syntax in an ES module (ESM) context without proper transpilation or configuration.","error":"ReferenceError: require is not defined"},{"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.","cause":"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.","error":"[Vue warn]: The \"mixins\" option expects an array of mixin objects, but got undefined (for mixin at index X)"},{"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).","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'call')"}],"ecosystem":"npm","meta_description":null}