Base Date Component Vue3

Readme.md

Base Date Component for Vue3

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;

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.

/** 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)

<base-date :date="2020-11-29T01:48:21" />

Usage (as imported)

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

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

as a TypeScript Component

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

BaseDate.vue

<template>
  <span :title="humanFriendlyDate">{{ diffForHumans }}</span>
</template>

<script>
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import localizedDate from "dayjs/plugin/localizedFormat";
import tr from "dayjs/locale/tr";
dayjs.extend(relativeTime);
dayjs.extend(localizedDate);
export default {
  props: {
    date: {
      required: true,
      type: String,
    },
  },
  computed: {
    diffForHumans() {
      return dayjs(this.date).locale(tr).fromNow();
    },
    humanFriendlyDate() {
      return dayjs(this.date).locale(tr).format("llll");
    },
  },
};
</script>
<style scoped>
</style>

BaseDateTypeScript.vue

<template>
  <span :title="humanFriendlyDate()">{{ diffForHumans() }}</span>
</template>

<script lang="ts">
import { Vue } from "vue-class-component";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import localizedDate from "dayjs/plugin/localizedFormat";
dayjs.extend(relativeTime);
dayjs.extend(localizedDate);
class Props {
  date!: string;
}

export default class BaseDate extends Vue.with(Props) {
  diffForHumans() {
    return dayjs(this.date).fromNow();
  }
  humanFriendlyDate() {
    return dayjs(this.date).format("llll");
  }
}
</script>