Multi tool use

Vuetify Autocomplete will not Render

I am developing a UI with Vue, and I'm using Vuetify's framework for its awesome components.

So far I have used v-toolbar, v-card, v-text, v-select, and a couple others and everything has worked great. However, for some reason when I try to use v-autocomplete it won't load! It'll load everything around it but not the autocomplete itself. This is the error I get in browser console:

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

found in

---> <App> at src/App.vue
<Root>


Are there any ideas on what I can try to get autocomplete to work? (I've already tried copy/pasting the VAutocomplete's folder into my app's node_modules folder but maybe I need to add it in another place?) Thanks!

vuetify

1.1

package.json

npm i vuetify

1 Answer
1

It's kinda happening with everyone out there, Vuetify just got a new version released(like 2-3 days back), V1.1. The UI Component <v-autocomplete> was added in the very same version, i.e., it is one of the latest component Vuetify has now.

<v-autocomplete>

So now you need to check and make sure whether your Vuetify (the one you have installed) is updated to the version V1.1, which you can do just by looking into devDependencies or dependencies of the file package.json of your project.

File: package.json

"dependencies": {
"axios": "^0.18.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuetify": "^1.1.1", <-- something like this
"vuex": "^3.0.1"
},


In order to update your Vuetify to V1.1, all you need to do is the followinng in the terminal

npm i vuetify


This will remove any previous version of the vuetify and install a lastest version of it.

I recommend you do that(update your vuetify). As the V1.1 has many more interesting and useful components, which you should look into.

However if for some reasons you don't want to update it then I would suggest you to use <v-select> with autocomplete prop, <v-select> is a component which is there in vuetify since inception. This does the exact same thing, but just few minor things are missing (that's why you should update). You can use <v-select> like this.

<v-select>

autocomplete

<v-select>

<v-select>

<v-select
autocomplete
append-icon="label"
:items='getTags'
multiple
hint="Atleast 3 tags required"
v-model="tagy"
:search-input.sync="search"
:loading = "loading"
cache-items
editable
flat
placeholder="Select only suggested tags"
>
</v-select>


Well that's all, I still recommend you to update to V1.1 and go for <v-autocomplete>.

<v-autocomplete>

I hope it helps you.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.