vue-tribute - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #typescript #android #machine-learning #linux #docker #macos #nodejs #windows #awesome-list #ios #open-source

vue-tribute

(★ 206)

A Vue.js wrapper for Zurb's Tribute library for native @mentions

파일 탐색기

최종 버전 다운로드 (.zip)

- - test.yml
- extensions.json
- launch.json
- app.css
- app.ts
- App.vue
- BasicExample.vue
- ContentEditableExample.vue
- GitHubIcon.vue
- index.html
- TextareaExample.vue
- vue-tribute.es.js
- vue-tribute.umd.js
- - vue-tribute.test.ts
- index.ts
- vue-tribute.ts
.editorconfig
.eslintrc.js
.gitignore
.prettierrc
env.d.ts
index.html
LICENSE
package.json
postcss.config.js
README.md
tailwind.config.js
tsconfig.json
vite.config.ts
vitest.config.ts
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/syropian/vue-tribute

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd vue-tribute

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

$ npm install tributejs vue-tribute@next --save

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

$ yarn add tributejs vue-tribute@next

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vue-tribute [![Tests](https://github.com/syropian/vue-tribute/actions/workflows/test.yml/badge.svg?branch=next)](https://github.com/syropian/vue-tribute/actions/workflows/test.yml)

A tiny Vue.js wrapper around Zurb's Tribute library for ES6 native @mentions.

> 🚦 Looking for Vue 2 support? Check out the [master branch](https://github.com/syropian/vue-tribute).

[View Demo](https://vue-tribute.netlify.app/)

## Install

```bash
$ npm install tributejs vue-tribute@next --save
# or...
$ yarn add tributejs vue-tribute@next
```

_or_

Use the UMD build from [Unpkg](https://unpkg.com/vue-tribute), available as `VueTribute` in the global scope. You will need to include Tribute.js yourself as it is a peer dependency.

```html
<script src="/vendor/vue.js" />
<script src="https://unpkg.com/tributejs" />
<script src="https://unpkg.com/vue-tribute@next" />
```

### Globally

Import and register the module as a plugin.

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import VueTribute from 'vue-tribute'

createApp(App).use(VueTribute).mount('#app')
```

### Per-component

```javascript
import { VueTribute } from 'vue-tribute'

export default {
  components: { VueTribute },
  setup() {
    ...
  },
}
```

## Usage

Wrap a single **text input**, **textarea**, or **contenteditable** element within the `VueTribute` component. You should then pass a [valid Tribute options object](https://github.com/zurb/tribute#initializing) to the component.

```vue
<template>
  <vue-tribute :options="options">
    <input type="text" placeholder="@..." />
  </vue-tribute>
</template>
```

## Events

All [custom Tribute events](https://github.com/zurb/tribute#events) will work as expected. Simply attach listeners for them like you would any other event.

```vue
<template>
  <vue-tribute :options="options">
    <input type="text" placeholder="@..." @tribute-replaced="doSomething" />
  </vue-tribute>
</template>
```

## License

MIT © [Collin Henderson](https://github.com/syropian)