前提
- pugで生成されるhtmlにvueコンポーネントが含まれている
実現したいこと
- vueコンポーネントの部分をmixinで共通化したい
発生している問題・エラーメッセージ
- vueコンポーネントのv-slotの記述が属性値としてコンパイルされてしまう
該当のソースコード
index.pug
pug
1my-component 2 template(v-slot:slot_name) 3 | slot内記述
コンパイル後は
index.html
html
1<my-component> 2 <template v-slot:slot_name> 3 slot内記述 4 </template> 5</my-component>
となってくれますが、mixinで共通化するため
mixin.pug
pug
1mixin myComponent(arg) 2 my-component 3 template(v-slot:slot_name) 4 | #{arg}
index.pug
pug
1include mixin.pug 2+myComponent('slot内記述')
と記述すると
index.html
html
1<my-component> 2 <template v-slot:slot_name="v-slot:slot_name"> 3 slot内記述 4 </template> 5</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",

あなたの回答
tips
プレビュー