CODEWITHSUNDEEP
javascriptvue.jsvuejs3
babis95
babis95

Reputation: 622

How to import Library into Vue3 project

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

Answers (5)

Marcus Ilgner
Marcus Ilgner

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

babis95
babis95

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

Oluwafemi Sule
Oluwafemi Sule

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

Shafqat Jamil Khan
Shafqat Jamil Khan

Reputation: 1037

You can use moment like this in any component.

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

Upvotes: 0

Abregre
Abregre

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

Related Questions