Getting Started - Naive UI

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.

• Naive UI

Installation

Open up a terminal and run the following command:

yarn add @vue-js-cron/naive-ui

or

npm install @vue-js-cron/naive-ui

Then you need to register the component

import '@vue-js-cron/naive-ui/dist/naive-ui.css'

// registers the component globally
// registered name: CronNaive
import CronNaivePlugin from '@vue-js-cron/naive-ui'
app.use(CronNaivePlugin)

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

Done! 🚀

API

CronNaive API

CronNaiveProps API

Example

<template>
  <div>
    <cron-naive v-model="value" @error="error=$event"></cron-naive>
    <div>cron expression: {{value}}</div>
  </div>
</template>

<script>
import { ref } from 'vue';

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