{"id":25136,"library":"cron-expression-input","title":"Cron Expression Input","description":"A Vue.js UI component that provides an intuitive editor for generating and validating cron expressions. v1.3.1 is current; updates are infrequent. Supports standard 5-field cron syntax with dropdowns and free-text input. Differentiator: built-in validation with human-readable feedback, localization support, and no external runtime dependencies beyond Vue 3.","status":"active","version":"1.3.1","language":"javascript","source_language":"en","source_url":"https://github.com/JossyDevers/cron-expression-input","tags":["javascript","cron","crontab","validate","expression","crontab guru","ui","editor","generator"],"install":[{"cmd":"npm install cron-expression-input","lang":"bash","label":"npm"},{"cmd":"yarn add cron-expression-input","lang":"bash","label":"yarn"},{"cmd":"pnpm add cron-expression-input","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency - component requires Vue 3","package":"vue","optional":false}],"imports":[{"note":"ESM default export. CommonJS require may not work in all environments.","wrong":"const CronExpressionInput = require('cron-expression-input')","symbol":"CronExpressionInput","correct":"import CronExpressionInput from 'cron-expression-input'"},{"note":"Named import is incorrect; component is default export. Use app.use() to register globally.","wrong":"import { CronExpressionInput } from 'cron-expression-input'","symbol":"default (Vue plugin)","correct":"import CronExpressionInput from 'cron-expression-input'; app.use(CronExpressionInput)"},{"note":"TypeScript types are bundled; no separate type import needed.","wrong":"import type CronExpressionInput from 'cron-expression-input'","symbol":"type definitions","correct":"import CronExpressionInput from 'cron-expression-input'"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <cron-expression-input\n      :disabled=\"false\"\n      @change=\"onChange\"\n      expression=\"0 0 * * *\"\n      language=\"en\"\n    />\n  </div>\n</template>\n\n<script>\nimport { defineComponent, ref } from 'vue'\nimport CronExpressionInput from 'cron-expression-input'\n\nexport default defineComponent({\n  name: 'App',\n  components: { CronExpressionInput },\n  setup() {\n    const expression = ref('0 0 * * *')\n    const onChange = (newVal) => {\n      expression.value = newVal\n      console.log('Expression:', newVal)\n    }\n    return { expression, onChange }\n  }\n})\n</script>","lang":"typescript","description":"Shows basic usage of the CronExpressionInput component with binding to a cron expression string and change event."},"warnings":[{"fix":"Use a different library if you need seconds or year support.","message":"The component only supports standard 5-field cron (minute, hour, day of month, month, day of week). 6-field (with seconds) or 7-field (with year) are not supported.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Ensure the initial expression prop is a valid cron pattern.","message":"The `expression` prop must be a valid cron string. Passing an invalid string will throw a validation error inside the component.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Use `:expression=\"val\" @change=\"val = $event\"` instead.","message":"Component previously accepted `v-model` directly; now requires `expression` prop and `@change` event for two-way binding.","severity":"deprecated","affected_versions":">=1.2"},{"fix":"Upgrade to Vue 3 or stick with version 1.2.x for Vue 2.","message":"Version 1.3 removed support for Vue 2. Only Vue 3 is supported.","severity":"breaking","affected_versions":">=1.3"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run `npm install cron-expression-input` or `yarn add cron-expression-input`.","cause":"Package not installed or not found in node_modules.","error":"Cannot find module 'cron-expression-input'"},{"fix":"Use `import CronExpressionInput from 'cron-expression-input'` instead of `import { CronExpressionInput } from 'cron-expression-input'`.","cause":"Importing component incorrectly (e.g., named import instead of default).","error":"Failed to mount component: template or render function not defined"},{"fix":"Use `expression` prop and `@change` event instead of v-model.","cause":"Attempting to use v-model on component in version 1.2+ without proper props/events.","error":"TypeError: Cannot read property 'expression' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}