Vue grid layout error?

Question

Im trying to use Vue Grid Layout: https://github.com/jbaysolutions/vue-grid-layout in my application (Using Vue2)

I have a "dashboard" component, where I want to use the grid layout, however getting errors when trying to import the files into the component - Im getting the error:

Failed to mount component: template or render function not defined. found in GridLayout

What im doing is importing the components and then registering them:

import GridLayout from 'vue-grid-layout';
import GridItem from 'vue-grid-layout';

And then registering :

components: {
      "GridLayout": GridLayout,
      "GridItem": GridItem
    }

Any ideas why this is not working?

I worked it out, had to do the following: import VueGridLayout from 'vue-grid-layout'; var GridLayout = VueGridLayout.GridLayout; var GridItem = VueGridLayout.GridItem; — hauge

Linus Borg Linus Borg · Accepted Answer · 2017-06-23T09:05:07

You try to import two different named exports from that package. That requires a different syntax:

import { GridLayout } from 'vue-grid-layout';
import { GridItem } from 'vue-grid-layout';

Vue grid layout error?

1 Answers