Nuxt ile Veri Listeleme
Bu yazıda birlikte bir api’ya istek yapıp dönen response’u tabloda göstereceğiz.
Projelerin genel yapısıyla başlayalım.
app.vue dosyamız diğer frameworklerde de olduğu gibi ana dosyamız aslında burada home’u temsil eden sayfamızın render olmasını sağlayacağız.
app.vue altında iki farklı sayfamız olacak:
- Home — tüm elemanların listelendiği
- Details — ilgili elemanın detaylarını görüntülediğimiz sayfa
Burada yapmamız gereken ilk şey pages klasörü oluşturup içerisinde bir index.vue dosyası oluşturmak. app.vue’ya ekleyeceğimiz nuxtlayout ve nuxtpages yapısı sayesinde pages klasörü altına eklediğimiz her bir component için routing yapısını kendisi oluşturacak.
Pages klasörü altına eklediğimiz index.vue tüm dataları gösterecek olan sayfa. Yani bu index sayfasında bir tablo olacak ve tüm kripto para birimleri tabloda listelenecek. Tablo içerisinde para birimlerinin isimleri, değerleri ve detaylarına erişecebileceğimiz bir alan olacak. Yani her para birimi için bir “currency/:id” olacak. Id dinamik olarak her değer için farklı bir değer alacak. Pages yönlendirmemiz yukarıda belirttiğim gibi olacağından önce bir currency klasörü oluşturdum ardından id.vue klasörümü ekledim.
