vue-moment issue in laravel-inertia

user_13916843 0
Viewed 672

I tried importing vue-moment and initializing it by using .use(VueMoment) as shown below. But after i do that the whole app shows error. Anyone facing the same problem?

    require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import VueMoment from 'vue-moment' ////////imported vue-moment

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({
        methods: {
            route,
            validationError(field){
                if(this.$page.props.errors && this.$page.props.errors[field]){
                    return this.$page.props.errors[field];
                }
                else{
                    return null;
                }
            }
    } })
    .use(InertiaPlugin)
    .use(VueMoment) /////use vue-moment
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

This is the error i am getting

momentjs inertiajs laravel vue.js
3 Answers

first install moment by

npm install moment

<template>
{{today}}
</template>
<script>
import   moment from 'moment'
export default {
 name:'Home',
 data(){
  return{
  today:moment().startOf('day').toDate(), moment().endOf('day').toDate() 
}
}
</script>
user_156021390

there is a working example of how to import 'vue-moment' from my Laravel + inertia project

const vm = new Vue({
  metaInfo: {
    titleTemplate: title => (title ? `${title} - Ping CRM` : 'Ping CRM'),
  },
  store,
  render: h =>
    h(App, {
      props: {
        initialPage: JSON.parse(el.dataset.page),
        resolveComponent: name => import(`@/Pages/${name}`).then(module => module.default),
      },
    }),
}).$mount(el)

Vue.use(require('vue-moment'))
user_121592760

Might help someone who is using InertiaJs with Vue and want to declare globally.

In app.js

createInertiaApp({
id: 'app',
setup({ el, App, props}) {
    let app = createApp({
        render: () => {
            return h(App, props);
        },
    });

    //you can declare any other variable you want like this
    app.config.globalProperties.$moment = moment;
    app.use(
        store,
        .....
    ).mount(el);
},
});

Now in the vue file you can call moment by

this.$moment(this.time,'H:m').format('hh:mm a');
user_47035300
Related