DEV Community

Vue.js Pattern for Async Requests: Using Renderless Components

Lukas Hermann on August 04, 2019

Most Vue apps need asynchronous HTTP requests and there are many ways to realize them: in the mounted() lifecycle hook, in a method triggered by a ...

Read full post

Michał Kowalski • Aug 5 '19

Hey, I wanted to introduce this in project in my work. Is this solution working well with post, delete and put requests? My project is really complex. Does it scale well?

Markus Oberlehner • Aug 8 '19

You might be interested in my article about this very same topic (funnily enough also inspired by the same podcast episode): Building Renderless Components to Handle CRUD Operations in Vue.js

Tiago Martinho • Aug 16 '19

Whoooa, good solution.

I am trying to reproduce your solution and a question has come up. my goal is to pass data torouter-view, I am now passing as props, but I do not know if it is the best solution?

On each page I have a variable corresponding to the page that will work this data.

Do you have any suggestions?

Markus Oberlehner • Aug 18 '19

Passing props to <router-view> is fine in my opinion!

Tiago Martinho • Aug 19 '19

ty :p

a problem occured. On some pages, the props data is expected to be an object, but on others it is an array.

I thought I'd give the property multiple types, or is there a better solution?

Solution

props: {
    data: Object | Array
},

Markus Oberlehner • Aug 24 '19

LGTM ;)

Elad Cohen • Aug 14 '19

Great article. Thanks!

Just one point - I think we should start to use Vue.js Function API to wrap this logic as described here:
blog.bitsrc.io/vue-js-3-future-ori...

Lukas Hermann • Aug 14 '19

Thanks! As soon as the first early version of Vue 3 is available I will update this article with the new syntax.

SaruTole • Aug 22 '19

You might want to use multiple words for a component name.

This recommendation is considered essential as a means to prevent conflicts with existing and future HTML elements (since all HTML elements are a single word):
vuejs.org/v2/style-guide/#Multi-wo...

webdeasy.de • Aug 9 '19

Great article, good job!

Erkand Imeri • Aug 5 '19

Great one. Thanks Lukas.

Lukas Hermann • Aug 5 '19

Thanks :)

Tiago Martinho • Aug 16 '19

Good article :p

Ken • Oct 21 '19

Lukas,

Great article, I have a quick question. You advocate doing your API calls in the mounted() hook. I've always read that you should kick off async stuff in created(). Your thoughts?

KLC

Lukas Hermann • Oct 21 '19

Hi Ken,

in fact, I don't know myself which one is better, mounted or created hook. I pretty much picked one at random :)