Demo:

Code used in this post:

extend_head.html:

7

{{partial "vueSFC/global" (dict "ctx" $)}}

index.md:

11

{{< vueSFC/all path="msg_linked.vue" mountId="sfc" xtemplate="msg_tmpl" >}}

🤓 To gain more control you may want to use the following equivalent:

1
2
3
4

{{< vueSFC/style path="msg_linked.vue" >}}
<div id="sfc"></div>
{{< vueSFC/template path="msg_linked.vue" xtemplate="msg_tmpl" >}}
{{< vueSFC/script path="msg_linked.vue" >}}

msg_linked.vue:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<template>
    <p class="msg">{{ msg }}</p>
</template>

<script lang="ts">
import type Vue from 'vue'
declare global {
    interface Window { Vue: typeof Vue; }
}
const { createApp, ref } = window.Vue;

createApp({
    template: "#msg_tmpl",
    setup: () => {
        const msg = ref('Hello from Vue!');
        console.info(msg.value);
        return { msg };
    }
}).mount("#sfc");
</script>

<style lang="scss">
.msg {
    color: lighten(steelblue, 5);
    font-weight: bold;
    font-size: 2.5em;
}
</style>