Vue Functions

Common errors

• SyntaxError: require() of ES Module 'vue-functions' from ... not supported

  cause Attempting to use CommonJS `require()` syntax in a modern JavaScript module context (ESM) which `vue-functions` is likely bundled as, or when your build system expects ESM.
  fix Use ES Module `import` syntax instead: `import * as vf from 'vue-functions'`.

• [Vue warn]: Unknown custom element: <my-component> - did you register the component correctly?

  cause A Vue component or mixin from `vue-functions` was used without proper global or local registration within a Vue application. This can happen if Vue is not globally available or if components are not declared in `components` option.
  fix Ensure Vue is imported (`import Vue from 'vue'`) and available, and that components/mixins are correctly applied (e.g., using the `mixins` option in a Vue component).

• TypeError: Cannot read properties of undefined (reading 'mixins')

  cause This typically occurs when attempting to use a Vue mixin or component options outside of a properly instantiated Vue component or Vue.extend() call, or if Vue is not correctly set up.
  fix Ensure `vue-functions` mixins are applied within a valid Vue component definition, for example: `export default Vue.extend({ mixins: [someMixin] })`.

Warnings

• breaking Vue 2 reached End-of-Life (EOL) on December 31st, 2023. This package, designed for Vue 2, will likely not receive further updates or critical bug fixes.
  Fix: Consider migrating to Vue 3 and using a modern utility library like VueUse, which provides similar functionalities adapted for the Composition API.
• gotcha This library is fundamentally built on Vue 2's Options API and mixin system. It is not directly compatible with Vue 3's Composition API or `script setup` syntax without significant refactoring or leveraging the `@vue/compat` migration build.
  Fix: For new Vue 3 projects, prefer libraries designed for Vue 3's Composition API. For migrating Vue 2 projects, consult the Vue 3 Migration Guide and consider `@vue/compat`.
• gotcha The `watchAsync` utility has minimal to no official documentation beyond a note to 'check source'. This makes its usage and behavior less predictable and harder to debug without direct code inspection.
  Fix: Thoroughly review the source code of `watchAsync` before relying on it in production. Consider implementing custom asynchronous watchers if its behavior is unclear or insufficient.

Install

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

Imports

• * as vf
  wrong:

  const vf = require('vue-functions')

  correct:

  import * as vf from 'vue-functions'

  The README primarily showcases namespace imports. While individual named exports may be available, `* as vf` is the documented approach.
• updatablePropsEvenUnbound

  import { updatablePropsEvenUnbound } from 'vue-functions'

  A core mixin for creating locally updatable props that mirror external `v-model` behavior.
• windowSize

  import { windowSize } from 'vue-functions'

  A mixin providing a reactive `windowSize` object to your Vue 2 components.

Quickstart

Demonstrates `updatablePropsEvenUnbound` for managing local state from a prop and the reactive `windowSize` mixin within a Vue 2 component.

<template>
  <div>
    <p>Prop 'initialValue': {{ initialValue }}</p>
    <p>Local state 'currentValue': {{ currentValue }}</p>
    <button @click="currentValue++">Increment Local Value</button>
    <p>Window Inner Width: {{ windowSize.innerWidth }}px</p>
    <p>Window Inner Height: {{ windowSize.innerHeight }}px</p>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { updatablePropsEvenUnbound, windowSize } from 'vue-functions';

export default Vue.extend({
  name: 'MyComponent',
  // Use updatablePropsEvenUnbound to make 'initialValue' behave like v-model locally
  mixins: [
    updatablePropsEvenUnbound({
      initialValue: { localName: 'currentValue' }, // Maps 'initialValue' prop to 'currentValue' data property
    }),
    windowSize, // Provides reactive windowSize object
  ],
  props: {
    initialValue: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {
      // currentValue will be initialized from initialValue prop
      // and can be updated locally without mutating the prop directly.
      // windowSize is provided by the mixin and is reactive.
    };
  },
  mounted() {
    console.log('Component mounted. Initial local value:', (this as any).currentValue);
    console.log('Window size available (innerWidth):', (this as any).windowSize.innerWidth);
  },
  watch: {
    initialValue(newValue: number) {
      console.log('Prop initialValue changed to:', newValue);
    },
    currentValue(newValue: number) {
      console.log('Local currentValue changed to:', newValue);
      // You can emit an event here if you want to update the parent component
      // this.$emit('update:initialValue', newValue);
    },
  },
});
</script>