vuejs/docs

SSR guide: add directive transforms

オープン

#1,261 opened on 2021/09/28

 (1 件のコメント) (0 件のリアクション) (0 人の担当者)Vue (5,039 件のフォーク)user submission
enhancementhelp wanted

Repository metrics

Stars
 (3,233 個のスター)
PR merge metrics
 (平均マージ 19d 15h) (30d で 3 merged PRs)

説明

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

コントリビューターガイド