how use npm packages with Vue SPA

Question

i have created Vuejs app using vue-loader,now i need to use an installed npm package as follow :

   var x = require('package-name')
   Vue.use(x)

but i have this error :

Uncaught TypeError: plugin.apply is not a function

dose Vuejs require a special type packages or it can work with any JavaScript package and this error can be solved

Byrnes

Answer 1

Plugins are specific Vue packages that add global-level functionality to Vue, so if you aren't using a Vue plugin then you don't need to register it with Vue using Vue.use().

In general there isn't any issue using non-vue-specific packages via npm but if you need to register something globally, you can usually get away with simply attaching it to window like so:

window.x = require('package-name');

Plataea

You shouldn't attach to window because it breaks server rendering. Better options detailed here vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins – Shetrit

@smiller171 thanks for sharing link. I have added the detail as answer , in case link doesn't work. – Ripen

Answer 2

There are many approaches.

I am adding with respect @smiller comment and thanks for sharing the link . I am adding information here in case the link someday not work .

Credit to this link :- https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/

First approach of-course @crig_h

window.x = require('package-name') 

There are certain drawback . don’t work with server rendering . Otherwise everything will work fine in browser as window is global to browser , any properties attract to it will be accessible to whole app.

The second approach is .

Use Import with the js portion in the .vue file , Like this.

if inside the '.vue' file.

<script>
import _ from 'lodash';

export default {
  created() {
   console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
  }
} 
</script>

If you have seperate file for .js then same like this there will we no <script> tag.

And Third method

where ever in the project you import vue. You can write this statement import Vue from "vue";

import moment from 'moment';
Object.definePrototype(Vue.prototype, '$moment', { value: moment });

This will set the relevant properties to to Vue . And you can use it any where like this . As Vue is global scope of app.

export default {
  created() {
    console.log('The time is ' . this.$moment().format("HH:mm"));
  }
} 

ADDED FOR CSS

you can do import in src/main.js file in vue.js project .

import './animate.css'

Also if you like to import in template .

Inside the template you can do this.

<style src="./animate.css"></style>

Also have a look on css-loader package . what it does ?

Ripen

what if my package is animate.css, would I still write import animate from 'animate.css'? – Ibby

@AkinHwan I have added css import method in answer too. – Ripen

Hi, there is a typo in your answer. Object.definePrototype => Object.defineProperty. Have a great day. – Overcast

You should probably also add the alternative syntax: Vue.prototype.$something = importedSomething – Overcast

Answer 3

Unfortunately none of these answers worked for me what i ended up doing is

export default {
  computed() {
    x () {
      return require('package-name')
    }
  }
} 

And then use it as x.functionName() or whatever

Wootten

Answer 4

There is better solution ... First import your package in main.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
import Vue from "vue";
import App from "./App.vue";
import "package-name";

After that's you code inside mounted method as javascript

<script>
export default {
   mounted() {
      const any = require("package-name");
      // your code as normal js
   },
};
</script>

Feinberg