vuejs/docs

SSR guide: add directive transforms

开放

#1,261 创建于 2021年9月28日

 (1 条评论) (0 个反应) (0 位负责人)Vue (5,039 个派生)user submission
enhancementhelp wanted

仓库指标

星标
 (3,233 个星标)
PR 合并指标
 (平均合并 19天 15小时) (30 天内合并 3 个 PR)

描述

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 depth documentation on SSR Transforms

贡献者指南