Getting Started - Vuetify

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-quasar - cron editor for Quasar
• cron-vuetify - cron editor for Vuetify.js

Requirements

Make sure to install and setup all requirements.

• Vuetify

Installation

Open up a terminal and run the following command:

yarn add @vue-js-cron/vuetify

or

npm install @vue-js-cron/vuetify

Then you need to register the component

import '@vue-js-cron/vuetify/dist/vuetify.css'

// registers the component globally
// registered name: CronVuetify
import CronVuetifyPlugin from '@vue-js-cron/vuetify'
app.use(CronVuetifyPlugin)

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

Done! 🚀

API

CronVuetify API

CronVuetifyProps API

Example

<template>
  <div>

    <cron-vuetify
      v-model="value"
      :chip-props="{ color: 'success', textColor: 'white' }"
      @error="error=$event" />

    <!-- editable cron expression -->
    <v-text-field
      class="pt-3"
      :modelValue="value"
      @update:model-value="nextValue = $event"
      @blur="value = nextValue"
      label="cron expression"
      :error-messages="error" />

  </div>
</template>

<script>
export default {

  props: {
    init: {
      type: String,
      default: '* * * * *'
    }
  },

  data () {
    return {
      value: this.init,
      nextValue: this.init,
      error: ''
    }
  }
}
</script>