pugでmixinを使用するとv-slotの記述が属性値としてコンパイルされてしまう

前提

  • pugで生成されるhtmlにvueコンポーネントが含まれている

実現したいこと

  • vueコンポーネントの部分をmixinで共通化したい

発生している問題・エラーメッセージ

  • vueコンポーネントのv-slotの記述が属性値としてコンパイルされてしまう

該当のソースコード

index.pug

pug

my-component template(v-slot:slot_name) | slot内記述

コンパイル後は
index.html

html

<my-component> <template v-slot:slot_name> slot内記述 </template></my-component>

となってくれますが、mixinで共通化するため
mixin.pug

pug

mixin myComponent(arg) my-component template(v-slot:slot_name) | #{arg}

index.pug

pug

include mixin.pug+myComponent('slot内記述')

と記述すると
index.html

html

<my-component> <template v-slot:slot_name="v-slot:slot_name"> slot内記述 </template></my-component>

というようにスロット名を指定するv-slot:slot_nameが属性値としてコンパイルされてしまい、
結果的にVueの方でコンパイルエラーとなってしまいます。

試したこと

https://pugjs.org/language/attributes.html
https://pugjs.org/language/mixins.html
公式等確認しつつv-slot:slot_name="true"等試してみましたが解決出来ませんでした。

補足情報(FW/ツールのバージョンなど)

  • "pug": "^3.0.2",
  • "pug-cli": "^1.0.0-alpha6",

コメントを投稿

0 コメント