Demo:

{{ msg }}

Code used for this page:

extend_head.html:

7

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

single.html:

35

{{partial "vueSFC/all" (dict "ctx" $ "path" .Params.vueSFC  "mountId" "sfc" "defer" true ) }}

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

1
2
3
4
5

{{partial "vueSFC/style" (dict "ctx" $ "path" .Params.vueSFC) }}
<div id="sfc">
  {{partial "vueSFC/template" (dict "ctx" $ "path" .Params.vueSFC)}}
</div>
{{partial "vueSFC/script" (dict "ctx" $ "path" .Params.vueSFC "defer" true)}}

msg_partial.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

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

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