Import JS to Vue from node_modules

Question

Forgive my lack of expertise, but I am attempting to integrate and import This Grid System Into my own Vue Setup and Im having some slight trouble. Now, I normally import Plugins like so:

import VuePlugin from 'vue-plugin'

Vue.use(VuePlugin)

and I'm then able to use the components of said plugin globally, however this is not a plugin and I'm having trouble pulling in/importing the needed components into my own components... suggestions?

Answer 1

If you use it via NPM:

First, install:

npm install --save vue-grid-layout

Then "register" it (probably a .vue - or .js - file):

import VueGridLayout from 'vue-grid-layout'

export default {
  ...
  components: {
    'GridLayout': VueGridLayout.GridLayout,
    'GridItem': VueGridLayout.GridItem
  }

If you use it via <script> tag:

Naturally, add it somewhere:

<script src="some-cdn-or-folder/vue-grid-layout.min.js"></script>

And "register" it (propably a .js file or another <script> tag):

var GridLayout = VueGridLayout.GridLayout;
var GridItem = VueGridLayout.GridItem;

new Vue({
    el: '#app',
    components: {
        "GridLayout": GridLayout,
        "GridItem": GridItem
    },

---

And... in your templates

In both cases, you can then use <grid-layout ...></grid-layout> in your template.