Question: is it possible to use async shortcodes inside Vue components?

[timonforrer]

I'd like to use @11ty/eleventy-img inside my Vue components.

For this I followed the instructions on https://github.com/11ty/eleventy-img for setting up the shortcode inside .eleventy.js and now I'm trying to render the image inside a Vue component like this:

<template>
    {{ image("./src/images/some-image.jpg","Alt description") }}
</template>

It doesn't throw any errors but only renders [object Promise] to the page.

Any ideas what I'm missing? Is it actually possible to use async Javascript functions inside Vue components yet?

[zachleat]

Not yet—sorry! Vue 2.x is heavily synchronous—we’re waiting on a stable release of https://github.com/vuejs/rollup-plugin-vue to upgrade

[zachleat]

That being said, I am using eleventy-img with this Vue architecture on netlify.com. Basically I have two shortcodes: one synchronous one that calculates the expected file names (see https://github.com/11ty/eleventy-img/blob/d136a711ec9008f3a7c0a337ba782d7d07fbf448/img.js#L277) and another asynchronous one that does the actual image file processing (it spits files right into the output _site folder) and Vue doesn’t really wait for the async one to finish

[seb-celinedesign]

Hi Zach, same problem here with js building. Almost all js bundler or minifier are asynchronous. Like Terser in the jsmin shortcode in 11ty quick tips. If it's impossible to execute async shortcode, how did you manage your inline js code on netlify.com with eleventy plugin vue ?

[zachleat]

There is an example of how I use Eleventy Image with sync limitations here:

https://www.11ty.dev/docs/plugins/image/#synchronous-usage

If you know where the files will live when the async tasks finish, you can point to them and not await for the task to finish.

Again, yeah I know this isn’t ideal. I think this will be better with Vue 3.x.

[timonforrer]

@zachleat nice – Thanks for the heads up! I can definitely work with that approach.

[zachleat]

So, I did figure this out with both Vue 2 and Vue 3 versions of this plugin:

• Vue plugin 1.x (Vue 3) example: https://github.com/11ty/eleventy-plugin-vue#advanced-run-async-things-before-component-render
• Vue plugin 0.x (Vue 2) example is the same code

Both require Eleventy core 1.0+