vue-smart-route with vuetify - vue.js

Question

Am using the package vue-smart-route to create a search functionality in my app. For the styles am using vuetify. The problem is that when i use the vuetify components it doesn't works.
Using it with vuetify component:
<v-text-field v-model="search" v-smart-routes="routes" class="mr-4" :label="$t('search') + '...'" hide-details append-icon="mdi-magnify" />
That doesn't works.
Plain html
<input class="mr-4" type="text" v-model="search" v-smart-routes="routes">
This works however i want to add the vuetify styles.
How can i make the vuetify component work?

Answer 1

I'm 99% sure that vue-smart-route doesn't work with the Vuetify's <v-text-field/> because it probably expects an exact <input> HTML element, while <v-text-field/> creates a much more complex DOM structure. It's something like this and the <input> tag is deeply nested:
<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--is-booted">
<div class="v-input__control">
<div class="v-input__slot">
<div class="v-text-field__slot">
<label for="input-1752" class="v-label v-label--active theme--light"
style="left: 0px; right: auto; position: absolute;">Label</label><input id="input-1752"
type="text" />
</div>
</div>
<div class="v-text-field__details">
<div class="v-messages theme--light">
<div class="v-messages__wrapper"></div>
</div>
</div>
</div>
</div>
So in this case I see 2 options: Create your own custom input similar to this one if you want to stick to these styles or branch vue-smart-route and make it work with this DOM structure. I hope this helps.