You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This API request fetches your blog posts. Your account comes with one example post which you'll see in the response.
54
54
55
55
## Display posts
56
-
To display posts we create a `/blog` route (using vue-router) in our app and fetch blog posts from the Butter API, as well as a `/blog/:slug` route to handle individual posts.
56
+
57
+
To display posts we create a `/blog` route (using Vue Router) in our app and fetch blog posts from the Butter API, as well as a `/blog/:slug` route to handle individual posts.
57
58
58
59
See the ButterCMS [API reference](https://buttercms.com/docs/api/?javascript#blog-posts) for additional options such as filtering by category or author. The response also includes some metadata we'll use for pagination.
59
60
@@ -86,7 +87,7 @@ export default new Router({
86
87
87
88
Then create `components/BlogHome.vue` which will be your blog homepage that lists your most recent posts.
88
89
89
-
```javascript
90
+
```html
90
91
<script>
91
92
import { butter } from'@/buttercms'
92
93
exportdefault {
@@ -103,7 +104,6 @@ Then create `components/BlogHome.vue` which will be your blog homepage that list
103
104
page:1,
104
105
page_size:10
105
106
}).then((res) => {
106
-
// console.log(res.data)
107
107
this.posts=res.data.data
108
108
})
109
109
}
@@ -113,18 +113,17 @@ Then create `components/BlogHome.vue` which will be your blog homepage that list
113
113
}
114
114
}
115
115
</script>
116
-
Display the result
117
116
118
117
<template>
119
118
<divid="blog-home">
120
119
<h1>{{ page_title }}</h1>
121
-
<!-- Create v-for and apply a key forVue. Example is using a combination of the slug and index -->
120
+
<!-- Create `v-for` and apply a `key` for Vue. Here we are using a combination of the slug and index.-->
122
121
<divv-for="(post,index) in posts":key="post.slug + '_' + index">
123
122
<router-link:to="'/blog/' + post.slug">
124
123
<articleclass="media">
125
124
<figure>
126
-
<!-- Bind results using a ':'-->
127
-
<!-- Use a v-if/elseif their is a featured_image -->
125
+
<!-- Bind results using a `:`-->
126
+
<!-- Use a `v-if`/`else` if their is a `featured_image`-->
Now our app is pulling all blog posts and we can navigate to individual posts. However, our next/previous post buttons are not working.
196
192
197
-
One thing to note when using routes with params is that when the user navigates from /blog/foo to /blog/bar, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one.
193
+
One thing to note when using routes with params is that when the user navigates from `/blog/foo` to `/blog/bar`, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one.
198
194
199
-
<pclass="tip">Be aware, that using the component this way will mean that the lifecycle hooks of the component will not be called. Visit the Vue.js docs to learn more about [Dynamic Route Matching](https://router.vuejs.org/en/essentials/dynamic-matching.html)</p>
195
+
<pclass="tip">Be aware, that using the component this way will mean that the lifecycle hooks of the component will not be called. Visit the Vue Router's docs to learn more about [Dynamic Route Matching](https://router.vuejs.org/en/essentials/dynamic-matching.html)</p>
200
196
201
197
To fix this we need to watch the `$route` object and call `getPost()` when the route changes.
202
198
203
-
Updated `script` section in `components/BlogPost.vue`:
199
+
Updated `<script>` section in `components/BlogPost.vue`:
204
200
205
-
```javascript
201
+
```html
206
202
<script>
207
203
import { butter } from'@/buttercms'
208
204
exportdefault {
@@ -249,7 +245,7 @@ See the ButterCMS API reference for more information about these objects:
249
245
250
246
Here's an example of listing all categories and getting posts by category. Call these methods on the `created()` lifecycle hook:
251
247
252
-
```
248
+
```javascript
253
249
methods: {
254
250
...
255
251
getCategories() {
@@ -280,8 +276,6 @@ created() {
280
276
281
277
An alternative pattern to consider, especially if you prefer writing only in Markdown, is using something like [Nuxtent](https://nuxtent.now.sh/guide/writing#async-components). Nuxtent allows you to use `Vue Component` inside of Markdown files. This approach would be akin to a static site approach (i.e. Jekyll) where you compose your blog posts in Markdown files. Nuxtent adds a nice integration between Vue.js and Markdown allowing you to live in a 100% Vue.js world.
282
278
283
-
284
279
## Wrap up
285
280
286
-
That's it! You now have a fully functional CMS-powered blog running in your app. We hope this tutorial was helpful and made your development experience with Vue.js even more enjoyable :)
287
-
281
+
That's it! You now have a fully functional CMS-powered blog running in your app. We hope this tutorial was helpful and made your development experience with Vue.js even more enjoyable :)
0 commit comments