i am using Vuetify for my project. The issue is that the default theme is white, or black with the props "black".
I checked this post: Vuetify: colors are not showing up Even when i put my components code in the v-app, it's still black.
I didn't change anything, i think ?
I use router-vue.
Below is my code: App.vue
<template>
<div id="app">
<router-view />
</div>
</template>
<style lang="scss"></style>
My component:
<template>
<v-card max-width="400">
<v-app-bar dark>
<v-toolbar-title>Formulaire de connexion</v-toolbar-title>
</v-app-bar>
<v-col>
<v-form v-model="valid" lazy-validation ref="form">
<v-row>
<v-text-field
:rules="rulesLogin"
label="Identifiant"
v-model="identifiant"
></v-text-field>
</v-row>
<v-row>
<v-text-field
:rules="rulesLogin"
type="password"
label="Mot de passe"
v-model="motDePasse"
></v-text-field>
</v-row>
<v-row>
<v-btn color="primary" dark @click="seConnecter">Se connecter</v-btn>
</v-row>
<v-row>
<v-btn color="primary" dark>Mot de passe oublié ?</v-btn>
</v-row>
<v-row>
<v-btn color="primary" dark>Pas de compte ? Créer un compte</v-btn>
</v-row>
</v-form>
</v-col>
</v-card>
</template>
<script>
import service from "@/services/login.services";
export default {
name: "LoginForm",
data() {
return {
valid: true,
identifiant: "",
motDePasse: ""
};
},
computed: {
rulesLogin() {
return [v => !!v || "Ce champ est obligatoire"];
}
},
methods: {
seConnecter() {
if (this.$refs.form.validate()) {
const params = {
identifiant: this.identifiant,
motDePasse: this.motDePasse
};
service.connexion(params);
}
}
}
};
</script>
<style></style>
plugins/vuetify.js:
import Vue from "vue";
import Vuetify from "vuetify/lib";
Vue.use(Vuetify);
export default new Vuetify({});
main.js
import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
Vue.config.productionTip = false;
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount("#app");
Thanks =)