Demo:

{{ msg }}

Code used in this post:

index.md:

10

{{< vueSFC/all path="msg_inline.vue" mountId="sfc" inlineStyle=true inlineScript=true >}}

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

1
2
3
4
5

{{< vueSFC/style path="msg_inline.vue" inline=true >}}
<div id="sfc">
{{< vueSFC/template path="msg_inline.vue" >}}
</div>
{{< vueSFC/script path="msg_inline.vue" inline=true >}}

msg_inline.vue:

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

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

<script lang="ts">
import { createApp, ref } from 'vue/dist/vue.esm-bundler.js';

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

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