Subscribe on changes!

Vue SSR Transforms lacking documentation

avatar
Sep 28th 2021

What problem does this feature solve?

The Documentation for writing SSR Transforms for directives, beside a very basic noop example, is nonexistent. I've written an Image Lazy Loading Directive and want to provide an SSR Transform. adding simple properties like src or poster are working flawless. When it comes to adding a style attribute the lack of documentation makes it very hard find a solution. The transform isn't very complex, but i'm struggling to add style='background-image:url()". See the Transform code below

export const vueLazyLoaderSSRTransform = (dir, node, context) =>
{
    if (node.tag === 'img')
    {
        return {
            props: [createObjectProperty('src', dir.exp)]
        }
    }

    if (node.tag === 'video')
    {
        return {
            props: [createObjectProperty('poster', dir.exp)]
        }
    }

    return {
        props: [
            createObjectProperty('style',
                createObjectExpression([
                    createObjectProperty('background-image',
                        createSimpleExpression('url()', true))
                ]))
        ]
    }
}

It would be great to have a more in deepth documentation on SSR Transforms

What does the proposed API look like?

Enhance the documentation in the SSR guide

avatar
Sep 28th 2021

Can you open an issue at https://github.com/vuejs/docs to keep track of this?

avatar
Sep 28th 2021