Moment js with Vuejs

Question

I try to print out date time using like the following in vue-for     moment   format  MMMM Do YYYY  h mm ss a        but  it does not appear  It s just a blank  How I can try to use moment in vue

User · Answer

I d simply import the moment module  then use a computed function to handle my moment   logic and return a value that s referenced in the template   While I have not used this and thus can not speak on it s effectiveness  I did find https   github com brockpetrie vue-moment for an alternate consideration

User · Answer

plugins moment js  import moment from  moment    moment locale  ru     export default function install  Vue      Object defineProperties Vue prototype         moment          get              return moment                           main js  import moment from    plugins moment js   Vue use moment       use this  moment in your components

User · Answer

In your package json in the  dependencies  section add moment    dependencies        moment     2 15 2             In the component where you would like to use moment  import it    lt script gt  import moment from  moment        And in the same component add a computed property   computed      timestamp  function          return moment this  lt model gt  attributes  created-at    format  YYYY-MM-DD  at  hh mm           And then in the template of this component    lt p gt    timestamp    lt  p gt

User · Answer

Here is an example using a 3rd party wrapper library for Vue called vue-moment   In addition to binding Moment instance into Vue s root scope  this library includes moment and duration filters   This example includes localization and is using ES6 module imports  an official standard  instead of NodeJS s CommonJS module system requires   import Vue from  vue    import moment from  moment   import VueMoment from  vue-moment       Load Locales   en  comes loaded by default  require  moment locale es        Choose Locale moment locale  es     Vue use VueMoment    moment       Now you can use the Moment instance directly in your Vue templates without any additional markup    lt small gt Copyright     moment   year      lt  small gt    Or the filters    lt span gt    3600000   duration  humanize      lt  span gt   lt  --  an hour  -- gt   lt span gt     2   years     duration  add   1   year     duration  humanize      lt  span gt   lt  --  3 years  -- gt

User · Answer

For moment js at Vue 3 npm install moment --save  Then in any component import moment from  moment        export default     created  function          this moment   moment              lt div class  quot comment-line quot  gt       moment new Date    format  DD MM YYYY   amp nbsp   HH mm      lt  div gt

User · Answer

TESTED import Vue from  vue       Vue filter  formatYear    value    gt      if   value  return      return moment value  format  YYYY

User · Answer

global members are not available by default in your  lt template gt  s scope  But you can easily pass them on using computed properties  computed      moment       gt  moment    console       gt  console    window       gt  window    Now you can use any of them in your template  i e  console log moment    window   Note this doesn t add any overhead

User · Answer

vue-moment   very nice plugin for vue project and works very smoothly with the components and existing code   Enjoy the moments        in your main js Vue use require  vue-moment        and use in component    2019-10-03 14 02 22    moment  calendar        or like this   created at   moment  calendar

User · Answer

I made it work with Vue 2 0 in single file component   npm install moment in folder where you have vue installed   lt template gt     lt div v-for  meta in order meta  gt         getHumanDate meta value date        lt  div gt   lt  template gt   lt script gt      import moment from  moment       export default            methods                getHumanDate   function  date                    return moment date   YYYY-MM-DD   format  DD MM YYYY                                   lt  script gt

User · Answer

If your project is a single page application   eg project created by vue init webpack myproject   I found this way is most intuitive and simple   In main js  import moment from  moment   Vue prototype moment   moment   Then in your template  simply use    lt span gt   moment date  format  YYYY-MM-DD     lt  span gt

User · Answer

With your code  the vue js is trying to access the moment   method from its scope   Hence you should use a method like this   methods      moment  function          return moment             If you want to pass a date to the moment js  I suggest to use filters   filters      moment  function  date        return moment date  format  MMMM Do YYYY  h mm ss a            lt span gt    date   moment    lt  span gt     demo

[momentjs] Moment.js with Vuejs

Examples related to momentjs

Examples related to vue.js