Element API, VueJs and Imager! I'm trying to do something akin to Andrew's excellent article whereby I have a 'more' button that spits out 6 more entries at a time. I'm nearly there, but running into some issues. I don't get past the spinner, and looks like I have some syntax issues lines 17 and/or 24 (because it works if I comment those out). Pretty new to Element API and working this way, and can't Google up anything that makes sense to me as a fix. Anyone help me out?

Here's my element-api.php:

&lt;?php

use craft\elements\Entry;
use craft\helpers\UrlHelper;

return [
    'endpoints' =&gt; [
        'api/news.json' =&gt; function() {
            return [
                'elementType' =&gt; Entry::class,
                'criteria' =&gt; ['section' =&gt; 'news'],
                'elementsPerPage' =&gt; 6,
                'transformer' =&gt; function(Entry $entry) {
                    // Generate new image transforms right away
                    craft()-&gt;config-&gt;set('generateTransformsBeforePageLoad', true);
                    // Get card image
                    $srcImage = $entry-&gt;cardImage-&gt;one();

                    if ($srcImage) {
                        $imageUrl = $srcImage-&gt;getUrl();
                        // Check if Imager plugin installed
                        if (craft()-&gt;plugins-&gt;getPlugin('Imager')) {
                            $image = craft()-&gt;imager-&gt;transformImage($srcImage, [
                                'width' =&gt; 800,
                                'format' =&gt; 'jpg',
                                'ratio' =&gt; 3/2,
                                'allowUpscale' =&gt; false,
                                'mode' =&gt; 'crop',
                                'jpegQuality' =&gt; 60,
                                'position' =&gt; $srcImage-&gt;focusPctX() . '% ' . $srcImage-&gt;focusPctY() . '%',
                                'interlace' =&gt; true
                            ], null, null);
                            $imageUrl = $image-&gt;url;
                        } else {
                            $imageUrl = $srcImage-&gt;getUrl(['width' =&gt; 800, 'height' =&gt; 533]);
                        }
                    } else {
                        $imageUrl = null;
                    }

                    return [
                        'title' =&gt; $entry-&gt;title,
                        'url' =&gt; $entry-&gt;url,
                        'jsonUrl' =&gt; UrlHelper::url("news/{$entry-&gt;slug}.json"),
                        'postDate' =&gt; $entry-&gt;postDate-&gt;format(\DateTime::ATOM),
                        'author' =&gt; ['name' =&gt; $entry-&gt;author-&gt;name],
                        'cardImageUrl' =&gt; $imageUrl,
                        'summary' =&gt; $entry-&gt;summary,
                    ];
                },
                'meta' =&gt; [
                    'description' =&gt; 'Latest news',
                ],
                'pretty' =&gt; true,
            ];
        },
    ]
];
So the problem is that you're using an example from my older article, which was written for Craft 2.x. This line:

craft()-&gt;config-&gt;set('generateTransformsBeforePageLoad', true);


...and also these lines:

if (craft()-&gt;plugins-&gt;getPlugin('Imager')) {
    $image = craft()-&gt;imager-&gt;transformImage($srcImage, [


...are specific to Craft 2.x; anything craft() is Craft 2.x; you can see some of the changes here: https://docs.craftcms.com/v3/extend/updating-plugins.html#high-level-notes