Vue component for hinting addresses using dadata.ru

Overview

Vue Dadata

npm version npm downloads NPM license npm type definitions

It's a vue component for hinting addresses using DaData.ru.

Version Description
1.*.* Old version for vue2
2.*.* New version for vue2
3.*.* New version for vue3

Install

npm package

# old version vue2
$ npm install [email protected] --save
# new version vue2 (in progress)
$ npm install [email protected] --save
# vue3 (in progress)
$ npm install vue-dadata --save

Usage

<template>
  <div class="vue-truncate-html-example">
    <vue-dadata
      v-model="query"
      :token="token" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { VueDadata } from 'vue-dadata';
  import 'vue-dadata/dist/style.css';

  export default defineComponent({
    name: 'VueTruncateHtmlExample',
    components: {
      VueDadata,
    },
    setup() {
      const query = ref('');

      return {
        token: import.meta.env.VITE_APP_DADATA_API_KEY,
        query,

      };
    },
  });
</script>

Properties

Prop Required Type Description Default
token Yes string Auth token DaData.ru -
modelValue Yes string v-model for query -
suggestion No object v-model for suggestion undefined
placeholder No string Text placeholder ''
url No string special url for dadata api 'https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address'
debounceWait No string waiting time '1000ms'
disabled No boolean disabled false
fromBound No string Dadata bound type FROM undefined
toBound No string Dadata bound type TO undefined
inputName No string Input name attribute 'vue-dadata-input'
locationOptions No object Location options for choosing cities or countries undefined
classes No object classes DEFAULT_CLASSES
highlightOptions No object highlight options for vue-word-highlighter DEFAULT_HIGHLIGHT_OPTIONS
autocomplete No boolean can autocomplete query, after blur undefined

Peer dependencies

Dependencies

Copyright (c) 2019 - 2022 Ivan Monastyrev [email protected]. Licensed under the MIT license.

Comments
  • Not all data recieve

    Not all data recieve

    hi I'm using the latest version (with a bug on the onChange event). Also, after updating it, not all the data in the response began to arrive. For example, federal_district is always null. Example of the address of Тульская обл, г Тула, пр-кт Ленина, д 85. The site returns both the city district and the Federal district. And this module returns null.

    question 
    opened by SlivaNilow 8
  • ie 11 not working arrow function

    ie 11 not working arrow function

    Describe the bug in ie 11 not working arrow function Ro({type:Object,default:()=>({language:"ru",locations:[],locationsBoost:[]})})]

    Desktop (please complete the following information):

    • OS: windows 10
    • Browser Internet Explorer
    • Version 11

    Additional context Im using Laravel mix + vue dadata. all my arrow function on build transform to ES5 but imported script has own arrow function.

    can u build in to es5?

    opened by SlivaNilow 3
  • onChange doesn't fire on mouse click

    onChange doesn't fire on mouse click

    Hello! onChange function doesn't fire on mouse click. As I can see, this logic was broken by commit a1670d414001bf7ee5ca48e23cfe0208c521e308 (fix and optimize request). image

    bug 
    opened by alexeyklenov 3
  • SSR support

    SSR support

    Is your feature request related to a problem? Please describe. Input field does not support server side rendering.

    Describe the solution you'd like Server side should render html form wireframe without throwing document is not defined error.

    Additional context Using nuxtjs with ssr.

    opened by archieDeveloper 2
  • Uncaught SyntaxError: Unexpected identifier (Chrome ver. 49)

    Uncaught SyntaxError: Unexpected identifier (Chrome ver. 49)

    Hello again guys! Have some problems with browsers compatibility. Google Chrome (49 ver.) can not parse a code and throws out an error. Possible that this problem is related with comments. When I turn of dadata-vue from my code, the app builds successfully and displays in browser. Tested this situation in Windows XP and Ubuntu 20.04, have this error in both OS. Seems that same problem there is in IE, but i didn't test it myself yet (but my collegues saw similar signs in MS browsers older than Edge). I'm appending a screenshot of devtools and hope for your help. Happy holiday!

    screen

    bug 
    opened by dbapril 2
  • yarn add vue-dadata problem

    yarn add vue-dadata problem

    Hello everybody!

    I have an installation problem with yarn in my VueJs project. After yarn add vue-dadata seems it has been installed. But when I want to initialize global or local it gives me an error:

    This dependency was not found:

    • vue-dadata in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vuetify-loader/lib/loader.js??ref--18-0!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Auth/Signup.vue?vue&type=script&lang=js&

    To install it, you can run: npm install --save vue-dadata

    In my case I have to install it by yarn and npm is not preferred way. Is there any mistake by my side?

    bug 
    opened by cavidz 2
  • onChange problem

    onChange problem

    hi, I'm using your solution in my project. Here's the code call

    <vue-dadata token="my_api_key"
                 placeholder="Work address"
                  inputName="address"
                 onChange="setAddress"
    ></vue-dadata>
    

    in component methods block im write

    setAddress: function(data) {
          console.log(data)
    },
    

    but in console im get error

    app.js:40739 Uncaught (in promise) TypeError: this.onChange is not a function
        at a.selectSuggestion (app.js:40739)
    

    what am I doing wrong? I didn't find any examples of using the method correctly

    question 
    opened by SlivaNilow 2
  • url always null

    url always null

    Describe the bug Can not change url

    To Reproduce My setup()

    setup() {
        const query = ref('');
        const suggestion = ref(undefined);
        return {
          token: import.meta.env.VITE_APP_DADATA_API_KEY as string,
          query,
          url: 'https://suggestions.dadata.ru/suggestions/api/4_1/rs/findById/party',
          suggestion : {
            count: 3,
            url: 'https://suggestions.dadata.ru/suggestions/api/4_1/rs/findById/party'
          },
        };
      },
    

    Expected behavior url is expected to be set

    Screenshots But it doesn't (see attach).

    Desktop (please complete the following information):

    Windows 11, 
    "typescript": "^4.6.3",
            "vue": "^3.2.45",
            "vue-dadata": "^3.0.0-beta.9",
            "vue-debounce": "^4.0.0",
            "vue-loader": "^17.0.1",
            "vue-word-highlighter": "^1.1.2"
    

    Untitled-1

    It's strange, but the token is somehow set, so I can change it

    opened by new-user-name 1
  • build(deps): bump async from 2.6.3 to 2.6.4

    build(deps): bump async from 2.6.3 to 2.6.4

    Bumps async from 2.6.3 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    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] 1
  • build(deps-dev): bump minimist from 1.2.5 to 1.2.6

    build(deps-dev): bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    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] 1
  • build(deps): bump eventsource from 1.0.7 to 1.1.1

    build(deps): 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] 1
  • Error in v-on handler (Promise/async):

    Error in v-on handler (Promise/async): "TypeError: Cannot convert undefined or null to object"

    Describe the bug vue.runtime.esm.js?c320:3020 TypeError: Cannot convert undefined or null to object at Function.keys () at mergeConfig (vue-dadata.esm.js?4d05:3845:1) at Axios.request (vue-dadata.esm.js?4d05:3964:1) at Axios. [as post] (vue-dadata.esm.js?4d05:4065:1) at Function.wrap [as post] (vue-dadata.esm.js?4d05:428:1) at getSuggestions (vue-dadata.esm.js?4d05:4307:1) at VueComponent.fetchSuggestions (vue-dadata.esm.js?4d05:4507:1) at VueComponent.onInputChange (vue-dadata.esm.js?4d05:4439:1) at invokeWithErrorHandling (vue.runtime.esm.js?c320:2988:1) at HTMLInputElement.invoker (vue.runtime.esm.js?c320:1781:1)

    To Reproduce

    <VueDadata
          placeholder="Start typing an address"
            classes="address-component"
            :token="token"
            :onChange="sendAddress"
            v-model="query"
            :locationOptions="locations"/>
    
    data(){
        const query = '';
        return {
            query,
            token: "kvivrijrieurbnunuybite",
            locations: {
              language: "ru",
              locations: [{country: "*"}]
            }
          }
      },
      methods: {
        sendAddress: function(suggestion) {
          const data = suggestion.data;
          this.$emit("show:address", data);
        },
      }
    

    Desktop (please complete the following information):

    • OS: Windows10
    • Browser: Opera

    Additional context Error when entering address (dadata version 2) code

    opened by NatNiM 0
  • build(deps-dev): bump vite from 2.9.9 to 2.9.13

    build(deps-dev): bump vite from 2.9.9 to 2.9.13

    Bumps vite from 2.9.9 to 2.9.13.

    Changelog

    Sourced from vite's changelog.

    2.9.13 (2022-06-27)

    2.9.12 (2022-06-10)

    • fix: outdated optimized dep removed from module graph (#8534) (c0d6c60), closes #8534

    2.9.11 (2022-06-10)

    2.9.10 (2022-06-06)

    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] 1
  • Didnt select city on android

    Didnt select city on android

    Describe the bug Didn't select cities when click on Android (realme 6i, android 10)

    https://user-images.githubusercontent.com/24301483/121538172-3c4d0c00-ca0d-11eb-8683-592cb5eea93d.mp4

    opened by swaty007 1
  • v-model doesn't work

    v-model doesn't work

    I want to assign value to input through v-model. But it doesn't work. dadata input is empty How can I do it?

    data() {
    return {
    ruleForm: {
          title: '',
          position: {
            full: 'fggfgfgg',
          },
        },
    }
    }
    
    <vue-dadata
                  :v-model.sync="ruleForm.position.full"
                  :token="$config.dadataToken"
                  :onChange="getAddress"
                  placeholder="Введите адрес"             
                >
    
    edit() {
    this.ruleForm.position.full = 'any address'
    }
    
    opened by kentforth 1
  • Can't override input style

    Can't override input style

    I added my own class, but can't style input. What I did wrong?

    <vue-dadata
              v-model="form.city"
              classes="address-component"
              token=123"
            />
    
    .address-component {
      input {
        border: 2px solid green !important;
      }
    }
    

    1

    opened by kentforth 1
  • Return value customization

    Return value customization

    I am gonna get suggest data excluded метро - {street_type: "м"} I tried to do by adding params on locations prop but no luck yet. so I think when get data from api, I could throw data by filter "street_type". How to resolve this? I tried like this but have no idea how to do on this vue component. https://codepen.io/dadata/pen/eYZybyW?editors=1010

    Thanks

    opened by topninja 0
Releases(v3.0.0-beta.1)
Owner
Ivan Monastyrev
Hey, I'm a fullstack js developer.
Ivan Monastyrev
Salvia-kit dashboard template v8 with Vue (using vite.js)

Salvia-kit Dashboard v8 with vue3 ?? Documentation You can see the documentation on http://localhost:3000/guides/documentation Browser Support Chrome

salvia-kit 6 Nov 18, 2022
A Free And Open Source Admin Template Kit Using Vue And Vite

ABT:admin base template English | 中文 Introduction admin-base-template is a free and open source admin template kit. using vite2. Technology stack is V

Tech轩_ 8 Nov 30, 2022
Online album storefront using Vue.js + Vuetify + node/express

Audifactory A elegant website that sells various albums. To be revamp after the release of vue 3.0 and vuetify 2.0 (2019 Q3) Instruction Ensure you ha

DaRwin 7 Mar 18, 2022
A Simple Calculation App Built Using Vue.js

calculationapp Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

fumi 0 Dec 8, 2021
Adjustable split pane using Vue.js

Vue Split Pane Adjustable split pane using Vue.js Install # yarn (recommend) $ yarn add vue-split-pane # npm $ npm install vue-split-pane --save Usa

Dang Van Thanh 29 Jul 17, 2022
Dashboard for managing rally discord bot built using vue.js

Rally Discord Bot Dashboard Dashboard for managing rally discord bot built using

Mah 3 Sep 6, 2022
Ip-tracker - Get the information of IP address and its possible location,built using vue

IP-Info-tracker I created this project for and also to teach vue js to my friend

Sahil Patel 6 Dec 7, 2022
Tailwind-furniture-design-page - Furniture Design Page using TailwindCSS And Vue

Furniture Design Page using TailwindCSS Recreated from the Furniture Design Page

Farkhod Akhmedov 1 Feb 3, 2022
Vuejs-quran-web - A Beautiful Quran Web App Built Using Vue.js

vuejs quran الاصدار الجديد من تطبيق الويب القرآن الكريم مشاهدة التطبيق تعديل مسا

null 17 Oct 25, 2022
Windzo a free open source dashboard admin template, using vue js and tailwind css framework

Windzo Dashboard Admin this dashboard app on development fork this repo for new commit update ?? Windzo is a free open source dashboard admin template

Mohammad Sahrullah 39 Nov 25, 2022
This is a WordPress boilerplate plugin using vue 3, build with Laravel Mix. Also tailwind setup available.

WP Plugin Vue Tailwind Boilerplate This is a Customizable sample WordPress Plugin which is developed as a single page app on backend with Vue js and T

Hasanuzzaman 5 Dec 15, 2022
apiAutoTest front-end and back-end separation, visualization version, using FastAPI + Vue2 implementation, on the basis of apiAutoTest to add timing tasks, graphql specification interface testing

apiAutoTest front-end and back-end separation, visualization version, using FastAPI + Vue2 implementation, on the basis of apiAutoTest to add timing tasks, graphql specification interface testing

null 15 Nov 7, 2021
🎉 A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus

?? A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus

kuanghua 228 Dec 30, 2022
👏A magical vue3 admin using vue3(script-setup) + vite2 + element-plus

vue3-admin-plus English | 中文 vue3 admin plus provides enterprise-level development demo A new generation admin construct using vue3(setup-script)+vite

kuanghua 625 Jan 7, 2023
🎉 A new generation vue3 admin template using vue3(script-setup) + vite2 + element-plus + typescript

vue3-admin-ts English | 中文 A basic vue3 admin template with vite2 & Element-Plus UI & axios & svg-icon& permission control & lint A new generation adm

kuanghua 194 Dec 15, 2022
🚀A new generation Cross-desktop framework using electron13+vue3(setup-script)+vite2+element-plus

vue3-admin-electron English | 中文 This is a basic vue3 admin electron desktop platform. Contains the most basic electron development and construction s

kuanghua 3 Nov 25, 2022
An open source admin template kit using vite2

ABT:admin base template English | 中文 Introduction admin-base-template is a free and open source admin template kit. using vite2. Technology stack is V

null 4 May 7, 2022
Dashboard using OPC UA and real-time bidirectional communication applied to SMAR's PD3-F teaching plant

Dashboard using OPC UA and real-time bidirectional communication applied to SMAR's PD3-F teaching plant

Vinícius Melo 2 Aug 2, 2022
Windmill-vue - Vue 3, small component library inspired by Windmill

Windmill Vue UI The component library for fast and accessible development of gorgeous interfaces. Install npm i @sorion/windmill-vue You can register

Maxime Pelte 11 Sep 2, 2022