Cron Expression Input

1.3.1 verified Fri May 01 auth: no javascript

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.

Common errors

error Cannot find module 'cron-expression-input' ↓

cause Package not installed or not found in node_modules.

fix

Run npm install cron-expression-input or yarn add cron-expression-input.

error Failed to mount component: template or render function not defined ↓

cause Importing component incorrectly (e.g., named import instead of default).

fix

Use import CronExpressionInput from 'cron-expression-input' instead of import { CronExpressionInput } from 'cron-expression-input'.

error TypeError: Cannot read property 'expression' of undefined ↓

cause Attempting to use v-model on component in version 1.2+ without proper props/events.

fix

Use expression prop and @change event instead of v-model.

Warnings

gotcha 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. ↓

fix Use a different library if you need seconds or year support.

gotcha The `expression` prop must be a valid cron string. Passing an invalid string will throw a validation error inside the component. ↓

fix Ensure the initial expression prop is a valid cron pattern.

deprecated Component previously accepted `v-model` directly; now requires `expression` prop and `@change` event for two-way binding. ↓

fix Use `:expression="val" @change="val = $event"` instead.

breaking Version 1.3 removed support for Vue 2. Only Vue 3 is supported. ↓

fix Upgrade to Vue 3 or stick with version 1.2.x for Vue 2.

Install

npm install cron-expression-input

yarn add cron-expression-input

pnpm add cron-expression-input

Imports

CronExpressionInput

wrong

const CronExpressionInput = require('cron-expression-input')

correct

import CronExpressionInput from 'cron-expression-input'

ESM default export. CommonJS require may not work in all environments.

default (Vue plugin)

wrong

import { CronExpressionInput } from 'cron-expression-input'

correct

import CronExpressionInput from 'cron-expression-input'; app.use(CronExpressionInput)

Named import is incorrect; component is default export. Use app.use() to register globally.

type definitions

wrong

import type CronExpressionInput from 'cron-expression-input'

correct

import CronExpressionInput from 'cron-expression-input'

TypeScript types are bundled; no separate type import needed.

Quickstart

Shows basic usage of the CronExpressionInput component with binding to a cron expression string and change event.

<template>
  <div id="app">
    <cron-expression-input
      :disabled="false"
      @change="onChange"
      expression="0 0 * * *"
      language="en"
    />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import CronExpressionInput from 'cron-expression-input'

export default defineComponent({
  name: 'App',
  components: { CronExpressionInput },
  setup() {
    const expression = ref('0 0 * * *')
    const onChange = (newVal) => {
      expression.value = newVal
      console.log('Expression:', newVal)
    }
    return { expression, onChange }
  }
})
</script>