Getting started

Installation

pnpm add vuepg@^1.2.2

Register and configure the plugin

// main.js
import vuEPG, { useVuEPG } from "vuepg";

const epg = useVuEPG();
epg.setConfig({
  debug: true,
});

app.use(vuEPG);
// Vue.use(vuEPG) vue@2

Access the instance

useVuEPG()

<script setup>
import { useVuEPG } from "vuepg";

const epg = useVuEPG();

// epg.xxxx
</script>

inject

Vue 3 provides the instance through provide.

WARNING

• This injection is unavailable in Vue 2.
• The injected object lacks key-action methods such as setAction; use useVuEPG() for them.

<script setup>
const epg = inject("epg");

// epg.xxxx
</script>

Default focus class

Define a global class to make focus visible. You can customize it later.

.vuepg-focus {
  background: red;
}

Basic usage

<template>
  <div v-epg-group>
    <div v-epg-item ref="top">Top</div>
    <div v-epg-group>
      <div v-epg-item>item1</div>
      <div v-epg-item>item2</div>
      <div v-epg-item @up="epg.move(top)">item3</div>
    </div>
  </div>
</template>

<script setup>
import { useVuEPG } from "vuepg";
import { ref, onMounted } from "vue";
const epg = useVuEPG();

const top = ref();

onMounted(() => {
  epg.move(top.value);
});
</script>