• Stars
    star
    137
  • Rank 266,121 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Add emoji keyboard to your vuejs project

emoji-vue

πŸ˜€ 😁 πŸ˜‚ 🀣 πŸ˜ƒ πŸ˜„ πŸ˜… πŸ˜† πŸ˜‰ 😊 πŸ˜‹

A Vue.js project implementing a input field addon allowing to add emojis via dropdown.

dependencies status

Install βš™οΈ

npm i emoji-vue --save

emoji-vue preview image

Use πŸ˜ŽπŸ‘ŒπŸ»

import VueEmoji from 'emoji-vue'


//in component def
  methods: {
      onInput(event) {
          //event.data contains the value of the textarea
      },
      clearTextarea(){
        this.$refs.emoji.clear()
      },  
  },
  components: {
    VueEmoji
  }

//in template section
<VueEmoji ref="emoji" @input="onInput" :value="myText" />

Event & properties πŸ“• πŸ“— πŸ“˜ πŸ“™

@input - event generated when content of textarea with emoji selector is changed.

value - property to place initial content of the textarea.

width - sets width of visible textarea in px; defaults to '200px'.

height - sets height of visible textarea in px; defaults to '50px'.

Build Setup 🧠 ❀️ βœ…

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Project uses the following setup: guide and docs for vue-loader.

Check the DEMO

About

Based on code from https://github.com/OneSignal/emoji-picker

Create an issue or ping me on twitter @legkoletat

License

MIT

More Repositories

1

vue-masonry

πŸ’  Vue.js directive for masonry blocks layouting βœ…
JavaScript
673
star
2

vuejs-sound-player

▢️ 🎹 🎡 HTML5 <audio> tag sound player UI for Vue.js - supports single, loop, pause/stop modes etc
JavaScript
178
star
3

vue-styleguide-generator

React inspired style guide generator for Vue.js
JavaScript
122
star
4

vue-terminal-ui

πŸ–₯Terminal UI emulator VueJS component
JavaScript
55
star
5

vue.js-v2-crud-application

Vue.js demo app
HTML
54
star
6

tailor-vue-demo

Using frontend microservices with zalando/tailor and Vue.js as frontend fw
JavaScript
39
star
7

vuejs-content-scroll-progress

Top bar indicating amount of content scrolled
HTML
25
star
8

vue-lorem-ipsum

Lorem ipsum text generator component for vue.js
Vue
15
star
9

vue-preload

Plugin SSR Vue adding <link rel="preload" capabilities
JavaScript
15
star
10

svelte-pwa-chat

SvelteJS + websockets app
HTML
8
star
11

svelte-pwa-chat-backend

Java
6
star
12

ng2-web-cryptography

Module implementing Web Cryptography API for Angular 2
TypeScript
6
star
13

vue-ya-metrica

Yandex.Metrica component for Vue.js
JavaScript
6
star
14

vue-image-colorpicker

Image colours picker (dropper) - using Vue.js
JavaScript
3
star
15

sveltejsnews

[ARCHIVED]
HTML
3
star
16

nest-vs-next-vs-nuxt-vs-sapper

JavaScript
2
star
17

otus-chrome-extension

JavaScript
2
star
18

single-spa-hyperapp

Plugin to include your Hyperapp into single-spa based webpage
JavaScript
2
star
19

vue2-pdfjs-viewer

PDF preview component for Vue.js based on PDF.js
JavaScript
2
star
20

node-express-vite-eureka-kibana

JavaScript
2
star
21

vue3-workshop-demo-2021

Demo files for 'Vue3 practical development' workshop. Find PDF with slides via link below:
JavaScript
2
star
22

vue-starters-directory

List of available starter kits for Vue projects
Vue
2
star
23

svelte-chat-live

HTML
1
star
24

qr-app

JavaScript
1
star
25

quasar-vite-tailwind-storybook

Vue
1
star
26

commonjs-es6-modules-webpack-jest

demo repo to showcase commonjs vs es6 modules; jest; webpack; babel
JavaScript
1
star
27

textarea-moderated

JavaScript
1
star
28

otus-docker-demo

Vue
1
star
29

conf-talks

🎦 πŸ“ˆ Slides, videos and textual content for my meetup and conferences presentations
1
star
30

vue-masonry-plugin-demo

JavaScript
1
star
31

vue-material-url-shortener-example

vue-material demo
JavaScript
1
star
32

cards-game-app

Svelte --> Azure
JavaScript
1
star
33

first-image-search-load

Simple module that loads the first image from Google image search on query
JavaScript
1
star
34

vuejs-3-workshop

1
star
35

otus-vue3-demo-composition-api

CSS
1
star