# Getting started

# Demo

Checkout the demo pages or to view the demo examples locally, clone the repo and run npm install && npm run serve

# Install

# npm:

npm install @sum.cumo/vue-datepicker --save

# yarn:

yarn add @sum.cumo/vue-datepicker

# old school:

Download the latest release from github

# Usage

<template>
  <DatePicker v-model="date"></DatePicker>
</template>

<script>
import DatePicker from '@sum.cumo/vue-datepicker'
import '@sum.cumo/vue-datepicker/dist/Datepicker.css'

export default {
  name: 'Example',
  components: {
    DatePicker,
  },
  data() {
    return {
      date: new Date(),
    }
  },
}
</script>

To load the CSS you can import it inside the script tag like above. Another option is to use webpacks css-loader (opens new window)

<style>
@import '~@sum.cumo/vue-datepicker/dist/Datepicker.css';
</style>

If you use SASS (opens new window) you can directly import the src file.

<style lang="scss">
@import '~@sum.cumo/vue-datepicker/src/styles/style.scss';
</style>

The esm build is for modern browser and includes ES5 or higher. If you want to use it and want to include own polyfills you need to transpile it within your build process:

vue-cli documentation (opens new window)
nuxt documentation (opens new window). Use build.transpile inside the nuxt.config
babel-loader documentation (opens new window). You need to add the exclude property like this exclude: /node_modules\/(?![@sum.cumo\/vue-datepicker])/

Migration →