Getting Started #

Overview #

Zoom Avant (pronounced /zum a.vɑ̃/) is a drilldown component for VueJS 3 and Nuxt 3. Why ? This was not available on the internet and I needed one for a project at my company.

The drilldown is inspired by the Foundation Drilldown (an old css/js framework if you don't know about it).

Zoom Avant is mainly focus to be very customizable, accessible (respect ARIA Menu pattern) and flexible to cover all the use case you need a drilldown component (especially a mobile menu).

Browser support #

Zoom Avant uses modern API to work like ResizableObserver, MutationObserver or :scope selector.

No support for IE11 is planned.

Installation #

Vue #

1. Install the library with your favorite package manager

npm i -D @zoom-avant/vue

# yarn
yarn add -D @zoom-avant/vue

# pnpm
pnpm add -D @zoom-avant/vue

2. Import manually the components or globally import via plugin installation

<script setup lang="ts">
import { ZAvant, ZAvantMenu, ZAvantItem } from '@zoom-avant/vue'
import '@zoom-avant/vue/css'
</script>

3. That's it, see the usage page to continue your journey.

or

import { ZAvantPlugin } from '@zoom-avant/vue'
import { createApp } from 'vue'

const app = createApp({})

app.use(ZAvantPlugin)

Nuxt #

1. Install the library with your favorite package manager

npm i -D @zoom-avant/nuxt

# yarn
yarn add -D @zoom-avant/nuxt

# pnpm
pnpm add -D @zoom-avant/nuxt

2. In your nuxt.config.ts, add the @zoom-avant/nuxt in the modules array.

export default defineNuxtConfig({
  modules: ['@zoom-avant/nuxt']
})

3. That's it, see the usage page to continue your adventure.
   After that, don't forget to consult Nuxt page which details the module.

Credits #

• Foundation Drilldown
• Aria Pattern Menu
• Anu and Pinia packages for the inspiration