Projenizde kullanabileceğiniz 5 Nuxt modülü

Giriş

Nuxt ekibi ve topluluğu Nuxt modüllerini popülerlik, tür ve Github yıldızlarına göre dosyalamanıza olanak tanıyan kapsamlı bir Nuxt Modül Gezgini oluşturdu.

Bu Nuxt Modülü ekosisteminin ne kadar sağlam hale geldiğine dair bir hareketti. Sizde gerçekten yararlı modülleri bulmayı başarabilirsiniz.

Liste oldukça korkutucu olabilir. (Tabi ki iyi şekilde), bu yüzden sadece sitemde bana yardımcı beş modülü paylaştım. Bunlar tavsiye edebileceğim değil, sadece bana yardımcu olduğunu düşündüğüm beş tanesi!

1. Nuxt/content

Sitemde içeriğimi yönetmek için bir CMS kurmam gerekliydi. İçeriğimi Markdown'da yazmak, Vue bileşenlerini entegre etme ve sürüm kontrolü yapabilmek istedim. Nuxt content modülünde bunların hepsi ve daha fazlası var!

En iyi özelliklerden bazıları:

• YAML kullanarak makaleye herhangi bir değişken ekleme yeteneği
• createdAt, updatedAt ve toc (table of contents)(içindekiler) değişkenlerini otomatik olarak enjekte etme yeteneği
• Sayfada doğrudan düzenlemek için "Çift tıkla" ve değişiklikleri hemen görebilme yeteneği
• Vue bileşenlerini doğrudan markdown'a yerleştirebilme yeteneği

Bu modülün daha birçok güzel özelliği var, ama yeterince bahsedemiyorum. Link üzerinden detaylı inceleyebilirsiniz.

2.Nuxt/tailwind

Front-end web geliştirici iseniz muhtemelen TailwindCSS adını duymuşsunuzdur. Eğer aşina değilseniz, sonsuz miktarda özelleştirme ve iyi düşünülmüş varsayılanlara sahip "utility-first" CSS çerçevesidir. Siz de benim gibi Back-End developer iseniz, bir kere denedikten sonra vazgeçemeyebilirsiniz.

Bu modül, Nuxt projenizde Tailwind'i kurup çalıştırmanızı son derece kolaylaştırır ve uygulamanızda Tailwind yapılandırmasına doğrudan başvurmanıza olanak tanır. Ayrıca Karanlık Mod ve listedeki bir sonraki modülle de çok güzel çalışıyor.

3. Nuxt/Color-Mode

Bu modül, kullanıcıların ilk ziyaretlerinde tercih ettikleri renk düzenini algılamayı veya tercihlerini değiştirip sonraki ziyaretler için kaydetmeyi inanılmaz derecede kolaylaştırır. Ayrıca Nuxt/Tailwind ile de uyumlu çalışır.

Şablonlarınızda veya bileşenlerinizde $colorMode.preference değerini doğrudan okuyabilir ve mevcut tercihlerine göre farklı içerik render edebilirsiniz. Renk modu tercihini değiştirmek, aşağıdaki gibi bir toggle işlevi çağırmak bu kadar kolay:

<template>
  <button @click="toggleColorMode">Toggle Color Mode</button>
</template>

<script>
export default {
  methods: {
    toggleColorMode() {
      this.$colorMode.preference = this.$colorMode.value == "light" ? "dark" : "light";
    }
  }
}
</script>

4. Nuxt/Cloudinary

Web sitenizin performansını artırmanın en kolay yollarından biri, görüntü optimizasyonlarıdır. Nuxt/Cloudinary bunu son derece basit hale getirir.

Cloudinary, görüntü ve video içeriğini yönetmek için bir çözümdür (ücretsiz planla birlikte gelir). Bu hizmet, güçlü dönüşümlerle anında görüntüleri optimize etme ve hatta görüntülere metin ekleme yeteneği sağlar.

Maya Shavin'in sürdüğü bu harika modül, adeta bir sihir gibi hissettiriyor. Nuxt projenize bir Cloudinary Instance ($cloudinary) enjekte eder ve bunu kullanarak işlemler yapabilirsiniz.

Cloudinary instance'ınızda depolanan görüntüleri veya videoları alabilir ve işlemler gerçekleştirebilirsiniz.

const url = this.$cloudinary.image.url('sample', { crop: 'scale', width: 200 })

Hatta remote görüntülerinizi alabilir ve aynı şekilde dönüşümleri gerçekleştirebilirsiniz.

const url = this.$cloudinary.image
              .fetchRemote(
                'https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png',
                { crop: 'scale', width: 200 })

Modül ayrıca, şablonlarınızda her yerde kullanabileceğiniz bazı hazır Vue bileşenleri sağlar.

5. Nuxt/feed

Bu modül, websitenizin içeriğinden RSS, Atom veya JSON feed oluşturmanıza yardımcı olur.

İnsanlar hala RSS beslemelerini kullanıyor mu diye düşünüyor olabilirsiniz. Evet, Chris Coyier (CSS Tricks ve CodePen'in kurucusu) bunu kullanıyor! 😮

Who’s gonna read your personal blog because it has an RSS feed? I’m gonna read your personal blog because it has an RSS feed. pic.twitter.com/mtcyKhEVet

— Chris Coyier (@chriscoyier) January 7, 2020

Bu işlemin harika olmasının ana nedeni, Dev.to gibi bir platformda yayın yapmaya karar verirseniz, RSS feed URL'inizi sağlayarak tüm içeriğinizin taslak olarak kaydedilmesini ve hemen yayınlanmasını sağlayabilirsiniz. İçeriğinizi ilk olarak kendi sitenizde yayınlayıp daha sonra farklı platformlara yayın yapmanın, SEO sıralamalarınız için harika olduğu bilinen bir gerçektir (içeriğiniz için uygun bir canonical URL tanımladığınız sürece).

Ayrıca, Nuxt Content kullanıyorsanız resmi belgelerde açıklanan birkaç yöntemi kullanarak bir yayın oluşturabilirsiniz!

Özet

Daha önce de söylediğim gibi, binlerce harika modül var, bunlar sitemde kullandığım sadece 5 tanesi.

Bu blogun yazıldığı an itibariyle, şu anda modules.nuxtjs.org üzerinde kullanılabilecek 200'den fazla Nuxt Modülü mevcut. Bir göz atmanızı tavsiye ederim ve kesinlike Nuxt modüllerinin muhteşem dünyasını keşfederken eğlenin!

Buraya kadar okuduğunuz için teşekürler.