0

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.

enter image description here

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 =)

VongoSanDi
  • 76
  • 7

0 Answers0