{"id":12480,"library":"vue-functions","title":"Vue Functions","description":"This package, `vue-functions` (current stable version 2.0.6, last published in June 2020), provides a collection of utility functions and mixins specifically designed for Vue.js 2 applications. It offers features such as `updatablePropsEvenUnbound` for managing component props, `watchAsync` for watching asynchronous dependencies, reactive `windowSize` access via a mixin, and a `hookHelper` for extending component lifecycle hooks. Due to its foundational reliance on Vue 2's mixin system, it is not directly compatible with Vue 3's Composition API without significant refactoring or the use of Vue's compatibility build. The package's release cadence appears irregular, and its primary utility lies in streamlining common patterns within Vue 2 projects. Vue 2 itself officially reached End-of-Life on December 31st, 2023, making this package primarily relevant for maintaining legacy Vue 2 applications.","status":"maintenance","version":"2.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/phphe/vue-functions","tags":["javascript"],"install":[{"cmd":"npm install vue-functions","lang":"bash","label":"npm"},{"cmd":"yarn add vue-functions","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-functions","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for Vue.js component utilities and mixins, specifically designed for Vue 2.","package":"vue","optional":false}],"imports":[{"note":"The README primarily showcases namespace imports. While individual named exports may be available, `* as vf` is the documented approach.","wrong":"const vf = require('vue-functions')","symbol":"* as vf","correct":"import * as vf from 'vue-functions'"},{"note":"A core mixin for creating locally updatable props that mirror external `v-model` behavior.","symbol":"updatablePropsEvenUnbound","correct":"import { updatablePropsEvenUnbound } from 'vue-functions'"},{"note":"A mixin providing a reactive `windowSize` object to your Vue 2 components.","symbol":"windowSize","correct":"import { windowSize } from 'vue-functions'"}],"quickstart":{"code":"<template>\n  <div>\n    <p>Prop 'initialValue': {{ initialValue }}</p>\n    <p>Local state 'currentValue': {{ currentValue }}</p>\n    <button @click=\"currentValue++\">Increment Local Value</button>\n    <p>Window Inner Width: {{ windowSize.innerWidth }}px</p>\n    <p>Window Inner Height: {{ windowSize.innerHeight }}px</p>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { updatablePropsEvenUnbound, windowSize } from 'vue-functions';\n\nexport default Vue.extend({\n  name: 'MyComponent',\n  // Use updatablePropsEvenUnbound to make 'initialValue' behave like v-model locally\n  mixins: [\n    updatablePropsEvenUnbound({\n      initialValue: { localName: 'currentValue' }, // Maps 'initialValue' prop to 'currentValue' data property\n    }),\n    windowSize, // Provides reactive windowSize object\n  ],\n  props: {\n    initialValue: {\n      type: Number,\n      default: 10,\n    },\n  },\n  data() {\n    return {\n      // currentValue will be initialized from initialValue prop\n      // and can be updated locally without mutating the prop directly.\n      // windowSize is provided by the mixin and is reactive.\n    };\n  },\n  mounted() {\n    console.log('Component mounted. Initial local value:', (this as any).currentValue);\n    console.log('Window size available (innerWidth):', (this as any).windowSize.innerWidth);\n  },\n  watch: {\n    initialValue(newValue: number) {\n      console.log('Prop initialValue changed to:', newValue);\n    },\n    currentValue(newValue: number) {\n      console.log('Local currentValue changed to:', newValue);\n      // You can emit an event here if you want to update the parent component\n      // this.$emit('update:initialValue', newValue);\n    },\n  },\n});\n</script>","lang":"typescript","description":"Demonstrates `updatablePropsEvenUnbound` for managing local state from a prop and the reactive `windowSize` mixin within a Vue 2 component."},"warnings":[{"fix":"Consider migrating to Vue 3 and using a modern utility library like VueUse, which provides similar functionalities adapted for the Composition API.","message":"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.","severity":"breaking","affected_versions":">=2.0.0"},{"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`.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use ES Module `import` syntax instead: `import * as vf from 'vue-functions'`.","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.","error":"SyntaxError: require() of ES Module 'vue-functions' from ... not supported"},{"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).","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.","error":"[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly?"},{"fix":"Ensure `vue-functions` mixins are applied within a valid Vue component definition, for example: `export default Vue.extend({ mixins: [someMixin] })`.","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.","error":"TypeError: Cannot read properties of undefined (reading 'mixins')"}],"ecosystem":"npm"}