could someone help me import a library to my vue3 project so that I can use it in all ponents?...

I'am trying to import 'moments.js' to my project

• Its installed with npm
• in my 'main.js' (entry) I import it like:

import { createApp } from "vue"
import App from "./App.vue"
import moment from "moment"
const app = createApp(App)
app.use (moment)
app.mount("#app")

but when I try to console.log(this.moment) from another ponent I get errors that this.moment is not a function

could someone help me import a library to my vue3 project so that I can use it in all ponents?...

I'am trying to import 'moments.js' to my project

• Its installed with npm
• in my 'main.js' (entry) I import it like:

import { createApp } from "vue"
import App from "./App.vue"
import moment from "moment"
const app = createApp(App)
app.use (moment)
app.mount("#app")

but when I try to console.log(this.moment) from another ponent I get errors that this.moment is not a function

• javascript
• vue.js
• vuejs3

Share Improve this question Follow asked Aug 6, 2021 at 12:57 babis95babis95 62211 gold badge88 silver badges3232 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You can bind moment as a global property on the Vue instance by during the created lifecycle hook in the like manner.

const { createApp } = require('vue');
import App from "./App.vue";
import moment from 'moment';

const MomentPlugin = function (Vue, options) {
  Vue.mixin({
    created: function () {
      this.moment = moment
    }
  })
}

const app = createApp(App)
app.use(MomentPlugin).mount("#app");

moment function is then available in template context or anywhere the Vue instance is available in scope.

For anyone stumbling onto this post. I changed the code to:

import { createApp } from "vue"
import App from "./App.vue"
import moment from "moment"
const app = createApp(App)
app.provide("moment", moment)
app.mount("#app")

inside other ponents:

export default {
   inject: ["moment"],
// Other code can now use "moment"
}

I would try using this package https://www.npmjs./package/vue-moment as it is vue-specific. It is a wrapper for moment. Check the Readme file also for instructions. https://github./brockpetrie/vue-moment

import Vue from 'vue'
import VueMoment from "vue-moment"
Vue.use(VueMoment));

Your case

import { createApp } from "vue"
import App from "./App.vue"
import VueMoment from "vue-moment"
const app = createApp(App)
app.use (VueMoment)
app.mount("#app")

You can use moment like this in any ponent.

methods: {
  moment: function () {
    return moment();
  }
},

app.use() is for adding Vue plugins to the app. It should be possible to convert Moment.js to a plugin - see "Writing a plugin" in the documentation but it shouldn't be necessary.

You can just import moment.js in any ponent where you want to use it and the bundling process will make sure that the code is not duplicated anywhere.