@crtxio/expand

@crtxio/epand is a Nuxt3 layer which provides a Nuxt 3 component which utilizes the transition components of @headlessui/vue to expand a customizable frame to appear on top of your webpage.

Setup

Make sure to install the dependencies:

npm install --save @crtxio/expand

or

yarn add @crtxio/expand

Add the dependency to your extends in nuxt.config:

defineNuxtConfig({
  extends: [
    '@crtxio/expand'
  ]
})

How to use it

Components

<template>
  <Expand :expand="expand" @update-expand="updateExpand">
    <!-- Add your custom Nuxt3 HTML code you want to appear here. -->
  </Expand>
</template>
<script>
  export default {
    data() {
      return {
        expand: false
      }
    },
    methods: {
      updateExpand(newExpandValue) {
        this.expand = newExpandValue;
      }
    }
  }
</script>