explore petite-vue functionalities ...

assets/js/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from './lib/petite-vue.es.js'
 
-const apiUrl = 'http://localhost:8125/api/system/poll/service/pclt-0001'
+const apiUrl = '/api/system/poll/service/pclt-0001'
 
 const appdata = {
 	$delimiters: ['{|', '|}'],
@@ -8,7 +8,10 @@ const appdata = {
 	poll,
 	newdata: '',
 	data: '',
-	save
+	save,
+	mounted() {
+		console.log('app mounted')
+	}
 }
 
 createApp(appdata).mount()

exampleSite/content/_index.md

@@ -2,6 +2,7 @@
 title:  "example"
 summary: ""
 img:
+pageid: 
 domains: []
 topics: []
 date:   2023-02-16
@@ -16,6 +17,6 @@ cyberscopes example site - use petite-vue in Hugo-generated sites.
 
 {{< pv-count init="7" expr="count--" label="dec" >}}
 
-{{< pv-count init="99" expr="save('Hello World!')" label="log" >}}
+{{< pv-count init="99" expr="save()" label="log" >}}
 
 {{< input >}}

layouts/partials/js.html

@@ -1,2 +1,3 @@
+<div>{{ or .Params.Pageid .File.UniqueID "unknown" }}</div>
 {{ $js := resources.Get "js/main.ts" | js.Build (dict "minify" false) }}
 <script src="{{ $js.Permalink }}" defer></script>

layouts/shortcodes/input.html

@@ -4,12 +4,12 @@
  		 @change="save" />
 </div>
 
-<div v-scope>
+<div v-scope @vue:mounted="mounted">
-  <pre v-effect="$el.textContent = data" ></pre>
+  <pre v-text="data"></pre>
 </div>
 
 <div v-scope>
-  <pre v-effect="$el.textContent = newdata" ></pre>
+  <pre v-text="newdata" @vue:mounted="mounted"></pre>
 </div>
 
 <div v-scope>