{"id":12531,"library":"vue-month-picker","title":"Vue Month Picker","description":"vue-month-picker is a lightweight, dependency-free month picker component designed specifically for Vue 3 applications. Currently at version 2.0.0, it offers robust functionality for selecting single months or month ranges without external dependencies, making it a highly performant choice. The library features full TypeScript support, leveraging Vue's Composition API and `<script setup>` syntax for modern Vue development. Key capabilities include inline and input-driven picker modes, date constraints (`minDate`, `maxDate`), customizable date formatting, a dark theme option, year-only selection, and extensive internationalization with over 45 built-in languages. Its focus on Vue 3 and zero dependencies differentiates it from more general-purpose date pickers.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vue","vue3","month-picker","date-picker","component"],"install":[{"cmd":"npm install vue-month-picker","lang":"bash","label":"npm"},{"cmd":"yarn add vue-month-picker","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-month-picker","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for Vue 3 component.","package":"vue","optional":false}],"imports":[{"note":"This is a named export for the primary inline month picker component.","wrong":"import MonthPicker from 'vue-month-picker'","symbol":"MonthPicker","correct":"import { MonthPicker } from 'vue-month-picker'"},{"note":"This is a named export for the input-field version of the month picker.","wrong":"import MonthPickerInput from 'vue-month-picker'","symbol":"MonthPickerInput","correct":"import { MonthPickerInput } from 'vue-month-picker'"},{"note":"Use `import type` for type-only imports to ensure they are stripped during compilation and for clarity.","wrong":"import { IDateResult } from 'vue-month-picker'","symbol":"IDateResult","correct":"import type { IDateResult } from 'vue-month-picker'"},{"note":"This is the default export, typically used for global plugin registration via `app.use()`.","wrong":"import { VueMonthPicker } from 'vue-month-picker'","symbol":"VueMonthPicker (Plugin)","correct":"import VueMonthPicker from 'vue-month-picker'"}],"quickstart":{"code":"<script setup lang=\"ts\">\nimport { MonthPicker, MonthPickerInput } from 'vue-month-picker'\nimport type { IDateResult } from 'vue-month-picker'\n\nconst onDateChange = (date: IDateResult) => {\n  console.log('Selected Month:', date.month, 'Year:', date.year)\n}\n\nconst onRangeChange = (dateRange: { month: number; year: number }[]) => {\n  console.log('Selected Range:', dateRange)\n}\n</script>\n\n<template>\n  <h3>Inline Month Picker</h3>\n  <MonthPicker @change=\"onDateChange\" />\n\n  <h3>Input Month Picker</h3>\n  <MonthPickerInput\n    :no-default=\"true\"\n    date-format=\"%n %Y\"\n    placeholder=\"Select a month\"\n    @change=\"onDateChange\"\n  />\n\n  <h3>Range Selection Picker</h3>\n  <MonthPicker\n    :range=\"true\"\n    :no-default=\"true\"\n    @change=\"onRangeChange\"\n  />\n</template>","lang":"typescript","description":"Demonstrates local component registration for both inline and input-driven month pickers, including basic usage with event handling and range selection."},"warnings":[{"fix":"Ensure your project is using Vue 3 (version 3.0.0 or higher). For Vue 2 projects, seek alternative month picker libraries or upgrade your Vue version.","message":"This library is exclusively designed for Vue 3 applications. Attempting to use it in a Vue 2 project will lead to compatibility errors and runtime failures.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"When creating Date objects for `minDate`/`maxDate`, subtract 1 from the month number (e.g., `new Date(2024, 0, 1)` for January). For `default-month`, use the standard 1-12 month number.","message":"When defining 'minDate' or 'maxDate' props, ensure you provide a valid JavaScript Date object. Remember that JavaScript Date constructor months are 0-indexed (January is 0), while 'default-month' prop expects a 1-indexed month (January is 1).","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"To start with no selection, use only 'no-default'. To provide an initial selection, omit 'no-default' and set 'default-month' and 'default-year' as desired.","message":"Combining the 'no-default' prop with 'default-month' or 'default-year' can lead to unexpected behavior. 'no-default' explicitly prevents any initial selection.","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":"Ensure you have either imported the component locally (e.g., `import { MonthPicker } from 'vue-month-picker'`) and added it to your component's `components` option (or `<script setup>`), or globally registered the plugin (`app.use(VueMonthPicker)`).","cause":"The component was not properly imported or registered in the Vue application's component options or setup context.","error":"[Vue warn]: Failed to resolve component: MonthPicker"},{"fix":"Add conditional rendering or null checks before accessing properties of the date object returned by the component (e.g., `<p v-if=\"date\">{{ date.month }}</p>`). This is especially relevant when using the `no-default` prop.","cause":"Attempting to access properties of the date result object (e.g., `date.month`) when no month has been selected, and the variable is still `null` or `undefined`.","error":"TypeError: Cannot read properties of undefined (reading 'month')"}],"ecosystem":"npm"}