Trying to use Moment.js

You get this error because moment is now a variable and not a method anymore! Instead it's better to import moment js on the component itself. This way it will only be loaded where you use it!

For example

// show.vue

<template>

    <div>
        {{ moment.format('Y-m-d') }}
    </div>

</template>

<script>

import moment from 'moment';

export default {

    data () {
        return {
            variable: 'data'
            }
    }

}

</script>

Well you probably get the idea ;)

Also, try to not add the moment module to your component state (the data object) because Vue will observe the entire module, and we don't want that.

Instead, you can use computed properties or simple methods.

Set moment is prototype just like that:

import moment from 'moment';

Vue.prototype.moment = moment;

@BOBBYBOUWMANN - Thanks all, for replies! Did everything as you told me but still getting the same error :(

[Vue warn]: Property or method "moment" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <User> at resources/js/components/users/show.vue
       <VContent>
         <VApp>
           <Root>

Hi, if you want to use moment just to format the dates I usually use a Vue filter like this:

Vue.filter("date", function(value) {
  if (!value) return "";
  return format(new Date(value),"Y-m-D"`)
  );
});

In the template now you can use it like this

<div>{{event.date | date}}</div>

Here in my example i use date-fns which is way smaller than momentjs but the api is similar

BTW, did you run npm run watch ? use computed property , because moment returns a object , you only need some string format.

try this :

<template>
    <div>
        {{ yourYear  }}
    </div>
</template>

<script>

const moment = require('moment')

props: {
    initial : {
        type: Object,
        default: moment
    },          
},

created () {
    this.givenDate = this.initial
},

computed: {
    yourYear () {
        return moment(this.givenDate).format('YYYY')
    }
}
</script>

Then you can give moment any time you want , let moment do the job.

@ANDREA95 - Thanks for the hint but I need moment because I will do some data manipulations later on.

After what @sahibalejandro told not sure if it is a good way but It is working this way

<script>
    export default {
        data:()=>({
            moment: require('moment')
        })
        }
</script>

@abdulaziz Import moment, and then use it in computed properties:

<template>
  <div>
    <p>{{ formattedDate }}</p>
  </div>
</template>

<script>
  import moment from 'moment';

  export default {
    computed: {
      formattedDate() {
        return moment(this.givenDate).format('YYYY');
      }
    },
    //
  }
</script>

Thank you all, you are the best!

@martinbean Are you copying my reply????

where does your this.givenDate come from? Not declared in your code , this is NOT cool , man!

I ended up doing this:

<template>
    <div>
            {{ moment().format('MMM Do YYYY') }}
    </div>
</template>

<script>
  import moment from 'moment';

export default {
      methods:{
        moment(arg) {
             return moment(arg);
         }  
      }
}
</script>

@MaverickChan It wasn’t intentional. I skimmed the thread and replied from my phone this morning on the way to work. Sorry if you think I was copying you.

@MARTINBEAN - right , good excuse , please write your OWN reply next time , don't touch others'

@maverickchan I’ve wrote plenty of replies on this forum. I think if I were a serial “answer-copier” then it’d have been flagged before.

I didn’t “steal” your answer and I’ve apologised.

@MARTINBEAN - yeah , copy only takes you 1 sec.

Level 50 means nothing.

you DID COPY MY REPLY , this thread , that is a fact.

Just my 2c, but I'd personally use the https://www.npmjs.com/package/vue-moment package that gives you access to some useful filters. i.e.

{{ someDate | moment("ddd, hA") }}

Hi, I have a follow-up question about this. I'm using standard blade views in my project and retrieve UTC date/time stamps from the database by e.g. {{ $project->created_at }}. I would like to show them in the local user's time zone. I assume that just replacing {{ formattedDate }} by {{ $project->created_at }} is not going to work. Could you please give me a pointer as to how to go about this?

@ingo1977 Moment.js is a JavaScript framework. If you’re using Blade, you’ll need to use Carbon to format your dates. If you want to show a date in a user’s timezone, then you’ll need to get the user’s timezone preference from somewhere and set that on your date instance:

{{ $project->created_at->setTimezone($user->timezone)->toFormattedDateString() }}

in my case about jalali calendar should import by:

import moment, { now } from "jalali-moment";