Vue Mixins Collection

Common errors

• ReferenceError: require is not defined

  cause 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)

  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.
  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')

  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.
  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).

Warnings

• breaking 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.
  Fix: For Vue 3, refactor reusable logic into Composition API composables. If targeting Vue 2, ensure you are using Vue 2.x.
• breaking 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.
  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).
• deprecated 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.
  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).
• gotcha 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).
  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.
• gotcha 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.
  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.

Install

• npm install vue-mixins npm
• yarn add vue-mixins yarn
• pnpm add vue-mixins pnpm

Imports

• onClick
  wrong:

  import { onClick } from 'vue-mixins'

  correct:

  const onClickMixin = require('vue-mixins/onClick')

  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
  wrong:

  import getViewportSize from 'vue-mixins/getViewportSize'

  correct:

  const getViewportSizeMixin = require('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
  wrong:

  const isOpenedMixin = require('vue-mixins/isOpened')

  correct:

  const isOpened2Mixin = require('vue-mixins/isOpened2')

  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.

Quickstart

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>
  `
});