10 Repositori GitHub Admin Template Gratis Berbasis Vue

Desember 15, 2019


Estimasi Waktu Baca: 5 menit

Vue.js atau kerap disapa Vue merupakan library sekaligus framework Javascript open source yang dirancang untuk membangun kebutuhan antarmuka pengguna. Tak terkecuali antarmuka pada bagian Admin untuk manajemen konten yang lebih efisien.


Pada kesempatan kali ini kopiding.in akan berbagi informasi mengenai 10 Repositori Github Admin Template gratis berbasis Vue yang siapa tahu dapat membantu kalian mempermudah pengerjaan projek.


1. Star Admin

StarAdmin template merupakan template admin gratis berbasis Bootstrap 4 dan Vue. StarAdmin template dibangun dengan mengimplementasikan komponen Bootstrap 4 dan sistem grid untuk Vue. StarAdmin sudah sepenuhnya responsif, fleksibel, dan dapat kalian gunakan untuk proyek yang memiliki basis yang sama (Bootstrap-Vue).


Fitur
  • Notifikasi
  • Widgets
  • Halaman Sampel
  • Komponen UI
  • Tabel
  • Ikon
  • Form
  • dan lain-lain

Cara Install
# clone repository githubnya
$ git clone https://github.com/BootstrapDash/StarAdmin-Free-Vue-Admin-Template.git

# buka direktori berikut
$ cd StarAdmin-Free-Vue-Admin-Template/source/

# install paket turunannya via npm
npm install

# jalankan versi development dan buka url berikut di browser localhost:8080
npm run dev

# build untuk produksi
npm run build

2. Arbano

Arbano merupakan salah satu dari sekian banyak template admin gratis berbasis Vue dari Jewel Theme yang bebas digunakan untuk kebutuhan projek personal atau komersil. Versi arbano yang berada di github merupakan versi light yang berarti bersifat gratis sedangkan jika ingin mendapatkan opsi lebih banyak kalian bisa berlangganan versi pro dari template ini.


Fitur
  • Cepat dan Ringan
  • Mudah dikustom dan kode mudah dipahami
  • Menggunakan versi Bootstrap dan Vue terbaru
  • Memiliki Animasi Progrees Bar dan Vue Progress Bar cantik
  • Dibangun dengan Vue-CLI dan SCSS
  • Tersedia banyak ikon
  • Tersedia banyak grafik, mis: Line Chart, Bar Chart, Doughnut Chart, Pie Chart, Polar Area Chart.
  • Terdapat Widget dan Component bawaan
  • Terintegrasi dengan berbagai pustaka Google Maps lanjutan seperti Google Maps, Leaflet Maps, Bubble Maps, Line Maps
  • dan lain-lain

Cara Install
# clone repository githubnya
$ git clone https://github.com/litonarefin/arbano.git

# buka direktori arbano
$ cd arbano-master/
NPM
# install paket turunannya via npm
npm install

# jalankan versi development dan buka url berikut di browser localhost:8080
npm run dev

# build untuk produksi
npm run build
YARN
# clone repository githubnya
$ git clone https://github.com/litonarefin/arbano.git

# buka direktori arbano
$ cd arbano-master/

# install paket turunannya via yarn
yarn install

# jalankan versi development dan buka url berikut di browser localhost:8080
yarn run dev

# build untuk produksi
yarn run build

3. iView Admin

iview admin template dibangun dengan basis Vue.js dan UI Toolkit iview. Berlisensi MIT, jadi bisa kalian unduh secara gratis dan modifikasi sesuka hati.


Fitur
  • Login/Logout
  • Permission Authentication
  • i18n
  • Components
  • Form
  • Table
  • Error Page
  • Router
  • Theme
  • Shrink the sidebar
  • Tag Navigation
  • Breadcrumb Navigation
  • Fullscreen/Exit fullscreen
  • Lock Screen
  • The message center
  • Personal center

Cara Install
# clone the project
git clone https://github.com/iview/iview-admin.git

// install dependencies
npm install

// develop
npm run dev

npm run build

4. Vuestic Admin

Vuestic Admin adalah template admin gratis yang dibangun oleh Epicmax dan didesain oleh Vasili Savitski dengan 44 lebih UI komponen di dalamnya.


Fitur
  • Responsive Layout
  • Grafik
  • Progress Bar
  • Form
  • Date Picker
  • Timelines
  • Medium Editor
  • Maps (Google, Yandex, Leaflet, amMap)
  • Halaman 404, login, dan sign up
  • Ikon
  • Slider
  • Static Tabel dan Datatables
  • Chat
  • dan lain-lain

Cara Install
# clone repo
$ git clone https://github.com/epicmaxco/vuestic-admin.git myproject

# masuk ke direktori vuestic
$ cd vuestic-admin-master/
NPM
# Install paket depedenci via npm
$ npm install

# jalankan vuestic dan buka url localhost:8080 di browser
$ npm run serve

# build untuk produksi 
$ npm run build
YARN
# Install paket depedenci via yarn
$ yarn install

# jalankan vuestic dan buka url localhost:8080 di browser
$ yarn serve

# build untuk produksi 
$ yarn build

5. Vue Material Admin

Vue material admin dibuat dengan basis Vue Material Desain atau biasa dikenal dengan Vuetify oleh Wang Qiangshen dan berlisensi MIT.


Fitur
  • Dibuat dengan Vue-CLI 3.x
  • Inbox template
  • Chat template
  • Widgets: Grafik, List, Sosial, Statistik
  • Tabel
  • dan lain-lain

Cara Install
# clone repo
$ git clone https://github.com/tookit/vue-material-admin.git

# masuk ke direktori vuestic
$ cd vue-material-admin-master/

# install paket depedency
yarn install

# compile dan jalankan mode development
yarn run serve

# compile dan minifie untuk produksi
yarn run build

6. CoreUI Vue Bootstrap

CoreUI admin template merupakan sebuah admin template gratis berbasis Vue dan Bootstrap yang dibuat oleh Ɓukasz Holeczek (creativeLabs), sama seperti arbano, coreui yang bersifat gratis dan memiliki cukup banyak fitur ini merupakan versi light jika ingin merasakan fitur lebih dari template ini silahkan berlangganan yang versi pro.


Fitur
  • Responsive Layout
  • Dibangun dengan Vue dan Bootstrap
  • Konfigurasi Warna dan Typografi tema
  • Components: Tombol, Grafik, Ikon, Notifikasi, Widgets
  • Pages: Login, Register, Error 404, Error 500
  • dan lain-lain

Cara Install
# clone the repo
$ git clone https://github.com/coreui/coreui-free-vue-admin-template.git CoreUI-Vue

# go into app's directory
$ cd CoreUI-Vue

# install app's dependencies
$ npm install

# serve with hot reload at localhost:8080
npm run serve

# build for production with minification
npm run build

7. Vue Antd Admin

vue ant desain admin merupakan admin template gratis berbasis Vue yang mana dibangun dengan teknologi seperti vue, antv-dataset, ant-design-vue, axios, enquire.js, mock.js, vuex, dan lain sebagainya. Template ini dibuat oleh user github iczer yang berasal dari shenzheng China jadi bahasa yang digunakan di dalamnya tentunya masih menggunakan bahasa Mandarin.


Fitur
  • Dashboard
  • Form
  • Button
  • Error Page
  • Login Page & Register Page
  • Invoice
  • Card
  • dan lain-lain

Cara Install
$ git clone https://github.com/iczer/vue-antd-admin.git

$ cd vue-antd-admin/

$ yarn install

$ yarn start

8. Admin One Laravel Dashboard

Template admin gratis berlisensi MIT ini dikembangkan oleh user bernama vikdiesel. Dibangun dengan kombinasi teknologi Vue, Buefy, dan Bulma. Jika ingin menikmati fitur lebih silahkan berlangganan versi premiumnya.


Fitur
  • Dibangun dengan Vue CLI 3.x, Buefy, Bulma
  • Sumber SCSS dengan variabel
  • Dashboard
  • Tabel
  • Form
  • Profile
  • dan lain-lain

Cara Install
$ git clone https://github.com/vikdiesel/admin-one-vue-bulma-dashboard.git

$ cd admin-one-laravel-dashboard/

$ npm install

$ npm run serve

$ npm run build

9. Shards Dashboard Vue

Template admin gratis untuk para blogger berbasis Vue dengan desain sistem yang modern dan tersedianya banyak template serta komponen khusus di dalamnya.


Fitur
  • Dibangun menggunakan Shards Vue, Chart.js, Vue Datepicker, NoUiSlider, Quill, Material Icons, Font Awesome Icons
  • Halaman Blog Post
  • Halaman New Post
  • Forms dan Components
  • Tables
  • Halaman Profile
  • Halaman Error

Cara Install
$ git clone https://github.com/DesignRevision/shards-dashboard-vue.git

$ cd shards-dashboard-vue/

$ yarn install

$ yarn serve

10. Sing App Vue Dashboard

Admin template ini merupakan versi kecil dari Sing app-vue full. Dibangun dengan vue-cli-3 dan Bootstrap 4 oleh Flatlogic. Selain itu kita dapat dengan mudah menyesuaikan template dengan mengubah variabel SCSS pada file _variables.scss.


Fitur
  • Bootstrap 4+ dan SCSS
  • Responsive Layout
  • Simple login/logout
  • Komponen Bootstrap yang ditata seperti button, modals, dan sebagainya
  • Typograpy
  • Tabel
  • Grafik
  • Notifikasi
  • Ikon
  • Maps
  • Chat
  • dan lain-lain

Cara Install
$ git clone https://github.com/flatlogic/sing-app-vue-dashboard

$ cd sing-app-vue-dashboard
NPM
$ npm install

$ npm run serve
YARN
yarn install

yarn run serve

Kategori