前提
- 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 コメント