:bookmark: Vue.js 2.0 Input Tag Component

Overview

vue-input-tag

A Vue.js 2.0 input tag component inspired in react-tagsinput

Codeship Status for matiastucci/vue-input-tag Coverage Status Version License Monthly Downloads

Logo

Installation

NPM / Yarn

npm install vue-input-tag --save
yarn add vue-input-tag

Then you need to import and register it:

import InputTag from 'vue-input-tag'
Vue.component('input-tag', InputTag)

CDN

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-input-tag"></script>

Then you need to register it:

Vue.component('input-tag', vueInputTag.default)

Usage

<input-tag v-model="tags"></input-tag>

Props

Name Type Default Description
value Array [] Tags to be render in the input
placeholder String "" Placeholder to be shown when no tags
read-only Boolean false Set input to readonly
add-tag-on-blur Boolean false Add tag on input blur
limit String or Number -1 (none) Set a limit for the amount of tags
validate String or Function (allows async) or Object "" Apply certain validator for user input. Choose from email, url, text, digits or isodate. Or pass a function or a RegExp object for custom validation
add-tag-on-keys Array [ 13 (return), 188 (comma), 9 (tab) ] Keys that are going to add the new tag
allow-duplicates Boolean false Allow duplicate tags
before-adding Function null Function (allows async) to normalize tag before adding. E.g (tag) => tag.toUpperCase()

Events

Name Arguments Description
input Array with tags Emitted when a tag is added (after successful validation) and when a tag is removed
update:tags Array with tags Same as input event
Comments
  • Remove tag button not reactive

    Remove tag button not reactive

    First of all, great work on this. I have been struggling to get this to react to the remove call. It does remove items, and will update as soon as I try and enter a new item (or refresh); but immediately after pressing remove the list displayed includes the removed items. My array is a computed value, which may be the issue; but as it's from a Vuex getter, I don't want to be storing it locally.

    My code: http://imgur.com/a/SBvaM

    enhancement 
    opened by xon52 9
  • Add option to validate strings that are added

    Add option to validate strings that are added

    For example if I change input type like so <input v-if="!readOnly" v-bind:placeholder="getPlaceholder()" type="number" ... it will accept only numbers and validate it with browser built in functionality.

    In HTML5 there are options to match the patterns in the input (http://www.w3schools.com/tags/att_input_pattern.asp).

    Do you think this could be a good enhancement? I could provide a PR if you will

    enhancement 
    opened by shershen08 8
  • Add some customizations

    Add some customizations

    Using the vue-input-tag I have discovered some limitations.

    1. I am not able to dynamically pass a value property. I would like to pass initial tags to the input, but my data loads with some delay, so the input has already mounted and it's innerTags has already initialized. I added watch on value property to update innerTags according to passing value.
    2. Default remove icon which is actually a 'x' symbol doesn't fit my design. I would like to override the remove icon. I added a named slot called "remove-icon" for be able to pass a custom remove icon. If slot is empty, then a default 'x' symbol will render.
    opened by nakeeon 6
  • How to refresh v-model maually?

    How to refresh v-model maually?

    Version of Vue I'm using?: 2.5.16___ Version of vue-input-tag I'm using?: 2.0.1_

    Hello: Maybe it's not a issue, I just want to know how to manually refresh tags? Scenario Description:

    step1 create { get value by ajax }

    step 2. computed: { Initialize form values, at this time maybe ajax request not finish yet. Some time get default value for initialization }

    opened by jiangzhen1984 6
  • Auto Adding on

    Auto Adding on ","(188) key.

    Try write tags on Cyrillic. I find out that when i write letter 'б' component automatically triggers to add new tag. This letter stay on same button with ',' on keyboard.

    v-on:keydown.enter.188.tab.prevent.stop="addNew(newTag)"

    bug help wanted 
    opened by comeondown 6
  • A couple of questions

    A couple of questions

    You didn't mark your styles as scoped does it mean that they are global? You change the tags property directly while in documentation is said "you should not attempt to mutate a prop inside a child component." and use custom events instead.

    I've just started to learn Vue.js, so could you please clarify these two things?

    question 
    opened by osenvosem 6
  • Add trim option to input-tag

    Add trim option to input-tag

    Should close #98.

    I've added the trim option to InputTag so it'd trim the new tags if set to true. I've changed the addNew method a little bit for that, but it shouldn't break anything that's already there.

    I don't know the requirements for making a PR for this repo, so let me know if it can be improved.

    opened by serge1peshcoff 4
  • tags list is not updated if the v-model is updated after vue-input-tag init

    tags list is not updated if the v-model is updated after vue-input-tag init

    Version of Vue I'm using?: 2.5.21 (latest from unpkg.me) Version of vue-input-tag I'm using?: 2.0.1 (latest from unpkg.me)

    I couldn't make JSFiddle work, so I'll just post the example to reproduce it here:

    HTML:

    <!doctype html>
    <html>
      <head>
      </head>
      <body>
        <div id="app">
          <input-tag placeholder="Add Tag" v-model="tags"></input-tag>
        </div>
        <script src="https://unpkg.com/vue-input-tag"></script>
        <script src="https://unpkg.com/vue">  </script>
      </body>
    </html>
    

    JS

    Vue.component('input-tag', vueInputTag.default)
    
    new Vue({
      el: "#app",
      data: {
        tags: ['start', 'data']
      },
      mounted () {
         setTimeout(() => {
           this.data.push('new')
           console.log('pushed new data, data=', this.data)
         }, 1000);
        
        setTimeout(() => {
           this.data = ['new', 'data']
           console.log('updated data, data=', this.data)
         }, 3000);
      }
    })
    

    Expected: the <input-tag>'s tags list should be updated. What happens: it doesn't in both cases.

    I've fixed that for myself by just rendering the <input-tag> after the data would be set (in my case it's an HTTP request, not a setTimeout(), but it would be nice to have it auto-updated when I update the prop that I pass as v-model. Is that feasible?

    Thanks a lot!

    opened by serge1peshcoff 4
  • Not able to override styling on tags

    Not able to override styling on tags

    Version of Vue I'm using?: 2.5.2

    Version of vue-input-tag I'm using?: 1.0.3

    codesandbox showing the issue: https://codesandbox.io/s/ly4rr9379

    I'm unable to override the default stylings for the actual tags. the following snippet works but (as expected) it only effects the surround div.

    .vue-input-tag-wrapper { background-color: red !important; }

    the moment I try following, all the defined overrides are ignored. In my use case I'm trying to get the tags to be a different color and I'd like the edges to be rounded. I have the css to do this, but it doesn't seem to pick up any of my changes.

    .vue-input-tag-wrapper .input-tag { background-color: red !important; color: white !important; }

    opened by shightower 4
  • Tags not disappearing

    Tags not disappearing

    I just installed this and its slick! Nice work!

    I have one issue, when I delete tags (by clicking X or by pressing backspace), nothing appears to happen. The tags are still there. However, it does delete them from the array.

    Two screens below:

    They add just fine to the array: image

    They also delete from the array, but do not delete from the input: image

    Thank you for help!

    opened by irelandpaul 4
  • How do I continue to use the previous version?

    How do I continue to use the previous version?

    Version of Vue I'm using?: 2.5.16

    Hi, I used the component from CDN, but after the last update my application broke (I did not use webpack). How do I continue to use the previous version?

    opened by max-kut 3
  • Bump express from 4.17.1 to 4.18.2

    Bump express from 4.17.1 to 4.18.2

    Bumps express from 4.17.1 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump qs from 6.5.2 to 6.5.3

    Bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump terser from 4.6.10 to 4.8.1

    Bump terser from 4.6.10 to 4.8.1

    Bumps terser from 4.6.10 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.

    v4.7.0

    • A bug was fixed where an arrow function would have the wrong size
    • arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.
    • Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.

    v4.6.13

    • Fixed issue where ES5 object properties were being turned into ES6 object properties due to more lax unicode rules.
    • Fixed parsing of BigInt with lowercase e in them.

    v4.6.12

    • Fixed subtree comparison code, making it see that [1,[2, 3]] is different from [1, 2, [3]]
    • Printing of unicode identifiers has been improved

    v4.6.11

    • Read unused classes' properties and method keys, to figure out if they use other variables.
    • Prevent inlining into block scopes when there are name collisions
    • Functions are no longer inlined into parameter defaults, because they live in their own special scope.
    • When inlining identity functions, take into account the fact they may be used to drop this in function calls.
    • Nullish coalescing operator (x ?? y), plus basic optimization for it.
    • Template literals in binary expressions such as + have been further optimized
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump shell-quote from 1.7.2 to 1.7.3

    Bump shell-quote from 1.7.2 to 1.7.3

    Bumps shell-quote from 1.7.2 to 1.7.3.

    Changelog

    Sourced from shell-quote's changelog.

    1.7.3

    • Fix a security issue where the regex for windows drive letters allowed some shell meta-characters to escape the quoting rules. (CVE-2021-42740)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump eventsource from 1.0.7 to 1.1.1

    Bump eventsource from 1.0.7 to 1.1.1

    Bumps eventsource from 1.0.7 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

    1.1.0

    • Improve performance for large messages across many chunks (#130 Trent Willis)
    • Add createConnection option for http or https requests (#120 Vasily Lavrov)
    • Support HTTP 302 redirects (#116 Ryan Bonte)
    • Prevent sequential errors from attempting multiple reconnections (#125 David Patty)
    • Add new to correct test (#111 Stéphane Alnet)
    • Fix reconnections attempts now happen more than once (#136 Icy Fish)
    Commits
    • aa7a408 1.1.1
    • 56d489e chore: rebuild polyfill
    • 4a951e5 docs: update history for 1.1.1
    • f9f6416 fix: strip sensitive headers on redirect to different origin
    • 9dd0687 1.1.0
    • 49497ba Update history for 1.1.0 (#146)
    • 3a38537 Update history for #136
    • 46fe04e Merge pull request #136 from icy-fish/master
    • 9a4190f Fix issue: reconnection only happends for 1 time after connection drops
    • 61e1b19 test: destroy both proxied request and response on close
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Mati Tucci
✨ Full Stack Overflow Developer
Mati Tucci
A simple tag selector as a vue component.

Vue-tag-selector is a component for vuejs for tag type fields. Light (6.3kb gzipped) and customizable. Offering regex validation. Check out the demo I

Tom Quinonero 13 Nov 24, 2022
An image input preview component in vuejs2

Vue-img-preview This is a minimal image preview implementation that does only one thing; give users feedback by showing image chosen from a file input

Dammy 18 Nov 24, 2022
:camera: Tiny little component for input type=file (css free! style it as you want!)

v-image ?? This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐ if you like it ?? Demo here -> v-image ✅ Install ?? npm i v-

Vinayak Kulkarni 38 Dec 14, 2022
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Voerro Vue Tags Input v2 A simple tags input with typeahead built with Vue.js 2. Live Demo Installation via NPM npm i @voerro/vue-tagsinput --save-dev

Voerro 454 Dec 24, 2022
🪄 Turn any link into a stylish visual web bookmark, one-click to copy the beautiful web bookmark image

bookmark.style ?? Turn any link into a stylish visual web bookmark, one-click to copy the beautiful web bookmark image.

onetab.group 220 Dec 28, 2022
:bookmark: Vue.js 2.0 Input Tag Component

vue-input-tag A Vue.js 2.0 input tag component inspired in react-tagsinput Installation NPM / Yarn npm install vue-input-tag --save yarn add vue-input

Mati Tucci 542 Oct 9, 2022
vue-itunes-album-search-bookmark

vue-itunes-album-search-bookmark A web app (single page application) created with vue,vuex, bulma and buefy using free itunes search api. All bookmark

Daniel Paras 26 Dec 26, 2022
A chrome extension that allows a YouTube watcher to 'bookmark' different parts of a video so that they could come back to it later

A chrome extension that allows a YouTube watcher to 'bookmark' different parts of a video so that they could come back to it later. This is a personal project for fun and learning.

Brian Lin 10 Dec 28, 2022
A versetile tag input component built with Vue 3 Composition API

TagInput A versetile tag input component built with Vue 3 Composition API. live demo Please checkout our Vue JS course Use code HAPPY_LEARNING or get

Mayank 12 Oct 12, 2022
A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Mayank 12 Oct 12, 2022
A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Mayank 12 Oct 12, 2022
Vue Currency Input component allows an easy input of currency formatted numbers

Vue Currency Input The Vue Currency Input component allows an easy input of currency formatted numbers. It provides both standalone component (<curren

WeblineIndia 1 May 25, 2022
A simple tag selector as a vue component.

Vue-tag-selector is a component for vuejs for tag type fields. Light (6.3kb gzipped) and customizable. Offering regex validation. Check out the demo I

Tom Quinonero 13 Nov 24, 2022
A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html tag which isn't supported in most of the browsers)

Searchable-Select-Dropdown A Vue Component to convert the native html select-dropdown to searchable dropdown (something similar to the datalist html t

Rahul Gaba 13 Sep 15, 2022
A simple tag component with typeahead

v-tag-suggestion A simple tag component with typeahead ⌨️ Install via npm npm install vue-tag-suggestion Import and register where you want to use imp

Maheshkumar 39 Mar 26, 2022
International Telephone Input with Vue https://educationlink.github.io/vue-tel-input/

vue-tel-input International Telephone Input with Vue. Documentation and live demo Visit the website Getting started Install the plugin: npm install vu

EducationLink 589 Dec 29, 2022
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

Jack Steel 4 Dec 9, 2021
Input mask library for vue.js based on credit-card-input-mask

vue-restricted-input Input mask for vue.js based on credit-card-input-mask Why ? credit-card-input-mask perfect work with carriage position, fast. Ins

Ivan Demidov 11 Nov 21, 2021
Resizable-input - An input for vue that resizes itself to the its content.

Vue Resizable Input An simple customizable input for vue that resizes itself to the its content. ??️ Getting started Installation NPM $ npm i -S v-res

Code Farm 2 Jan 4, 2022
A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element

v-suggest A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine in

Terry Zeng 74 Aug 27, 2022