# Installation & Usage

## Requirements

You need to have `stylus` and `stylus-loader` as dev dependencies. You probably already have them if you added Vuetify through their plugin. However, if you don't have them installed, you can do so by doing

```bash
yarn add -D stylus stylus-loader
```

You also need to have `date-fns` for the component to work. It is required for date manipulation, formatting and all things related to dates. It is great because it supports code splitting and tree shaking and adds minimal baggage to the component.

```bash
yarn add date-fns
```

When you install vuetify-daterange-picker, the peer dependencies warning should point that out for you.

## Installation

Version 3.x.x is the latest and is compatible with @vue/cli 3 and latest Vuetify.

```bash
yarn add vuetify-daterange-picker@3
# OR
npm install --save vuetify-daterange-picker@3
```

### Install as a Plugin

This lets you use the component everywhere in your app.

```javascript
// main.js
import VuetifyDaterangePicker from "vuetify-daterange-picker";
import "vuetify-daterange-picker/dist/vuetify-daterange-picker.css";
Vue.use(VuetifyDaterangePicker);
```

### Import in Components

```markup
<script>
import { VDaterange } from "vuetify-daterange-picker"
import "vuetify-daterange-picker/dist/vuetify-daterange-picker.css";
export default {
  components: { VDaterange },
}
</script>
```

## Usage

```markup
<!-- Assuming you have installed as plugin -->
<!-- If you wanna use it in components, 
     please import necessary files as shown above -->
<template>
  <v-daterange v-model="range"></v-daterange>
</template>
<script>
export default {
  components: { VDaterange },
  data() {
    return {
      range: {}
    }
  }
}
</script>
```