# Base Date Component for Vue3
![Vue3](https://img.shields.io/badge/vue-3-green) ![DayJS](https://img.shields.io/badge/requirements-dayjs-blue)

This is a base component for Vue3. We use dayjs (only 2KB) package as a date formatter. We create two different formatted dates. The first one is for humans, the second one is for search robots.

# How to implement Base Components Automatically

Add this code to your ```main.js``` file. You need to set ```createApp``` in a constant like this;
```js
import App from "@/App.vue";
const mainApp = createApp(App);
// You can choose anoter name for your constant.
```
You should add ```Base``` as prefix of your components file's name. And put that components in you components folder.

```js
/** AutoLoad Components start with Base */
const requireComponent = require.context(
  "@/components",
  true,
  /Base[A-Z]\w+\.(vue|js)$/
);
requireComponent.keys().forEach(function (fileName) {
  let baseComponentConfig = requireComponent(fileName);
  baseComponentConfig = baseComponentConfig.default || baseComponentConfig;
  const baseComponentName =
    baseComponentConfig.name ||
    fileName.replace(/^.+\//, "").replace(/\.\w+$/, "");
  mainApp.component(baseComponentName, baseComponentConfig);
});
/** AutoLoad Components start with Base */
```
## Props
There is only one prop which is named as ```date```. Please use ```ISO-8601``` format as ```YYYY-MM-DDTHH:MM:SS```.

### Usage (as Autloaded)
```js
<base-date :date="2020-11-29T01:48:21" />
```

### Usage (as imported)
```js
<template>
...
<base-date :date="2020-11-29T01:48:21" />
...
</template>
<script>
import BaseDate from "@/components/BaseDate.vue"

export default {
  components: {
  ...,
    BaseDate
  },
  ...
}
</script>

```
## Expected Output (with locale as TR)

```html
<span title="Paz, 29 Kas 2020 01:48">2 yıl önce</span>
```

# as a TypeScript Component
![Vue3](https://img.shields.io/badge/vue-3-green) ![DayJS](https://img.shields.io/badge/requirements-dayjs-blue) ![Vue Class Component](https://img.shields.io/badge/requirements-vue--class--component-blue) ![TypeScript](https://img.shields.io/badge/requirements-TypeScript-blue)


Everything is the same as above. I used ```vue-class-component``` in my project and props were converted as a class.