Add support for Fetch method.

[Decipher]

As a Nuxt developer I want my components to Fetch data for preview.

[Decipher]

I had a bit of a play around with this, and got a very basic proof of concept for the passed code by adding the following code to https://github.com/vue-styleguidist/vue-live/blob/master/src/Preview.vue#L152

          if (options.fetch) {
            const fetchData = options.data;
            options.fetch.call(fetchData);
            const mergeData = { ...options.data(), ...fetchData };
            options.data = () => mergeData;
          }

However, this doesn't really take into account async or nested components.

I'll likely implement a workaround for the moment, but hopefully I can look more into this in the future.

[elevatebart]

Hello @Decipher

Thanks for taking the time to explicit this issue.
Right now maintaining vue-live is super easy since every component is in isolation.
One of its biggest appeals, for me, was the fact that it did not need a connection to a server.
The components documentation can be statically downloaded as a PWA.
Since all compilation happens in the Browser, users can lose connection when working without losing functionality.

We could try to create a "nuxt-live" component with all the abstractions provided by nuxt.
I would see this as a real challenge but a useful tool.

What is your opinion?

If we allow users to fetch data, what could go wrong?

[Decipher]

Hi @elevatebart,

In my case, my fetch() method is pulling data from a Vuex store, which is absolutely a far more complicated use case than a regular vue component should require, so I fully support the idea of a nuxt-live component.

I think an important part of of such a tool would be to facilitate the use of mock data where possible, however I can absolutely see the benefit of fetching real data as it would be a better example of real world usage.

In my case, I am writing a suite of Nuxt modules that communicate with a Drupal JSON:API backend, and one of my goals is to provide a demo that would allow users to connect to their own backend so they can see exactly what to expect when using the modules.

This would be quite useful in conjunction with Vue Styleguidist as well, as it would allow clients to see what a component looks like against real world data.