Reputation: 622
could someone help me import a library to my vue3 project so that I can use it in all components?...
I'am trying to import 'moments.js' to my project
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 component I get errors that this.moment
is not a function
Upvotes: 1
Views: 5878
Reputation: 7241
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 component where you want to use it and the bundling process will make sure that the code is not duplicated anywhere.
Upvotes: 0
Reputation: 622
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 components:
export default {
inject: ["moment"],
// Other code can now use "moment"
}
Upvotes: 2
Reputation: 38992
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.
Upvotes: 2
Reputation: 1037
You can use moment like this in any component.
methods: {
moment: function () {
return moment();
}
},
Upvotes: 0
Reputation: 480
I would try using this package https://www.npmjs.com/package/vue-moment as it is vue-specific. It is a wrapper for moment. Check the Readme file also for instructions. https://github.com/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")
Upvotes: 0