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