Invalid Vuetify Field Boundary

Question

I am trying to implement a veutify text field

Here is what seems to me now:

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

This is my import in main.js

import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);

Am I missing imports or something else?

Answer 1

I ran into the same problem you need to wrap the application in <v-app>.

The reason is that the color of the frame depends on the theme you are using. If you try to check the documentation, you will see that the border rule is similar to .application--light .input-group .input-group__details: application--light- this is really a class added v-app.