vue-moment icon indicating copy to clipboard operation
vue-moment copied to clipboard

feature: add support for vue v3

Open unstabler opened this issue 4 years ago • 0 comments

CHANGES

  1. migrate filters to App.config.globalProperties.$filters
  2. provide moment, moment-filters via Vue.provide<T>
  3. babelrc: add 'transform-object-rest-spread' plugin'

SYNOPSIS

  • the way to write plugin has changed: https://v3.vuejs.org/guide/plugins.html#writing-a-plugin
  • filters are removed in v3: https://v3.vuejs.org/guide/migration/filters.html#overview
    • so you can use global object like this:
<template>
    <div class="user" v-for="user in users" :key="user.id">
        <h3>{{ user.name }}</h3>
        <h5>last access: {{ $filters.moment(user.lastAccess, "YYYY-MM-DD") || "unknown" }}</h5>
    </div>
</template>
<script lang="ts">
import { defineComponent, watch, inject } from 'vue';
// ...

export default defineComponent({
  // ...
});

</script>
  • or you can use provide / inject pattern https://v3.vuejs.org/guide/component-provide-inject.html#working-with-reactivity
    • like this
<template>
    <div class="user" v-for="user in users" :key="user.id">
        <h3>{{ user.name }}</h3>
        <h5>last access: {{ momentFilter.moment(user.lastAccess, "YYYY-MM-DD") || "unknown" }}</h5>
    </div>
</template>
<script lang="ts">
import { defineComponent, watch, inject } from 'vue';
// ...

export default defineComponent({
  setup() {
    const momentFilters = inject('moment-filters');
    // ...
    return {
      momentFilters,
      users
    };
  }
});

</script>
  1. sorry for my bad english

unstabler avatar Nov 20 '20 11:11 unstabler