Vuetify text field border missing

Question

I\'m trying to implement Veutify\'s text field

This is what it looks like for me right now:

And this is what it looks like when the text field is in focus:

Answer 1

Same issue But I fixed by this solution. Please add this link(CDN) to you html file.

<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">


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

Don't worry no crashing.

Answer 2

I ran in the same issue, you need to wrap your application in a <v-app>.

The reason is that the border's color depends on the theme you're using. If you try to inspect the documentation you will see that the border's rule is something like .application--light .input-group .input-group__details: application--light is indeed a class added by v-app.