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?

acdcjunior · Accepted Answer · 2018-02-26 19:52:27Z

8

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.

answered Feb 26, 2018 at 19:52

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Durand Over a year ago

thanks, that did it. however i was wondering, is there anyway to make the component definition cleaner by doing something like import VueGridLayout.GridLayout as GridLayout from 'vue-grid-layout' and then defining it in my components as just components: { GridLayout, ... }

acdcjunior Over a year ago

I don't think so, because I'm assuming the VueGridLayout is the default import, and you can't destructure those. You could declare a const GridLayout = VueGridLayout.GridLayout, but I believe that's what you are trying to run away from...

Collectives™ on Stack Overflow

Import JS to Vue from node_modules

1 Answer 1

If you use it via NPM:

If you use it via `<script>` tag:

And... in your templates

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

If you use it via NPM:

If you use it via <script> tag:

And... in your templates

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

If you use it via `<script>` tag: