Installation

Using pnpm (Recommended):

pnpm i grid-layout-plus

Using yarn:

yarn add grid-layout-plus

Import

Globally import:

import { GridLayout, GridItem } from 'grid-layout-plus'

app
  .component('GridLayout', GridLayout)
  .component('GridItem', GridItem)

Import in a component:

<script setup lang="ts">
import { GridLayout, GridItem } from 'grid-layout-plus'
</script>

<script lang="ts">
import { defineComponent } from 'vue'
import { GridLayout, GridItem } from 'grid-layout-plus'

export default defineComponent({
  components: {
    GridLayout,
    GridItem
  }
})
</script>

Browser

Include the browser-ready bundle (download from releases) in your page.

<script src="dist/grid-layout-plus.js"></script>

Additional Imports

GridLayout and GridItem are the main components. Other features need to be imported explicitly.

Note: GridBackground is NOT included in the default registration. You must import it manually.

import {
  // Components
  GridBackground,

  // Compactors
  verticalCompactor,
  horizontalCompactor,
  noCompactor,
  withOverlap,

  // Position strategies
  transformStrategy,
  absoluteStrategy,
  scaledStrategy,

  // Composables
  useGridLayout,
  useContainerWidth,
  useResponsiveLayout,
} from 'grid-layout-plus'