Vue 3 ve Vuetify 3 ile Giriş/Kayıt Sayfası Oluşturma

Bu yazıda Vue ve Vuetify’ın 3. versiyonunu kullanarak basit bir giriş ve kayıt sayfası oluşturacağız. Vuetify 3 henüz BETA aşamasında olduğundan canlı ortamlarda kullanmanız tavsiye edilmiyor. Ancak bu yazı ile beraber, yakın zamanda çıkışı gerçekleşecek, Vuetify 3 ile Vue 3 uygulamanızı geliştirmeye başlayabilirsiniz.

Yazıyı takip edebilmeniz için önkoşullar;

· IDE
· Node.js 16.0+

Yazıyı takip etmek istemezseniz aşağıdaki linklerden kodun son haline ulaşabilirsiniz;

Github | Canlı Demo

Öncelikle terminal aracılığıyla Vue 3 projemizi oluşturalım. Vue’nun çıkan son versiyonu 3 olduğundan aşağıdaki komutu çalıştırmanız yeterli olacaktır;

npm init vue@latest

Komutu çalıştırdığınızda karşınıza oluşturulacak proje ile ilgili birkaç seçenek çıkacak. Sadece proje ismini değiştirerek varsayılan seçeneklerden devam edebilirsiniz.

İşlem tamamlandıktan sonra IDE’nizde projeyi açın. Gerekli paketleri indirmek için aşağıdaki komutu kullandığınızdan emin olun;

npm install

İşlem tamamlandıktan sonra aşağıdaki komutu kullanarak projenizi ayağa kaldırabilirsiniz;

npm run dev

Vue 3 projeniz başarıyla oluşturulduysa ilgili adresi açtığınızda “You did it!” sayfasını göreceksiniz.

Projemizi başarıyla oluşturduğumuza göre artık Vuetify 3 kurulumuna geçebiliriz. Vuetify 3'ü projemize dahil edebilmek için öncelikle Vue CLI’nın 5 veya üstü versiyonuna ihtiyacımız var. Vue CLI’yı aşağıdaki komut aracılığıyla indirebilirsiniz;

npm install -g @vue/cli

İşlem tamamlandıktan sonra terminalde proje klasörüne erişin. Klasör içerisinde aşağıdaki komutu çalıştırarak projenize Vuetify 3'ü dahil edebilirsiniz;

vue add vuetify

Komutu çalıştırdığınızda bir Vuetify versiyonu seçmeniz istenecek. Listeden “Vuetify 3 — Vite (preview)” seçeneğini seçiniz.

Vuetify 3 kurulumu tamamlandıktan sonra projenizi tekrar IDE’nizde açın ve aynı komut ile ayağa kaldırın. Sayfanızın “Welcome to Vuetify 3 Beta” sayfası ile değiştiğini göreceksiniz.

Projemiz hazır olduğuna göre giriş ve kayıt sayfamızı oluşturmaya başlayabiliriz. Öncelikle “Components” dosyası içerisine “Login” isimli bir Vue component’i oluşturun. Ardından component’in template kısmına giriş sayfası olduğunu belirten kısa bir yazı girin. Aynı adımları “SignUp” isimli bir component oluşturarak tekrar edin.

<template>
LOGIN PAGE
</template>

<script>
export default {
  name: "Login"
}
</script>

<style scoped>

</style>

Component’leri hazırladıktan sonra “App.vue” dosyasını açın. Components alanında bulunan “HelloWorld”ü silip yerine hazırladığınız component’leri yazın. Ardından gerekli import satırlarını ekleyin. Component’lerin sayfada görünebilmesi için template alanını da component’leriniz ile güncelleyin.

<template>
  <v-app>
    <v-main>
      <SignUp/>
      <Login/>
    </v-main>
  </v-app>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Login from './components/Login.vue'
import SignUp from './components/SignUp.vue'

export default defineComponent({
  name: 'App',

  components: {
    Login,
    SignUp
  },

  data () {
    return {
      //
    }
  },
})
</script>

Sayfayı yenilediğinizde component içeriklerini göreceksiniz.

Component’leri başarılı bir şekilde tanımladığımıza göre giriş ve kayıt sayfamızı Vuetify 3 ile güzelleştirmeye başlayabiliriz. İlk olarak sayfamıza bir “v-card” ekleyeceğiz. Bu kart içerisine “v-tabs” kullanarak giriş ve kayıt sekmeleri oluşturacağız. Sekmelerin içeriğini kartın yazı alanına tanımlamak için “v-card-text” içerisine “v-window” ekleyeceğiz. Pencerenin içeriğine de ilgili component’lerimizi tanımlayacağız. Gerekli kodları sağladıktan sonra sayfamızda sekmeleri arasında gezebildiğimiz bir kart göreceğiz.

<template>
  <v-app>
    <v-main>
      <v-card>
        <v-tabs
            v-model="tab"
            background-color="primary"
        >
          <v-tab value="login">LOGIN</v-tab>
          <v-tab value="signup">SIGN UP</v-tab>
        </v-tabs>

        <v-card-text>
          <v-window v-model="tab">
            <v-window-item value="login">
              <Login/>
            </v-window-item>

            <v-window-item value="signup">
              <SignUp/>
            </v-window-item>
          </v-window>
        </v-card-text>
      </v-card>
    </v-main>
  </v-app>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import Login from './components/Login.vue'
import SignUp from './components/SignUp.vue'

export default defineComponent({
  name: 'App',
  data: () => ({
    tab: null,
  }),

  components: {
    Login,
    SignUp
  }
})
</script>

Şu an herhangi bir stil eklemediğimiz için sayfamız göze hitap etmiyor. Devam etmeden önce sayfamızı güzelleştirelim. “App.vue” dosyasının altına “style” isimli tag’ımızı açalım. CSS kodlarımızın hepsini bu tag içerisine yazalım. Ayrıca Vuetify’ın component’leri için sağladığı stillerden de faydalanalım. Mesela kartımıza gölge eklemek için “elevation” kullanabiliriz. Ya da sekmelerin kart genişliğine göre ortada hizalanması için “fixed-tabs” kullanabiliriz.

<template>
  <v-app>
    <v-main>
      <div class="content">
        <v-card :elevation="5" class="card">
          <v-tabs
              v-model="tab"
              background-color="primary"
              fixed-tabs
              color="#975f9d"
          >
            <v-tab value="login">LOGIN</v-tab>
            <v-tab value="signup">SIGN UP</v-tab>
          </v-tabs>

          <v-card-text class=text-center>
            <v-window v-model="tab">
              <v-window-item value="login">
                <Login/>
              </v-window-item>

              <v-window-item value="signup">
                <SignUp/>
              </v-window-item>
            </v-window>
          </v-card-text>
        </v-card>
      </div>
    </v-main>
  </v-app>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import Login from './components/Login.vue'
import SignUp from './components/SignUp.vue'

export default defineComponent({
  name: 'App',
  data: () => ({
    tab: null,
  }),

  components: {
    Login,
    SignUp
  }
})
</script>

<style>
main {
  background-image: url('@/assets/background-image.jpg');
  background-size: cover;
}

.content {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 35%;
  height: 75%;
  min-width: 275px;
  min-height: 450px;
}

</style>

Temelimiz hazır olduğuna göre giriş ve kayıt formlarımızı hazırlamaya geçebiliriz. “Login.vue” dosyasını açarak giriş formundan başlayalım. Mail ve şifre bilgileri için “v-text-field” kullanarak birer tane alan oluşturalım. Alana girilen bilgileri işleyebilmek için “v-model” ekleyelim. Eklediğimiz modelleri “script” içerisine değişken olarak tanımlayalım. Giriş butonu için de “v-btn” component’inden faydalanalım. Formumuzun göze hitap etmesi için gerekli stilleri ekledikten sonra sayfamızı yenileyelim.

<template>
  <div class="form-content">
    <v-text-field
        v-model="email"
        label="E-mail"
        color="#975f9d"
        required
    ></v-text-field>
    <v-text-field
        v-model="password"
        label="Password"
        color="#975f9d"
        type="password"
        required
    ></v-text-field>
    <v-btn class="button"
           color="#975f9d"
           elevation="2"
           rounded
    >LOGIN
    </v-btn>
  </div>
</template>

<script>
export default {
  name: "Login",
  data: () => ({
    email: '',
    password: ''
  }),
}
</script>

<style>

.form-content {
  padding: 25px;
}

.button {
  color: white !important;
}

</style>

Kullanıcılara daha rahat bir deneyim sunabilmek için şifre alanındaki maskeyi isteğe göre kaldırabiliriz. Bunun için öncelikle “script” içerisine “show” isimli bir değişken tanımlayalım. Değerini “false” atayalım. Ardından şifre için tanımladığımız “v-text-field” alanının “type” değişkenini “:type=”show ? ‘text’:’password’” olarak güncelleyelim. Böylece “show” değişkenine göre şifre maskeli ya da maskesiz olarak görünecek. Kullanıcının “show” değişkenini değiştirebilmesi için alan içerisine tıklanabilir bir göz ikonu dahil edelim. Alana “append-inner-icon” değişkeni ekleyelim. İkonun “show” değişkenine göre değişmesi için “show ? ‘mdi-eye’ : ‘mdi-eye-off’” koşulunu girelim. İkonun tıklanabilir olması ve değişkenin değerini değiştirmesi için alana “@click:append-inner=”show = !show” fonksiyonunu ekleyelim. Sayfayı yeniledikten sonra şifre maskesinin kaldırılabilir olduğunu göreceksiniz.

<template>
  <div class="form-content">
    <v-text-field
        v-model="email"
        label="E-mail"
        color="#975f9d"
        required
    ></v-text-field>
    <v-text-field
        v-model="password"
        label="Password"
        color="#975f9d"
        :type="show ? 'text' : 'password'"
        :append-inner-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
        @click:append-inner="show = !show"
        required
    ></v-text-field>
    <v-btn class="button"
           color="#975f9d"
           elevation="2"
           rounded
    >LOGIN
    </v-btn>
  </div>
</template>

<script>
export default {
  name: "Login",
  data: () => ({
    email: '',
    password: '',
    show: false
  }),
}
</script>

<style>

.form-content {
  padding: 25px;
}

.button {
  color: white !important;
}

</style>

Giriş formunu bitirdiğimize göre benzer şekilde kayıt formumuzu da tamamlayabiliriz. “SignUp.vue” dosyasını açarak adımları ad, soyad, mail, şifre ve şifre tekrar alanları için tekrar edelim. Stilleri de ekledikten sonra sayfayı yenileyerek kayıt sayfamızı kontrol edelim.

<template>
  <div class="form-content">
    <v-row class="pr-3 pl-3 pb-3">
      <v-text-field
          v-model="firstName"
          label="First Name"
          color="#975f9d"
          required
          class="mr-2"
      ></v-text-field>
      <v-text-field
          v-model="lastName"
          label="Last Name"
          color="#975f9d"
          required
      ></v-text-field>
    </v-row>
    <v-text-field
        v-model="email"
        label="E-mail"
        color="#975f9d"
        required
    ></v-text-field>
    <v-text-field
        v-model="password"
        label="Password"
        color="#975f9d"
        :type="showPassword ? 'text' : 'password'"
        :append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
        @click:append-inner="showPassword = !showPassword"
        required
    ></v-text-field>
    <v-text-field
        v-model="passwordRepeat"
        label="Repeat Password"
        color="#975f9d"
        :type="showPasswordRepeat ? 'text' : 'password'"
        :append-inner-icon="showPasswordRepeat ? 'mdi-eye' : 'mdi-eye-off'"
        @click:append-inner="showPasswordRepeat = !showPasswordRepeat"
        required
    ></v-text-field>
    <v-btn class="button"
           color="#975f9d"
           elevation="2"
           rounded
    >SIGN UP
    </v-btn>
  </div>
</template>

<script>
export default {
  name: "SignUp",
  data: () => ({
    password: '',
    passwordRepeat: '',
    email: '',
    firstName: '',
    lastName: '',
    showPasswordRepeat: false,
    showPassword: false
  }),
}
</script>

<style>

.form-content {
  padding: 25px;
}

.button {
  color: white !important;
}
</style>

Kayıt formumuzun tamamlanmasıyla beraber basit giriş ve kayıt sayfamızı bitirmiş olduk. Böylelikle “Vue 3 ve Vuetify 3 ile Giriş/Kayıt Sayfası Oluşturma” yazımızın sonuna gelmiş bulunuyoruz. Bu yazı boyunca Vue 3 ile proje oluşturma, Vuetify 3 kurulumu, Vue ile component oluşturma ve Vuetify component’lerinden faydalanma konularında temel düzeyde bilgi edinmiş olduk. Bir sonraki yazıda görüşmek üzere…