Halo teman-teman semuanya pada kesempatan kali ini kita akan membuat beberapa component yang akan kita gunakan di dalam project Vue Js kita, component ini merupakan sebuah template yang bisa kita gunakan berulang kali tanpa harus menuliskannya lagi.
Langkah 1 - Membuat Component
Sekarang silahkan teman-teman buat sebuah folder baru dengan nama posts di dalam folder src/components/ kemudian di dalam folder posts tersebut silahkan buat 3 file berikut ini :
- Index.vue
- Create.vue
- Edit.vue
Jadi jika kita perhatikan structure folder project Vue Js kita akan menjadi seperti berikut ini :
node_modules/
public/
src/
├── assets/
├── components/
├── posts/
├── Index.vue
├── Create.vue
├── Edit.vue
├── App.vue
├── main.js
.gitignore
babel.config.js
package-lock.json
package.json
README.md
Sekarang kita lanjutkan untuk menambahkan sample template di dalam component kita. Langsung saja kita mulai.
Langkah 2 - Component Index Posts
Jadi disini kita akan menambahkan beberapa template sample di dalam component yang sudah kita buat sebelumnya, siilahkan buka file src/components/posts/Index.vue kemudian masukkan kode berikut ini :
<template>
<div class="index-posts">
ini adalah component Index Posts
</div>
</template>
<script>
export default {
}
</script>
Langkah 3 - Component Create Post
Sekarang kita lanjutkan untuk memberikan beberapa sample untuk template di dalam component create post, silahkan buka file src/components/posts/Create.vue dan masukkan kode berikut ini :
<template>
<div class="add-posts">
ini adalah component Tambah Posts
</div>
</template>
<script>
export default {
}
</script>
Langkah 4 - Component Edit Post
Selanjutnya yang terakhir kita juga akan menambahkan template sample untuk component edit post, silahkan buka file src/components/posts/Edit.vue dan masukkan kode berikut ini :
<template>
<div class="edit-posts">
ini adalah component Edit Posts
</div>
</template>
<script>
export default {
}
</script>
Di tutorial selanjutnya kita akan belajar bagaimana cara menambahkan beberapa dependensi untuk project Vue Js kita seperti Vue Router, Axios dan yang lain-lain.
Source Code
CodeIgniter Restful API : https://github.com/SantriKoding-com/CodeIgniter4-Restful-API
Vue Js : https://github.com/SantriKoding-com/Vue-Js-CodeIgniter
Terima Kasih