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.
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 */
There is only one prop which is named as date
. Please use ISO-8601
format as YYYY-MM-DDTHH:MM:SS
.
<base-date :date="2020-11-29T01:48:21" />
<template>
...
<base-date :date="2020-11-29T01:48:21" />
...
</template>
<script>
import BaseDate from "@/components/BaseDate.vue"
export default {
components: {
...,
BaseDate
},
...
}
</script>
<span title="Paz, 29 Kas 2020 01:48">2 yıl önce</span>
Everything is the same as above. I used vue-class-component
in my project and props were converted as a class.