Skip to content

Instantly share code, notes, and snippets.

View hibuno's full-sized avatar
🌙
Working at Night

Muhibbudin Suretno hibuno

🌙
Working at Night
View GitHub Profile
@hibuno
hibuno / nuxt.config.js
Created January 27, 2018 03:05
Add ionicons
...
{ rel: 'stylesheet', type: 'text/css', href: 'http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css' }
...
@hibuno
hibuno / navigation.vue
Created January 27, 2018 02:54
Add function go back
<template>
<div>
<nav class="navbar navbar-expand-lg">
<div v-if="!$store.state.article.title" class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
@hibuno
hibuno / detail.vue
Created January 27, 2018 02:52
Add new page detail.vue
<template>
<div class="mt-5">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-8">
<img :src="article.urlToImage" alt="Card image cap" class="img-fluid">
<p class="card-text"><small class="text-muted">{{ article.publishedAt }} - {{ article.author }} - {{ article.source.name }}</small></p>
<h5 class="card-title">{{ article.title }}</h5>
<p class="card-text">{{ article.description }}</p>
</div>
@hibuno
hibuno / index.vue
Created January 27, 2018 02:48
Add function open detail
...
methods : {
...
},
openDetail (data) {
this.$store.commit('setArticle', data)
this.$router.replace({ 'path': '/detail' })
}
},
...
@hibuno
hibuno / gist:230640b0dc7a3140bf5adaf072801621
Created January 27, 2018 02:45
Add event open detail
<div class="card" v-for="item in posts" v-bind:key="item.key">
@hibuno
hibuno / index.vue
Created January 27, 2018 02:45
Add event open detail
<div class="card" v-for="item in posts" v-bind:key="item.key" @click="openDetail(item)">
@hibuno
hibuno / index.js
Created January 27, 2018 02:44
Create vuex store
import Vuex from 'vuex'
const createStore = () => {
return new Vuex.Store({
state: {
article: {}
},
mutations: {
setArticle (state, data) {
state.article = data
@hibuno
hibuno / index.vue
Created January 27, 2018 02:25
Add function load more
...
export default {
methods : {
loadMore () {
this.posts = []
this.current += 9
this.allPost.map((item, key) => item.description !== null && this.posts.length < this.current ? this.posts.push(item) : '')
}
},
...
@hibuno
hibuno / index.vue
Created January 27, 2018 02:21
Add variable current
...
export default {
data () {
return {
allPost: [],
posts: [],
current: 9
}
},
...
@hibuno
hibuno / index.vue
Created January 27, 2018 02:20
Add button load more and style
// Add button "load more" before closing tag </template>
<button class="btn btn-primary btn-more" @click="loadMore">Load More</button>
</div>
</template>
// Add style for button "load more" after tag <style>
<style lang="scss" scoped>
.btn-more {