5

I'm trying to implement Veutify's text field

This is what it looks like for me right now: enter image description here

And this is what it looks like when the text field is in focus: enter image description here

These are my imports in main.js

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

Am I missing an import or something?

4
  • Where's the CSS import? You should ideally use your browser's developer tools to inspect the styles for the element
    – Phil
    Commented Aug 9, 2017 at 0:58
  • @Phil I removed it because adding import 'vuetify/dist/vuetify.min.css'; didn't do anything. And there doesn't seem to be anything relating border border in my browser's CSS styles.
    – Pashan
    Commented Aug 10, 2017 at 1:20
  • I think it uses box-shadow for the underline. Compare your element to the one in their example / demo pages
    – Phil
    Commented Aug 10, 2017 at 1:41
  • @Phil Only difference I found is the transitions. example vs mine
    – Pashan
    Commented Aug 10, 2017 at 1:58

2 Answers 2

15

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.

2
  • not working. I wrapped the App.vue (the main component) inside the <v-app><v-content></v-content></v-app>. Still not working.
    – Soorya
    Commented Aug 30, 2019 at 17:15
  • @Soorya My issue was that I used custom js colors in theme configuration and has written export default { primary: 'rgb(...)'}. rgb() calls are not supported in js, and it just applied white as primary color. If this is the case for you, switch to hex colors
    – Archeg
    Commented Nov 5, 2019 at 11:54
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.