CODEWITHSUNDEEP
vue.jsvuetify.js
loreeemartiii
loreeemartiii

Reputation: 385

Vuetify old style

I'm pretty new to Vue/Vuetify, I've tried using the vuetify v-text-field tag with outline prop.

Why the label is like in the image?

Also the font seems not to be the Vuetify one.

My index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>test</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
</head>

<body>
    <noscript>
      <strong>We're sorry but test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>

</html>

enter image description here

Upvotes: 1

Views: 114

Answers (1)

Dan
Dan

Reputation: 63059

Wrap your App.vue in <v-app>. Among other things, it wraps the app in the v-application class which a lot of styles use as part of their selector. From the docs:

The v-app component is REQUIRED for all applications. This is the mount point for many of Vuetify’s components and functionality and ensures that it propagates the default application variant (dark/light) to children components and also ensures proper cross-browser support for certain click events in browsers like Safari. v-app should only be rendered within your application ONCE.

Upvotes: 4

Related Questions