Unknown custom element: <v-text-field>

[imikim]

Hi - Adding your component to my vuetify project gives the following error in the browser:

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

This is found in <VuetifyGoogleAutocomplete>

And no component is show at all on the DOM

The version is: "vuetify-google-autocomplete": "^2.0.0-beta.5"

[MadimetjaShika]

Hi, which versions of Vue and Vuetify are you using? Do you mind also posting your code please, could be that something is not properly imported.

[imikim]

Sorry, but I already do not have the code anymore. But I would still love to use the feature if it would work. The vuetify version would have been the latest at the time of my writing

On Thu, Feb 21, 2019, 12:43 Madimetja Shika [email protected] wrote:

Hi, which version of Vuetify are you using? Do you mind also posting your code please, could be that something is not properly imported.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/MadimetjaShika/vuetify-google-autocomplete/issues/66#issuecomment-465969550, or mute the thread https://github.com/notifications/unsubscribe-auth/AsaKunh3LNaYl_aw-JkyuWQUvW6MWMqdks5vPoZjgaJpZM4alLJX .

[miguel-isasmendi]

I've run into the same issue here.

My package.json reads: "vue": "^2.5.22", "vuetify": "^1.3.0", "vuetify-google-autocomplete": "2.0.0-beta.5",

My actual version for each one of those components: "vue": 2.6.6, "vuetify": 1.5.1, "vuetify-google-autocomplete": 2.0.0-beta.5,

My code in my template:

<vuetify-google-autocomplete
  id="map"
  :placeholder="$t('label.address')"
  v-on:placechanged="getAddressData"
></vuetify-google-autocomplete>

My code in my script tag:

import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';

export default {
  name: 'my-form',
  components: {
    VuetifyGoogleAutocomplete,
  },

[mfreeman451]

Same issue..

[tsirolnik]

Same issue, Vuetify 1.5.6

main.js

import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
 
Vue.use(VuetifyGoogleAutocomplete, {
  apiKey: 'key'  }`
});
Vue.config.productionTip = false

Page.vue

                <vuetify-google-autocomplete
                  id="map"
                  append-icon="search"
                  disabled
                  placeholder="Start typing"
                  v-on:placechanged="getAddressData"
                ></vuetify-google-autocomplete>

[rborges89]

i have the same issue

[teomankirac]

SAME! Whats the status on this?

[MadimetjaShika]

Hi,

I'm unable to reproduce the error you guys are having. I've tried this with vue@^2.5.2 vuetify@^1.5.6 and vuetify-google-autocomplete@^2.0.0-beta.5. See below gif with no errors.

Please clone this example repo, create a branch and attempt to reproduce the error. There could be something else triggering the error that I don't have in my code that you might have in yours.

[teomankirac]

Thanks will reproduce error today with what i am using. Very likely my combo of things. Appreciate you taking a look. I am using Nuxt.js v2.4.3, "vuetify": "^1.5.8", "vuetify-google-autocomplete": "^2.0.0-beta.5". in plugins/vuetify-google-autocomplete.js I have:

import Vue from 'vue';
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';

Vue.use(VuetifyGoogleAutocomplete, {
  apiKey: 'the-key'
});

in my nuxt-config.js:

plugins: [
    '@/plugins/vuetify',
    {src: '~/plugins/vuetify-google-autocomplete.js', ssr: false}
  ],

my layouts/default.vue:

<no-ssr>
         <vuetify-google-autocomplete
           :id="id"
           :append-icon="appendIcon"
           :classname="classname"
           :clearable="clearable"
           :country="country"
           :disabled="disabled"
           :enable-geolocation="enableGeolocation"
           :label="labelText"
           :placeholder="placeholderText"
           :prepend-icon="prependIcon"
           :required="required"
           :types="types"
           v-on:placechanged="getAddressData"
           v-on:no-results-found="noResultsFound"
         >
         </vuetify-google-autocomplete>
       </no-ssr>

Thanks for your time and will try to reproduce if there is not anything obv wrong with what I have provided here.

[cosmoslothnaut]

The underlying issue for me was I had installed vuetify as a plugin. I added import Vuetify from 'vuetify' next to import './plugins/vuetify' and added the line Vue.use(Vuetify) before Vue.use(VuetifyGoogleAutocomplete, { apiKey: '...', })

Thanks for your work!

[teomankirac]

I solved my issue by adding { VTextField } to my plugins/vuetify.js

I think vuetify-google-autocomplete piggybacks off of v-text-field..

I added this:

import Vue from 'vue'
import Vuetify, { VTextField } from 'vuetify/lib'
import colors from 'vuetify/es5/util/colors'

Vue.use(Vuetify, {
  theme: {
    primary: '#121212', // a color that is not in the material colors palette
    accent: colors.grey.darken3,
    secondary: colors.amber.darken3,
    info: colors.teal.lighten1,
    warning: colors.amber.base,
    error: colors.deepOrange.accent4,
    success: colors.green.accent3
  },
  components: {
    VTextField
  }
})

and viola, works. For some reason my vuetify-loader doesn't recognize v-text-field in the context of vuetify-google-autocomplete. Please correct me if I am wrong, very likely i don't know what I am talking about. But may help some others out there.....

[MadimetjaShika]

@cosmoslothnaut and @teomankirac, you're both correct in your solutions. This library does not package the v-text-field component, and instead relies upon the consumer to install the vuetify library or at the very least, the v-text-field component from the vuetify library in his/her project.

Perhaps it might be worthwhile to package just the v-text-field with this library.. But i'm not too sure this is a good idea...

Also might be worthwhile to update the readme, or better yet clean-up the readme to be more explicit and useful...

[Tsaukpaetra]

Interesting, I also had to make similar changes that @teomankirac did. I'm using Vuetify 2, and (prior to attempting to use this) V-text-fields worked just fine. 🤷‍♂️

[Tsaukpaetra]

@waittinghsu Did you modify your vuetify loader code? The current package (as it stands) is not out-of-the-box compatible with dynamic build systems at this point.

[waittinghsu]

i correct it too~ 。口。 my vuetify setting "treeShake: true,"

import { VTextField } from 'vuetify/lib'; Vue.component('v-text-field', VTextField);

The version is: vuetify-google-autocomplete : "^2.0.0-beta.5" nuxt: "v2.9.2" Vuetify: "2"

[nigel-dewar]

I tried both options suggested and it doesnt work.

I think v-text-field should be included. this library too hard to use coz It just dont work.

using vue-cli and latest version of vuetify

cheers

[piraveen]

I get the same error:

• vue: 2.6.11
• vuetify: 2.2.11
• vuetify-google-autocomplete: 2.0.1

None of the solutions given above solves this error.

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
import fr from 'vuetify/es5/locale/fr';

const vuetify = new Vuetify({
    lang: {
        locales: { fr },
        current: 'fr',
    },
});

Vue.use(Vuetify);
Vue.use(VuetifyGoogleAutocomplete, {
    apiKey: process.env.G_API_KEY || '',
    // version: '...',
    language: 'fr-FR',
});

export default vuetify;

[mattstryfe]

Confirmed the following fix worked with...

• vue: 2.6.11
• vuetify: 2.3.10
• vuetify-google-autocomplete: 2.0.0

plugins/vuetify.js

import { VTextField } from 'vuetify/lib'
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete'

Vue.use(Vuetify, {
  components: {
    VTextField
  }
})

// Google Location AutoComplete
Vue.use(VuetifyGoogleAutocomplete, {
  apiKey: // Can also be an object. E.g, for Google Maps Premium API, pass `{ client: <YOUR-CLIENT-ID> }`
  version: '...', // Optional
  language: '...', // Optional
})