I run the Fetch hook from the example from the official site - vue.js

Question

I run the Fetch hook from the example from the official site. "nuxt": "^ 2.14.7"
Gives an error message
fetch.client.js:109 Error in fetch(): TypeError: Cannot read property '$get' of undefined
at _callee$ (index.js?!./node_modules/vue-loader/lib/index.js?!./pages/Video.vue?vue&type=script&lang=js&:74)
at tryCatch (runtime.js:63)
at Generator.invoke [as _invoke] (runtime.js:293)
at Generator.eval [as next] (runtime.js:118)
at asyncGeneratorStep (asyncToGenerator.js:5)
at _next (asyncToGenerator.js:27)
at eval (asyncToGenerator.js:34)
at new Promise (<anonymous>)
at eval (asyncToGenerator.js:23)
at VueComponent.fetch (index.js?!./node_modules/vue-loader/lib/index.js?!./pages/Video.vue?vue&type=script&lang=js&:88)
My code
<script>
export default {
layout: 'videoLayout',
name: "Video",
async fetch () {
this.posts = await this.$http.$get('https://jsonplaceholder.typicode.com/posts')
.then(posts => posts.slice(0, 20))
console.log(this.posts)
},
fetchOnServer: false,
data: () => ({
posts: [],
videos: [
{
color: 'red lighten-2',
icon: 'mdi-star',
id: 1,
title: '22.10.2020 Блага Вість Черкаси',
videoId: 'GpgmeaSQ2bc',
},
{
color: 'purple darken-1',
icon: 'mdi-book-variant',
id: 2,
title: '22.10.2020 Блага Вість Черкаси',
videoId: '25yGGiYARbc',
},
{
color: 'green lighten-1',
icon: 'mdi-airballoon',
id: 3,
title: '22.10.2020 Блага Вість Черкаси',
videoId: 'mZbHFWWd6fg',
},
{
color: 'indigo',
icon: 'mdi-buffer',
id: 4,
title: '22.10.2020 Блага Вість Черкаси',
videoId: 'mZbHFWWd6fg',
},
],
}),
methods: {
refresh() {
this.$fetch()
},
ready (event) {
this.player = event.target
},
method (url) {
this.videoId = this.$youtube.getIdFromURL(url)
this.startTime = this.$youtube.getTimeFromURL(url)
}
}
}
</script>

Answer 1

I think you may need to install http module first like so:
npm install #nuxt/http
Then add the following to nuxt.config.js:
export default {
modules: [
'#nuxt/http',
],
http: {
// configure any options like
// baseURL: "https://jsonplaceholder.typicode.com"
}
}
Then you can make the calls as you were in your code:
async fetch () {
this.posts = await this.$http.$get('/posts').then(posts => posts.slice(0, 20))
}