How to debug outline is not working in Vuetify? - vue.js

Question

I started a fresh vue3 project with vuetify3 via vue cli.
$ vue create playground-vuelidate
$ cd playground-vuelidate
$ code .
$ vue add vuetify
$ npm run serve
FormInput.vue
<template>
<v-form>
<v-container>
<v-row no-gutters>
<v-col cols="12" sm="12">
<v-combobox :items="select1" label="Select1" chips></v-combobox>
</v-col>
<v-col cols="12" sm="12">
<v-text-field
outline
v-model="input1"
:rules="rules"
label="Input1"
></v-text-field>
</v-col>
<v-col cols="12" sm="12">
<v-text-field
outline
v-model="input2"
:rules="rules"
label="Input2"
></v-text-field>
</v-col>
<v-col cols="12" sm="12">
<v-text-field outline v-model="input3" label="Input3"></v-text-field>
<v-textarea
v-model="v$.textarea1.$model"
:class="status(v$.textarea1)"
label="textarea1"
></v-textarea>
<pre>{{ $v }}</pre>
</v-col>
</v-row>
</v-container>
</v-form>
</template>
<script>
import { maxLength, required } from "#vuelidate/validators";
import { useVuelidate } from "#vuelidate/core";
export default {
name: "UsersPage",
data: () => ({
select1: ["Foo", "Bar", "Fizz", "Buzz"],
input1: "",
input2: "222",
input3: "333",
textarea1: "12345678910",
rules: [
(value) => !!value || "Required.",
(value) => (value || "").length <= 20 || "Max 20 characters",
],
}),
setup: () => ({ v$: useVuelidate() }),
validations() {
return {
textarea1: {
required,
minlength: maxLength(20),
},
};
},
methods: {
status(validation) {
return {
error: validation.$error,
dirty: validation.$dirty,
};
},
},
};
</script>
<style>
input {
border: 1px solid silver;
border-radius: 4px;
background: white;
padding: 5px 10px;
}
.dirty {
border-color: #5a5;
background: #efe;
}
.dirty:focus {
outline-color: #8e8;
}
.error {
border-color: red;
background: #fdd;
}
.error:focus {
outline-color: #f99;
}
</style>
App.vue
<template>
<v-card class="mx-auto" max-width="1000">
<FormInput />
<v-card-actions>
<v-btn text color="gray accent-4"> Cancel </v-btn>
<v-btn color="primary"> Submit </v-btn>
</v-card-actions>
</v-card>
</template>
<script>
import FormInput from "./components/FormInput.vue";
export default {
name: "App",
components: {
FormInput,
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
It yields this result
It supposes to look like this.
Official Doc
Notes
I have a select, inputs, and textarea all 3 of them the outline CSS doesn't seem to work or applied. Is it a known Vuetify bug ?

Answer 1

Should be
<v-text-field
outlined
></v-text-field>
not
<v-text-field
outline
></v-text-field>
This is based from vuetify for vue3
https://next.vuetifyjs.com/en/components/text-fields/