provide js.Build params, import via @params

assets/js/main.ts

@@ -1,4 +1,6 @@
 import { createApp } from './lib/petite-vue.es.js'
+import { pageid } from '@params'
+console.log("pageid:", pageid)
 
 const apiUrl = '/api/system/poll/service/pclt-0001'
 
@@ -9,8 +11,8 @@ const appdata = {
 	newdata: '',
 	data: '',
 	save,
-	mounted() {
-		console.log('app mounted')
+	mounted(name: string) {
+		console.log('app mounted: ', name)
 	}
 }
 

assets/js/params-tsc.ts

@@ -0,0 +1,6 @@
+// Dummy definitions to make tsc happy,
+// imported by tsc via "import {...} from @params".
+// Hugo / ESBuild will provide js.Build params in @params
+// (see layout/partials/js.html).
+export const pageid = 'fileid-dummy'
+export const apipath = 'apipath-dummy'

assets/js/tsconfig.json

@@ -5,6 +5,9 @@
 	"compilerOptions": {
 		"noEmit": true,
 		"module": "es2022",
-		"lib": ["es2015", "dom"]
+		"lib": ["es2015", "dom"],
+		"paths": {
+			"@params": ["./params-tsc.ts"]
+		}
 	}
 }

exampleSite/content/_index.md

@@ -9,6 +9,7 @@ date:   2023-02-16
 author: helmutm
 draft:  false
 weight: 10
+jsModule: main.ts
 ---
 
 cyberscopes example site - use petite-vue in Hugo-generated sites.

layouts/partials/js.html

@@ -1,3 +1,7 @@
-<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>
+{{- $pageid := or .Params.Pageid .File.UniqueID "unknown" -}}
+{{- with $jsmod := .Params.JsModule -}}
+  {{- $js := resources.Get (printf "js/%s" $jsmod) | js.Build (
+  	dict "minify" false 
+		 "params" (dict "pageid" $pageid)) -}}
+  <script src="{{ $js.Permalink }}" defer></script>
+{{- end -}}

layouts/shortcodes/input.html

@@ -4,12 +4,12 @@
  		 @change="save" />
 </div>
 
-<div v-scope @vue:mounted="mounted">
+<div v-scope @vue:mounted="mounted('data')">
   <pre v-text="data"></pre>
 </div>
 
 <div v-scope>
-  <pre v-text="newdata" @vue:mounted="mounted"></pre>
+  <pre v-text="newdata" @vue:mounted="mounted('newdata')"></pre>
 </div>
 
 <div v-scope>