# AMLL for Vue

English / [简体中文](./README-CN.md)

> Warning: This is a personal project and is still under development. There may still be many issues, so please do not use it directly in production environments!

![AMLL-Vue](https://img.shields.io/badge/Vue-%2342d392?label=Apple%20Music-like%20Lyrics&labelColor=%23FB5C74)
[![npm](https://img.shields.io/npm/dt/%40applemusic-like-lyrics/vue)](https://www.npmjs.com/package/@applemusic-like-lyrics/vue)
[![npm](https://img.shields.io/npm/v/%40applemusic-like-lyrics%2Fvue)](https://www.npmjs.com/package/@applemusic-like-lyrics/vue)

Vue binding for the AMLL component library, which allows you to use AMLL lyric components more conveniently.

For more details, please visit [Core component README.md](../core/README.md).

## Installation

Install the required dependencies (if the dependencies listed below are not installed, you need to install them yourself):
```bash
npm install @pixi/app @pixi/core @pixi/display @pixi/filter-blur @pixi/filter-bulge-pinch @pixi/filter-color-matrix @pixi/sprite jss jss-preset-default # using npm
yarn add @pixi/app @pixi/core @pixi/display @pixi/filter-blur @pixi/filter-bulge-pinch @pixi/filter-color-matrix @pixi/sprite jss jss-preset-default # using yarn
```

Install the dependencies required for Vue binding (if the dependencies listed below are not installed, you need to install them yourself):
```bash
npm install vue # using npm
yarn add vue # using yarn
```

Install the framework:
```bash
npm install @applemusic-like-lyrics/vue # using npm
yarn add @applemusic-like-lyrics/vue # using yarn
```

## Usage Summary

For detailed API documentation, please refer to [AMLL Docs](https://amll.dev/en/reference/vue.html).

A test program can be found in [../playground/vue/src/test.ts](../playground/vue/src/test.ts).

```vue
<tamplate>
    <LyricPlayer :lyric-lines="[]" :current-time="0" />
</tamplate>

<script setup lang="ts">
import { LyricPlayer } from "@applemusic-like-lyrics/vue";

</script>
```