Getting Started - Element Plus

The fastest way to get started, is to use one of the prebuilt components.

cron-core - renderless cron editor
cron-light - lightweight cron editor without external dependencies
cron-ant - cron editor for Ant Design Vue
cron-element-plus - cron editor for Element Plus
cron-naive - cron editor for Naive UI
cron-prime - cron editor for PrimeVue
cron-quasar - cron editor for Quasar
cron-vuetify - cron editor for Vuetify.js

Requirements

Make sure to install and setup all requirements.

Element Plus

Installation

Open up a terminal and run the following command:

yarn add @vue-js-cron/element-plus

npm install @vue-js-cron/element-plus

Then you need to register the component

import '@vue-js-cron/element-plus/dist/element-plus.css'

// registers the component globally
// registered name: CronElementPlus
import CronElementPlusPlugin from '@vue-js-cron/element-plus'
app.use(CronElementPlusPlugin)

// alternatively you can also register the component yourself
// https://vuejs.org/guide/components/registration.html
import { CronElementPlus } from '@vue-js-cron/element-plus'
app.component('CronElementPlus', CronElementPlus)

Done! 🚀

API

CronElementPlus API

CronElementPlusProps API

Example

<template>
  <div>
    <cron-element-plus
      v-model="value"
      :button-props="{ type: 'primary' }"
      @error="error = $event"
    />

    <p class="text-lightest pt-2">cron expression: {{ value }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '* * * * *',
      error: '',
    }
  },
}
</script>