Vue Composables

The composables are a flexible way to integrate Compote into your Vue application using the Composition API.

First, use a ref to get your HTMLElement and pass it to your composable as a first argument.

<script setup lang="ts">
import { useMarquee } from '@compotes/vue'
import { useTemplateRef } from 'vue'
import 'compotes/css/marquee.css'

const marqueeEl = useTemplateRef<HTMLElement>('marqueeEl')
const marquee = useMarquee(marqueeEl)
</script>

As the second argument, you can pass the options of the component.

<script setup lang="ts">
import { useMarquee } from '@compotes/vue'
import { useTemplateRef } from 'vue'
import 'compotes/css/marquee.css'

const marqueeEl = useTemplateRef<HTMLElement>('marqueeEl')
const marquee = useMarquee(marqueeEl, { fill: true })
</script>

In the template, follow the HTML structure required by the underlying component.

<script setup lang="ts">
import { useMarquee } from '@compotes/vue'
import { useTemplateRef } from 'vue'
import 'compotes/css/marquee.css'

const marqueeEl = useTemplateRef<HTMLElement>('marqueeEl')
const marquee = useMarquee(marqueeEl, { fill: true })
</script>

<template>
  <div ref="marqueeEl" class="c-marquee">
    <ul class="c-marquee-container">
      <li>This is the default marquee</li>
      <li>Marquee or marquii</li>
    </ul>
  </div>
</template>

WARNING

Don't forget to import the CSS of the component you want to use!

That's it for the basic Vue composable setup.

Available Composables

Composable	State	Methods
useCollapse(el, options)	instance, isExpanded, isCollapsing	show(), hide(), toggle(), update(), destroy()
useDrag(el, options)	instance, isDragging, isDraggable	destroy()
useDrilldown(el, options)	instance, level, currentMenuId	update(reloadItems?), back(), reset(), destroy()
useDropdown(el, options)	instance, isOpen, type	open(), close(), toggle(), update(), equalizeWidth(), destroy()
useMarquee(el, options)	instance, isPaused	play(), pause(), update(fill?), destroy()

Methods

You can access the component methods through the composable. They will be available after the onMounted lifecycle hook. For advanced usage, instance gives access to the underlying Compotes class instance. Here is an example with the marquee component with a simple play/pause implementation.

<script setup lang="ts">
import { useMarquee } from '@compotes/vue'
import { useTemplateRef } from 'vue'
import 'compotes/css/marquee.css'

const marqueeEl = useTemplateRef<HTMLElement>('marqueeEl')
const marquee = useMarquee(marqueeEl, { fill: true })
</script>

<template>
  <button @click="marquee.pause()">
    Pause
  </button>
  <button @click="marquee.play()">
    Play
  </button>
  <div ref="marqueeEl" class="c-marquee">
    <ul class="c-marquee-container">
      <li>This is the default marquee</li>
      <li>Marquee or marquii</li>
    </ul>
  </div>
</template>

State

All the component state properties are reactive after the onMounted lifecycle hook. You can use them directly in templates and <script setup>. If you need a ref, use toRef on the returned object.

useCollapse

State	Type	Description
instance	Collapse | null	The underlying Compotes Collapse instance
isExpanded	boolean	Whether the collapse is currently expanded
isCollapsing	boolean	Whether the collapse is currently animating

useDrag

State	Type	Description
instance	Drag | null	The underlying Compotes Drag instance
isDragging	boolean	Whether the element is currently being dragged
isDraggable	boolean	Whether the element is draggable (updates on resize)

useDrilldown

State	Type	Description
instance	Drilldown | null	The underlying Compotes Drilldown instance
level	number	The current navigation depth level
currentMenuId	string | null	The ID of the currently active menu

useDropdown

State	Type	Description
instance	Dropdown | null	The underlying Compotes Dropdown instance
isOpen	boolean	Whether the dropdown is currently open
type	'default' | 'menu'	The current type of the dropdown

useMarquee

State	Type	Description
instance	Marquee | null	The underlying Compotes Marquee instance
isPaused	boolean	Whether the marquee is currently paused

Here is an example to show the current status of the marquee component.

<script setup lang="ts">
import { useMarquee } from '@compotes/vue'
import { useTemplateRef } from 'vue'
import 'compotes/css/marquee.css'

const marqueeEl = useTemplateRef<HTMLElement>('marqueeEl')
const marquee = useMarquee(marqueeEl, { fill: true })
</script>

<template>
  <div>{{ marquee.isPaused ? 'Paused' : 'Playing' }}</div>
  <div ref="marqueeEl" class="c-marquee">
    <ul class="c-marquee-container">
      <li>This is the default marquee</li>
      <li>Marquee or marquii</li>
    </ul>
  </div>
</template>

Events

Events are automatically handled by the composables. The reactive state is kept in sync with the underlying component by listening to its events, so you don't need to manually subscribe — simply use the reactive state properties provided by each composable.

If you need to listen to events directly, you can access them through the instance property:

<script setup lang="ts">
import { useMarquee } from '@compotes/vue'
import { useTemplateRef, watchEffect } from 'vue'
import 'compotes/css/marquee.css'

const marqueeEl = useTemplateRef<HTMLElement>('marqueeEl')
const marquee = useMarquee(marqueeEl, { fill: true })

watchEffect((onCleanup) => {
  if (!marquee.instance?.el)
    return

  const handler = () => console.log('Marquee started playing!')
  marquee.instance.el.addEventListener('c.marquee.play', handler)

  onCleanup(() => {
    marquee.instance?.el?.removeEventListener('c.marquee.play', handler)
  })
})
</script>

For a list of available events for each component, refer to their respective documentation pages.