DEV Community

Cover image for Vue.js Pattern for Async Requests: Using Renderless Components

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 ...
Collapse
 
sammerro profile image
Michał Kowalski

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?

Collapse
 
maoberlehner profile image
Markus Oberlehner

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

Collapse
 
tiagosmartinho profile image
Tiago Martinho

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?

question

Thread Thread
 
maoberlehner profile image
Markus Oberlehner

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

Thread Thread
 
tiagosmartinho profile image
Tiago Martinho

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
},
Thread Thread
 
maoberlehner profile image
Markus Oberlehner

LGTM ;)

Collapse
 
sammerro profile image
Michał Kowalski

I read your article several months ago. Great content. I even sent the link to my coworkers! Although I was affraid to introduce it to our code.
Now I have found another post and started to think about it more seriously.
But probably I will use it in a new project.

Collapse
 
lhermann profile image
Lukas Hermann

This is awesome and a really smart solution! Have you tried this with server-side form validation?

Thread Thread
 
maoberlehner profile image
Markus Oberlehner

Thanks! No, haven't used this extensively myself yet.

Collapse
 
lhermann profile image
Lukas Hermann

I am only using it with get requests. post and put tend to have additional validation steps which I usually do the regular way.
As for scaling: using the renderless component with get requests scales exceptionally well. It works just as well for small components as for really large lists with many parameters and changing options.

Collapse
 
sammerro profile image
Michał Kowalski

Thank you for the response!

Collapse
 
sarutole profile image
SaruTole

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...

Collapse
 
eladc profile image
Elad Cohen

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...

Collapse
 
lhermann profile image
Lukas Hermann

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

Collapse
 
edimeri profile image
Erkand Imeri

Great one. Thanks Lukas.

Collapse
 
lhermann profile image
Lukas Hermann

Thanks :)

Collapse
 
webdeasy profile image
webdeasy.de

Great article, good job!

Collapse
 
tiagosmartinho profile image
Tiago Martinho

Good article :p

Collapse
 
kenafh profile image
Ken

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

Collapse
 
lhermann profile image
Lukas Hermann

Hi Ken,

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