Getting Started
The fastest way to get started, is to install one of the prebuilt components. For now vue-js-cron
provides the following prebuilt components:
- cron-light - a lightweight cron editor without external dependencies
- cron-vuetify - a cron editor for Vuetify.js.
- cron-element-plus - cron editor for Element Plus
If you would like to use a different UI framework, follow the quick start guide on how to use the renderless component.
Light
Installation
Open up a terminal and run the following command:
yarn add @vue-js-cron/light@next
or
npm install @vue-js-cron/light@next
Then you need to register vue-js-cron/light
with app.use()
import cronLight from '@vue-js-cron/light'
import '@vue-js-cron/light/dist/light.css'
app.use(cronLight)
Now you can use the cron-light
component.
Example
<template>
<div class="pt-2">
<cron-light v-model="value" @error="error=$event"></cron-light>
<div class="text-lightest pt-2">cron expression: {{value}}</div>
</div>
</template>
<script>
export default {
data () {
return {
value: '* * * * *',
error: ''
}
}
}
</script>
Result:
API
Vuetify
Requirements
Installation
Open up a terminal and run the following command:
yarn add @vue-js-cron/vuetify@next
or
npm install @vue-js-cron/vuetify@next
Then you need to register vue-js-cron/vuetify
with app.use()
import cronVuetify from '@vue-js-cron/vuetify'
import '@vue-js-cron/vuetify/dist/vuetify.css'
app.use(cronVuetify)
Now you can use the cron-vuetify
component.
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>
Result:
API
Element Plus
Requirements
Installation
Open up a terminal and run the following command:
yarn add @vue-js-cron/element-plus@next
or
npm install @vue-js-cron/element-plus@next
Then you need to register @vue-js-cron/element-plus
with app.use()
import cronElementPlus from '@vue-js-cron/element-plus'
import '@vue-js-cron/element-plus/dist/element-plus.css'
app.use(cronElementPlus)
Now you can use the cron-element-plus
component.
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>
Result:
cron expression: * * * * *
API
Ant
Requirements
Installation
Open up a terminal and run the following command:
yarn add @vue-js-cron/ant@next
or
npm install @vue-js-cron/ant@next
Then you need to register @vue-js-cron/ant
with app.use()
import cronAnt from '@vue-js-cron/ant'
import '@vue-js-cron/ant/dist/ant.css'
app.use(cronAnt)
Now you can use the cron-ant
component.
Example
<template>
<div>
<cron-ant
v-model="value"
:button-props="{ type: 'primary', shape: 'round', style: {backgroundColor: '#0277BD'} }"
@error="error=$event" />
<p class="text-lightest pt-2">cron expression: {{value}}</p>
</div>
</template>
<script>
export default {
data () {
return {
value: '* * * * *',
error: ''
}
}
}
</script>
Result:
cron expression: * * * * *
API
Renderless
This guide will explain how to use the renderless component of vue-js-cron. In this example Vuetify will be used to render the component, but you should be able to follow along using any UI framework.
Installation
First open up a terminal and run the following command:
yarn add @vue-js-cron/core@next
or
npm install @vue-js-cron/core@next
Then you need to register vue-js-cron/core
with Vue.app()
import cronCore from '@vue-js-cron/core'
Vue.use(cronCore)
Now you can use the cron-core
component. The default slot of cron-core
provides the following props:
fields
- each field corresponds to one position in the cron expression. Default fields: month, day, day of week, hour and minute.period
- defines which fields are visibleerror
- error message
Example
<template>
<div>
<cron-core v-model="value" v-slot="{fields, period, error}">
<div>
<!-- period selection -->
{{period.prefix}}
<v-chip>
{{period.attrs.modelValue}}
<v-menu activator="parent">
<v-list>
<v-list-item v-for="item in period.items" :key="item.id" @click="period.events['update:model-value'](item.id)">
{{item.text}}
</v-list-item>
</v-list>
</v-menu>
</v-chip>
{{period.suffix}}
<!-- cron expression fields -->
<template v-for="f in fields" :key="f.id">
{{f.prefix}}
<v-chip>
{{f.selectedStr}}
<v-menu activator="parent" :close-on-content-click="false">
<!-- list of field items -->
<v-list :selected="f.attrs.modelValue" @update:selected="f.events['update:model-value']" select-strategy="multiple">
<v-list-item v-for="item in f.items" :value="item.value" :key="item.value">
{{item.text}}
</v-list-item>
</v-list>
</v-menu>
</v-chip>
{{f.suffix}}
</template>
<!-- editable cron expression -->
<v-text-field
class="mt-4"
:modelValue="value"
@update:model-value="nextValue = $event"
@blur="value = nextValue"
label="cron expression"
:error-messages="error" />
</div>
</cron-core>
</div>
</template>
<script>
export default {
data () {
const value = '* * * * *'
return {
value,
nextValue: value
}
},
methods: {
}
}
</script>
Result: